03/13/20 · Dallas, Texas · FontShop.com had won a slew of design awards for their latest redesign. The new, mobile-first UI was cutting edge for a font e-commerce site, but like any website experience, it needed continual iteration to perform well. “Each solution is the source of your next problem,” as Gause and Weinberg put it (see sidebar). After a series of resource changes, the site was starved for attention, and the actual experience of purchasing was proving difficult for users.
I was asked to step in as the business owner for the site in 2019. Given low conversion and sparse resources, I employed a UX strategy that iteratively nudged the buy-flow experience into place, resulting in a significant in lift to Per Session Value and leading to our first year-on-year growth in over eighteen months.
A flood of new, organic traffic was hitting the site in recent months, but conversion was down, as was the average order size.
- A heuristic of the buying path revealed that there were many ways that FontShop.com defied conventional e-commerce patterns.
- User testing showed that customers frequently missed important product options and had a hard time finding next steps like “Add to cart” and how to get to the cart. Difficulties centered on the product options page.
- Funnel analysis of on-site events showed that users were dropping out right before the “Add to cart” step.
- We had a very limited team working on FontShop, so a full-on redesign was not feasible.
New users, unfamiliar with the unique quirks of the FontShop interface, were having a tough time purchasing the products that they wanted because the usual e-commerce cues they expected were hidden or hard to find.
Heuristic analysis, user testing, and customer feedback illuminated key issues in the buy-flow:
- Next steps in the buy flow were not obvious or consistently styled.
- Buttons and product options were often hidden behind intermediate interactions (such as hover).
- The link to the Cart page was not in an expected place.
- UI controllers were often disconnected from the content they controlled.
- The buying options were configured to show the high-priced packages of fonts by default.
- Customers complained about high prices (more than usual).
Between March and November, I worked with our development team to run a series of fourteen A/B tests aimed at making the steps of the buy flow more obvious. The resulting changes progressively moved the buy flow to a more usable state.
Only half of the test were deemed winners, and we further limited development effort to only those changes that showed exceedingly convincing results. But we learned and made crucial improvements:
- Showed lower-priced options by default, reducing “sticker shock” on the product options page.
- Across the site, buttons that lead to the next step in the buy flow were given consistent, bold styling, and clear text.
- The link to the Cart page was given more contrast and moved to the top right, matching most e-commerce conventions.
- “Add to cart” buttons were made visible at all times.
- All licensing options were made visible at all times.
- Overall contrast was increased, making elements easier to see and read.
- Unused functions and extraneous design details were removed.
By Q4 of 2019, the process was adding up to dramatic improvements. Of users that viewed the product options page, we saw:
- +27% lift in converting “Add to cart” clicks
- +54% lift in converting Cart views
- +98% lift in conversion (from product options page)
- +38% lift in Per Session Value
These gains led to our first month of year-on-year growth in almost 2 years, and were the result of process mostly, with some ingenuity; iteration, not innovation. I stepped into the role of steering this project with a deep respect for the brilliant people who worked on FontShop before me. This work only represents a tiny slice of the efforts that have made FontShop great over the years. Ultimately, we helped users be more successful in their journey, steered the site back towards growth, and kept the DNA of FontShop intact.