- Role: Design lead
- Skills: UI design, Prototyping, Testing, User Interviews, Animation
- Tools: Figma, Anime.js, Calypso
- Duration: Six months
- Iterations: Fifteen
Jetpack is a open source WordPress plugin for self-hosted WordPress users. Jetpack provides stats, email subscriptions, backups, malware scanning, anti-spam, and more. Its wide range of features makes it extremely popular with over 5 million active installs.
Challenges
In 2019 market research indicated that security and malware remained the top concerns for WordPress users. Jetpack had backups, login protection, anti-spam and malware scanning, but they were relatively hidden among all the other features of the product. Given the high demand for these features we decided to refocus Jetpack on security.
Audience
The audience for Jetpack is as broad as its feature set. The key audiences are the end users; the website builders and development agencies that are integrating Jetpack features into their sites and builds. But Jetpack also has partnerships with hosting agencies and relationships with other internal Automattic teams too. This project was aimed towards our end users, but would deliver benefits to hosting partners who can leverage Jetpack security products in their own platforms.
Scan and backup
Two teams were formed; one for backup and the other for scan. My team focused on delivering a new UI for Jetpack Scan and my roles included UI design, copywriting and prototype development. We defined the following goals:
- To provide the best customer experience for Jetpack Scan
- To make the Jetpack Cloud a security focused customer experience
- To provide an API and destination for customers of Jetpack hosting partners
- To retire the legacy Automattic security plugin, VaultPress
- To reduce security related support inquiries
Solutions
The Jetpack Cloud is built on top of the Calypso framework. This allowed us to move much quicker, inheriting the existing component library.
The first release of the UI was reduced to all that was necessary. A scan will begin instantly once your purchase is complete. You are then presented with scan results (if there are any) and history of previous actions taken.
We used animation to help communicate state within the product. It also added a little bit of interest to the UI which is sometimes blocked by long running tasks. These are available on CodePen if you wish to see them larger.
Refinements
Shortly after launch we were seeing a high failure rate with customers attempting to save their hosting credentials. Having hosting credentials on file allows us to perform one click fixes of known security threats and also improves the reliability of our backups product. Our data indicated:
- 54% of all failures were caused by entering incorrect credentials
- 22% of failures occurred on a single host
We created two new mini projects, one to create automated credential sharing with the the largest host and the other to improve the credentials form and flow.
The original form was quite primitive. It provided little support on where to find the information you need and didn't guide you through the process. It also didn't provide guidance when errors did occur with just a single generic error message.
The following image shows the updated flow for the new form. The form was broken into four parts:
- Host selection: We provide a list to of common hosts but also make a best guess as to what your current host is and put it at the top.
- Credentials form: The form responds to the type of credential selected and the inline documentation provides hints and a link to your chosen host and related documentation.
- Credential verification: The credentials are tested in a stepped fashion in order to show the user at what point the failure occurs. This makes it easier to understand the error and adjust accordingly.
- Confirmation: If everything looks good, you save your credentials.
The form went through twelve design iterations as we refined the flow and ensured we handled all edge cases. Within just a few weeks of releasing the updated form we were seeing around a 30% reduction in failures.
Results
Since launch, Jetpack Scan has become the third most popular Jetpack product and has been one of the best performing products in 2021. We are investing heavily in improving the underlying scan system, making it better at both detecting and fixing errors. Our customers appreciate the simplicity and peace of mind.
My website is my home for everything I do, so it’s important that it's always online for all of my readers and listeners. Jetpack handles my site security and backups, so I can stay focused on keeping a 4-hour workweek.
— Tim Ferriss, 4-hour workweek
Two major hosts are looking to integrate our backups and scans products into their WordPress hosting plans and we will hopefully see the first of those launch in the near future.
We are hoping to recreate some of the successes we have seen by breaking Jetpack into more focused solutions. This will hopefully be better value and provide greater clarity around the Jetpack product family for our customers.