- Role: Design lead
- Skills: UX research, UI design, Prototyping, Testing
- Tools: Figma, WordPress, React
- Duration: Four months
- Iterations: Four
Search has typically been a challenge with WordPress, especially for larger sites with extensive content archives. Jetpack Search was created as a simple way to bring the power of Elasticsearch to WordPress.
Jetpack Search was originally only available as part of the higher tier Jetpack plans. In early 2020, we embarked on a project to create a standalone product that brought improvements to speed, ranking, indexing and theme compatibility.
Research
The research for this project was fairly extensive. We explored competing products, surveyed existing Jetpack Search customers and performed short internal interaction tests to fine tune behaviour of the product.
The research helped us prioritise our roadmap and identify the following features as our main areas of focus:
- Relevance (8.5)
- Search speed (8.4)
- Facets (7.5)
- Prioritising search results (7.2)
- Ability to customise the look and feel of results without code (6.7)
Challenges
Ensuring theme compatibility was our biggest challenge. There are hundreds of thousands of commercial themes to accommodate and bespoke themes too. We set out to find a solution that was theme agnostic, a balance between a opinionated design and something that inherits the look and feel of your chosen theme and brand.
We also wanted to ensure:
- Instant search lived up to its name, providing results as you type
- We could support large data sets with filters and faceting options
- Search worked on all devices, from desktop to mobile
- Searches were linkable and search engine friendly
- Customers could purchase and immediately use Jetpack Search
Refining the user journey allowed us to reduce the time from initial purchase through to working product. This created its own set of unique challenges — the most difficult was determining the point at which we were able to begin indexing the site. Ideally the index will have processed at least the last few weeks of content, ensuring that the customer can test the product after purchase. An incomplete index would potentially make the product look broken, so we needed a way to highlight index progress if it was still ongoing by the time the customer returned to their site.
Solutions
We solved theme compatibility issues by creating a search overlay. The overlay would inherit some theme styles such as typography and link colours, but also impose much needed restrictions on layout and behaviour. This allows us to deliver features of the product like faceted results and search as you type without having to worry how a theme has been created.
Within the WordPress administration interface we also created some new UI elements to communicate the index progress and also plan usage. Jetpack Search is billed per record, so it is important customers understand at which point they are likely to be moved to the next billing tier.
Prototyping
There were two key interactions that we wanted to refine in order to make the product feel instant and responsive.
The first was how the search experience was triggered. Most WordPress themes already have a search field somewhere on the site which gave us multiple options for how the search overlay is triggered; either on focus or after the initial query..
The second thing we wanted to test was the impact of search as you type. Whilst Google have normalised this, we wanted to understand how it impacted the perceived speed of the product and also test our APIs to ensure they are nice and responsive.
I developed a one file plugin for WordPress that allowed us to test ideas quickly in the most popular 20 WordPress themes. We used the plugin to test these specific interactions with customers before having to invest in their development.
Results
I like having a search experience that is sortable, filterable, and feels like it's integrated natively into the site. Jetpack Search does all of this, but most importantly, it returns great results without heavy configuration.
— Chris Coyier, CSS Tricks
Spinning search into a separate product has worked out well. The lower cost tiers proved really popular with customers just looking to improve search and that didn't need many of the other Jetpack tools and features. New purchasers have been increasing steadily (~45% MoM each month since launch).
This isn't the end of the journey for Jetpack Search. We have already began collecting feedback for further refinements to the product including search analytics and greater control over what content is pushed to the search index.