UI and user flow through the purchase process.
The MyFonts cart was due for an update on the back end and front end. Over time, as MyFonts grew and expanded the types of licenses they sold, the cart got cluttered as too many UI elements were shoehorned into a structure that wasn’t quite meant for it. Another problem was that customers would frequently receive a discount, but never know why it happened or how to get another discount. We give discounts for things like buying multiple fonts from the same foundry, so it was important to reflect these savings in the cart.
A new design cleaned up some visual hierarchy issues, made it easier to update license quantities, made the previews look nicer, and looked great on all devices.
To see an example of how the cart behaves in the real world, click here.
The biggest thing I tried to solve was to better organize the various pieces of information we show for each item in the cart. While designing this, I kept in mind that it would need to reflow to be responsive and look good on small screen sizes.
One important usability improvement was to the method of changing a license quantity. Previously, changing the license quantity happened in a modal window like this:
The new method makes it consistent with Buying Choices and shows some suggested tiers rather than just an open text field.
The result: a great cart-to-purchase conversion rate. The abandonment rate of the cart is much lower than ecommerce industry benchmarks.