The client, a type designer, needed a redesigned website to showcase and sell his typefaces directly to customers.
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.
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.
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?
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.
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.
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.
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.
To explore alternatives to navigation and font edit options across all the devices, sketching played a crucial role.
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
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.
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.
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.
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.
The solution is also implemented on tablet sized viewports.
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.
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
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.
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.
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.
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
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.
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 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.
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.
The color scheme has been influenced by the clients favorite colors and the colors on the website before the redesign.
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.
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.
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.