Font purchasing can be complicated, because after you decide on what font style you want to buy, you also have to select the correct type of license to cover your intended use.From user testing and feedback, we knew that users were frequently tripped up on the license selection step of the purchase flow. I created the Buying Choices interface to help the user to select the correct license and font package for their needs. This interface is an integral part of the purchase flow and allows the user to select which styles in the font family they want to buy, and what type of license.
Buying Choices
Part of the MyFonts purchase flow
2016?
Due to a company re-org, I was brought onto this project after some design and development work had already been completed.
The product plan when I entered the project was to create an exact copy of the CM purchase flow on Dribbble. However, due to user testing and experience with usability issues on similar sites such as MyFonts, I made the team aware that we had an opportunity to correct flaws in the CM purchase purchase process through the Dribbble implementation. These flaws are shown on the screenshot below.
This UI element is called the “buy box” and it’s shown on every CM product page. The choices here are what’s seen on a font page. Other asset types have different licensing options. The original plan was to reskin this UI element in the Dribbble colors with no UX changes.
With the avoidance of these issues in mind, I designed a new flow, based around a few goals.
The goals:
• Get experienced users to checkout quickly and smoothly
• Allow for selection of license types and quantities
• Explain what all these licenses are, but don’t interrupt the flow for experienced users
At this point, you might be wondering why a design asset purchase process is so different than other ecommerce flows. It all comes down to licensing. Let me back up and explain more about how this all works.
Design asset licensing is more complicated than you might think, so here’s a metaphor to explain it. Imagine that you’re a designer working on a website called the Produce Ecommerce Emporium. They sell all kinds of fruit and vegetables, but also seeds, saplings, and products made from the produce. The design constraint you’re working with is that all the apple products, for instance, must be sold on the same product page. That means a design for a purchase page that isn’t just:
The cart is one of the most important parts of any ecommerce site. For this project, there was a business need to update the cart design to accommodate the new purchase options that had been added to MyFonts. I also saw an opportunity to improve some of the cart interactions and increase the clarity of the information presented. My redesign consisted of first redesigning the information architecture of each item of the cart to make it clearer what type of license you were buying, and the quantity. After I had finalized this design, I created responsive designs and worked with the developers to get them implemented.
MyFonts Cart
Part of the MyFonts purchase flow
2016?
This project was a major change to MyFonts which included the top navigation and the home page.
Top navigation: I simplified and reorganized the top navigation to funnel users to the highest value pages. This resulted in an increase in revenue.
Home page: I created a feed-based design for the home page that was designed to be personalized and surface content that was relevant and interesting to each individual user. This was a responsive design as well.
MyFonts Home Page & Top Navigation
Responsive Design and Information Architecture
2016?
Because that would be too straightforward. No, what you need to account for in your design is a number of different types of apple products, each one sold under a different type of quantity unit.
Now of course, in the real world, you’d solve this by simply having different product pages for each of these apple products. For the sake of this metaphor, you can’t do that. You need to account for all these products in a single interface that also explains the concept of apple sauce and apple juice to the user, because by the way, the users of this site just flew in on a UFO and have never come across an apple in their entire life.
So that’s how creative asset licensing works. Unlike in this metaphor, where it’s easy to imagine an apple tree and apple sauce being on different product pages, that doesn’t work for creative assets. The asset is the file that the customer downloads at the end of the transaction, but what they’ve technically bought is a license to use that asset. It’s not particularly riveting stuff, but it does affect the design of the purchase flow at the end of the day.
So how does this all apply to what I designed? Well, here’s the solution I came up with:
The ability to make this into a quick one-click to checkout flow was made possible by selecting a license and quantity by default rather than asking the user what they wanted as many digital asset marketplaces do in this step. We also skipped the implementation of a cart altogether – although this decision was motivated by technical constraints, it resulted in a simplified user experience.
In this case, we defaulted to the most commonly purchased license type for fonts: the desktop license. For assets that were licensed with a personal or commercial option, we defaulted to the commercial license, as that was the license the business preferred that customers select. The design of this page also allowed for experimentations with defaulting to other license types we wanted to promote, such as a discounted combination license.
By defaulting to one simple license type, we avoided causing choice fatigue in the user by presenting them with every single choice up front as part of the purchase process, as is common on competitor sites.
However, we still needed to account for users who needed something other than the default license type. By clicking on the “more options” link, the user is able to see every license offered for this product, as well as a brief description of what type of use each license allows:
This flow allowed us to capture the best of both worlds, supporting both power users who had a highly specific use case such as app licensing, while also supporting the easiest possible flow for the majority of our audience.
Of course, a purchase flow always contains more than the product page and checkout. Here are the post-purchase screens I designed for this project:
