intro image lettermin.png

The client, a type designer, needed a redesigned website to showcase and sell his typefaces directly to customers.

 
 
 
team.jpg

The team setup consisted of the client, three developers and me as the UX designer. I was responsible for research, usability testing, wireframes, interaction design, visual design, and animations.

 
 
 
lettermin current website.png

The existing website didn’t meet the requirements of appropriately presenting the typefaces. It also didn’t include the ability to purchase the fonts. The client redirected potential clients to third-party foundries.

 
 
 

Research

 
 
 
question mark.png

A lot of questions needed answers. What are the factors influencing the purchase? Who are the buyers? What do they look for on a foundry website? What font edit options do they need when trying out a font? Are buyers loyal to particular foundries and make repeated purchases? How many fonts do customers usually purchase?

 
 
 
interviews.jpg

For a better insight, I turned to fellow designers that regularly purchase fonts. Besides finding the answers to the questions, it was also useful to find out about any good or bad experiences on other foundry websites.

 
 
 
competition audit1.png

In parallel with the interviews, a detailed content audit of 12 popular and widely used type foundries has been conducted. The research focused on documenting the different font edit options available on the websites.

 
 
 
post it for research.png

The font edit options used on all the researched websites have been placed on a wall. The most common are manipulating the font size of sample text, styles selection, background color switch and custom text input.

 
 

Research Conclusion

 
 

Despite looking for a specific font, potential buyers will also check out other fonts on the website that are not suitable for the current project. Offering a clear and understandable navigation structure is crucial as most type foundry websites don’t have frequent visits from the same users. As a result, there shouldn’t be a steep learning curve.

During type foundry websites research, it became clear that there is a challenge on how to organize the broad spectrum of font edit options, website navigation, and the purchase flow. All of them require a lot of space, and as a result, foundry websites can be confusing for first-time visitors. With the goal to save screen real estate, some type foundry websites don’t include the purchase option on smaller viewports, and often the websites aren’t responsive.

 
 

first drafts

 
 
sketching.jpg

To explore alternatives to navigation and font edit options across all the devices, sketching played a crucial role.

 
 
 
sketching solutions.jpg

Solutions were tried out for the desktop and smartphone viewports at the same time.

 
 

CHALLENGE: HOW TO MAKE IT WORK ON LARGE AND SMALL SCREENS

 
 
first desktop wireframes.png

On desktop viewports, it soon became clear that a viable solution is to put the navigation and font edit option in one place. That made the content stand out, and at the same time, all interactive elements were available at the same place reducing the learning curve of using the site for first-time visitors.

 
 
 
first purchase flow.png

This UI layout also works for the purchase flow. During the purchase flow, the purchase options are displayed instead of the font edit options and the user can select among the available licenses, typefaces, and styles.

 
 
 
first devices wireframes.png

Although the design for large and small viewports has been done simultaneously, the smartphone and tablet viewports required more attention. The issue was that offering the most used font edit options, and at the same time navigation options, the UI became cluttered.

 
 
 
context based UI 2.png

As a solution, context-based font edit options have been introduced. Based on the content currently on the screen, the most critical font edit option is displayed. When the content shows font styles, the ability to change font sizes has priority.

 
 
 
 
context based UI tablet lettermin.png

The solution is also implemented on tablet sized viewports. 

 
 
 
navigation options lettermin smartphone.png

It’s also used for navigation options. On main screen important news is displayed on top of the screen. The user can read more by taping the Read More button. Scrolling down to the typefaces, the option changes appropriately.

 
 
 
context based UI buy CTA.png

As a result the Buy CTA has more space and sufficiently stands out on smaller and larger smart devices viewports. 

 
 

CHALLENGE: HOW TO SWITCH BETWEEN FONT STYLES FAST AND CONVENIENTLY

 
 
changing font styles-desktop.png

With font styles being a top priority for potential customers, there needed to be a way to offer the ability to quickly move between them on smartphone and tablet viewports. On larger screens, the issue has been solved by placing the options on the right-hand side.

 
 
 
swipe btn first iteration.jpg

One seemingly simple solution was to use the drop-down menu on all screen sizes. While this option works on desktop viewports, it’s not practical on smaller screens. After each selection, the drop-down menu needs to close for the user to see the change. The user always has to make two actions to change the style. Since seeing the characters of the font in different styles is a priority, the drop-down menu might deter users from trying out different styles.

 
 
 
smartphone swipe btn second iteration.jpg

After several options have been considered, we started to look at the swipe button (internal designation) as a possible solution. The way it works is to allow the user to swipe left and right to change font styles. The first iteration consisted of an indicator on top (no. of styles) and the selected style displayed with the label. But the option failed as it didn't afford to swipe. 

 
 
 
changing font styles smartphone UI.png

The option with labels proved to be better. The labels with lower opacity on each side communicate more clearly on how the button can be used. After testing, we integrated the option to either swipe or tap to change styles. By utilizing the swipe button, style changes can be achieved with ease, and it offers users to explore the font no matter what the screen size.

 
 

DISTINCTION BETWEEN INTERACTIVE AND NON-INTERACTIVE ELEMENTS

 
 
interaction design.png

Most websites of type designers have no repeat visits. Therefore learning curve of using the website must be low. One way we achieved that is to distinguish interactive elements. All interactive elements are on an elevated background with all cap labels.

 
 
 
menu background desktop.png

All labels are in the same blue hue with the exception of the CTA button. Testing showed that with the CTA button being the same color, it took longer to get noticed. The different color solved the issue.

 
 

DROP DOWN MENUS

 
 
drop down menu - desktop.png

Drop down menus couldn’t be avoided in all cases. Stylistic sets are one such example. One of the issues with the drop-down menu is the need to take two actions to make the change needed. We wanted to avoid that disadvantage. The drop-down menu on larger viewports remains open even after the user makes the change. The first change still requires making two actions. Any subsequent change only requires one action. The drop-down menu is not an optimal solution.

 
 

button design

 
 
button design lettermin.png

The buttons need to work on desktops where users use the mouse or the trackpad, and on smart devices with touchscreens. The design affords clicking and taping. 

 
 

visual design

 
 
color scheme-lettermin.png

 The color scheme has been influenced by the clients favorite colors and the colors on the website before the redesign. 

 
 
 
navigation background-macbook.png

The background of the interactive elements on the screen is the same color as website background. That makes the navigation elements subside and doesn’t take the focus away from the actual content.

 
 
 
typography.jpg

Dita font, designed by the client, has been selected as the primary font on the website. Among others, it’s used for button labels and headlines.

 

 
 
 
changing font styles smartphone UI.png

On touchscreen viewports, the interactive UI elements have been placed at the bottom. The goal is to allow the user to see the changes made when using font edit options. To put the font edit options on top, the user would cover up the screen and miss the content transitions.