After initial conversations with the owner of the type foundry, it became clear that the goal of the website is not only to sell fonts. The website is an extension of the type designer, a manifestation of the meticulous craft of designing typefaces. It is a reflection of the person behind the typefaces.

The team consisted of the business stakeholder, a type designer, three developers, and me in the role of the product designer and the project manager.

The first step has been to put out all questions that the project raised. We knew who is the target audience. What we needed to understand in detail was the buying process. Some of the questions were:

1) How does a freelance designer or a design team within a larger organization go about selecting and purchasing a font?

2) What are they looking for when they start their research?

3) What are the frequent friction points when researching what fonts to buy?

4) What are the common roadblocks when making the actual purchase?

5) Who else is involved in the decision to purchase a specific font?

Primary research has been focused on talking with self-employed designers and design teams in larger organizations. The main topic was the past font purchase behavior. At the same time, we conducted an audit of type foundries on the market. Here the focus has been on the font editing options like manual text input, changing font sizes, editing styles, or leading and tracking settings.

Secondary research has been focused on analyzing videos and reading articles on how design teams in companies select the appropriate fonts.

Among the three key personas of the customer base, we focused on organizations purchasing a font for a product:

1) The decision process most likely takes up to three months. Towards the end of it, 2-3 typefaces are compared.

2) One person in the design team is usually in charge to do research and presentation to other members.

3) The design team might not have the knowledge needed to understand the typography terminology and the factors that need to be considered before making a purchase.

4) Manual text input, reviewing the character set, previewing font styles and font size editing were the top mentioned activities.

5) Design teams in larger organizations need to have reasons to justify a font purchase.

6) Pinpointing the appropriate use of a particular typeface is challenging.

In larger organizations, the research showed that selecting a font consists of a particular set of steps. One potential opportunity we decided to take is to show highlights for each typeface. That way, the website communicates clearly and quickly on the main uses and characteristics of a typeface.

It also became clear that buyers sometimes don't understand the decisions they have to make. For example, what is the difference between OpenType Pro CFF or TTF and OpenType W1G CFF or TTF? Required decisions like these cause frictions in the purchase process.

Based on past purchase behavior, having the number of styles, subfamilies and characters indicated plays an important role when selecting a font. The ability to view characters in various styles and font sizes played a role in buyers' past purchase behavior. It also became clear that potential buyers don't need a high number of font edit options available to decide. That contradicts many type foundries that offer a wide range of editing options on their websites.

One challenge on a type foundry website is managing navigation, font edit options, and purchase flow selection options. The solution needs to work on a responsive website and not take up too much real estate.

We explored an option with a context-based side menu. The options in the menu would adapt to the screen the person is currently at and also to the scrolling position (see video). That way, we thought, all the interactive elements are in one place.

Usability testing revealed that the solution is confusing and, in some cases, makes it hard for people to use due to the options extending below the viewport. We ditched it.

We tried again with an updated version that highlighted the content that the person could edit with a mouse hover over a particular control. While solving some of the issues, the update wasn't good enough. We ditched the side menu completely.

Talking with designers revealed the need to have a quick and easy way to learn about the characteristic traits of a typeface. We started experimenting with a layout that puts the highlights of a typeface to the front. After testing, it became apparent that the layout requires unnecessary interaction. To view the highlights, you either had to click or swipe through.

But the direction of focusing the content and removing everything else got approval from the testers. So we decided to explore that direction further.

Contrary to the desktop, we found the appropriate direction for navigation and font edit options on smartphone viewports early. To get the best solution, we iterated and tested quickly with various layouts of the menu that has been placed at the bottom of the browser window.

In the end, we decided to go with a menu layout that affords the person to move between screens and, in the proper context, edit font styles and sizes.

To better understand the content requirements, the whole team worked together to create a content map. A version of a site map highlights every content on each screen. In the best-case scenario, it reduces clutter when stakeholders get a visual depiction of all the content on each screen.

View the content map

The redesigned menu is placed on top and shows the person the current position and other options at all times. The screens are organized in a way that prevents any content from going deeper than two levels. The hierarchy between the pages is communicated visually in the navigation.

On smartphone viewports, the navigation menu is placed at the bottom. Each screen the person is on at a given moment is labeled at the top. Making sure that the website conveys the current position to the person.

Contrast with the dividers is used to convey the current navigation option selected. If the person is on a second-level screen, that hierarchy is communicated appropriately.

One common issue with digital products is the lack of clear distinction between interactive and non-interactive UI elements. The problem is considerable for products that are not used daily.

For that reason, we focused on the visual affordances of interactive components. Primary, secondary, and navigation buttons use all caps labels.

For the affordance to input custom text, we decided to use the blinking text cursor. The integration has been surprisingly challenging, but testing with people confirmed that it's been worth the effort.

All UI components have defined states. Please note the position of error messages in the case of input fields. Forms on Lettermin are vertical, with one input field below the other. Placing the error messages on the side makes it stand out, and we didn't have to use an additional icon or the red color.

The responsive website needs to afford to make purchases even on smartphones. Some of the steps in the purchase flow require multiple input fields, which can be an issue on smartphone viewports, especially if people miss providing data. After conducting usability testing, the solution we decided to build is based on the Poka-Yoke principle.

If the person misses a required input field a call to action button with the missing input field label is displayed. The user taps the button and is taken directly to the missing field. There's no need to scroll and manually searching the input field and at the same time we can avoid an error state.

Each character from the character set can be magnified by clicking or tapping. That affords the person to view each character in greater detail.

It also highlights the visual design direction we took with the product in which the fonts are the priority, and the rest of the UI is there but doesn't fight for attention.

Most type foundries use a dropdown menu to change font styles. The interaction requires extra time and effort. That spare time is often needed for updating the character set to the style selected.

We went for an improved experience. Using sliders, the font styles update immediately. That way, the person can focus on the transitions and experience the style changes without moving the focus to a UI component like the dropdown menu.

The font style transition is also one of the areas where we, despite being the first iteration of the product, integrated animations. The font style label change and the timing of the font style changes versus the slider movements have been planned and purposefully integrated.

On smartphone viewports, the sliders for font style and size are placed at the bottom. The person doesn't cover up the screen while experimenting with the different font styles.

The visual design of the product is constrained when it comes to color and UI elements. The main screen has a clear visual hierarchy with the typeface playing the lead role. When viewing the website on larger displays, the typefaces communicate the emotions they've been designed to do.

When testing with people, the need to preview the fonts in a light color on a dark background became apparent.

For an even less obtrusive experience, the person can view each character separately. Exploring the intricacies of a typeface becomes easier.

One of the steps in the font purchase flow for design teams in larger organizations is to compare a limited set of typefaces between each other.

An In Detail section of the website makes it easier for designers to evaluate the highlights and use cases of a typeface.

A focused color scheme reduces the distractions away from the crucial aspect of the website, typefaces.

We selected the Dita typeface for the UI of the website.

At the beginning of the project, we agreed on integrating a measurement framework. It sheds light on the usefulness, usage, satisfaction, business effect, and usability of either a particular feature (for updates) or the website.

How the framework is set up depends on the project. In the case of Lettermin, we agreed to include Mixpanel for predominantly quantitative data, Hotjar for qualitative data, and interview follow-ups with people that either created an account or made a purchase on Lettermin.

It consists of five different areas and has two goals. The first is to have the tools and information to understand a problem once people start using a product. It ensures that more perspectives highlight the issue and that the team isn't dependent on a single source of information (i.e., only the analytics tool).

The second goal is to analyze if or how a particular feature of the product affects the North Star Metric (NSM) at the center of the framework. Usually, the NSM is the single most important financial or business metric for an organization.

The NSM is either a crucial engagement or business metric. In the best-case scenario, an organization is already aware of what its NSM is. If not, creating the measurement framework is an excellent opportunity to start thinking about that.

Usability metrics depend on the product or particular feature. It often includes the task success rate for a specific flow and the time to complete a task.

Satisfaction metrics can include, for example, an app rating on the App Store or Google Play. Or it can also be a CSAT, CES, or NPS score. The crucial part of satisfaction metrics is how and when they are collected. For Lettermin, we're using Hotjar, and the plan is to collect short feedback after critical flows (for example, when a person completes a font purchase).

Apart from the standard metrics on retention, stickiness, or % of people that use a specific feature or complete a particular flow, the usage metrics are often tied to the particular nature of the product.

One example can be a Time to experience value metric that defines the number of sessions or a timespan until the person experiences the value of using a product. Behavior change products in the healthcare industry can benefit from using such a metric.

Business KPIs cover the secondary business metrics that are important to the organization. It's a set of metrics that tries to showcase if a specific feature update influences business metrics. It's one of the bridges between product design and the business.