Problem & background

The mission of our team has always been to empower every user to express themselves through beautiful typography. But even for designers, choosing the right font is no easy feat. This project, the font menu component, is an intent-based font library of over 20k Adobe fonts that aims to help creatives easily find the fonts they need to level up in their designs.

I started working on this project since first joining the fonts team in February 2020. At the time, we started working with Illustrator on the iPad for their Adobe MAX release in October 2020. Since Illustrator users are heavy users of fonts and type, Illustrator on the iPad became our lighthouse app for the font menu. Since then, I have scaled the font menu component across multiple apps and surfaces.

Fonts are essential to design. While millions of Adobe customers access fonts in their apps every month, their experience browsing fonts in Adobe products were inconsistent and limited.

Historically, flagship desktop app teams implemented their own solutions of font menus. Although they provided a lot of values to current users, this makes the experience across applications visually and functionally inconsistent. Most of these font menus are long scrolling lists with little connection to user intent. This becomes especially time consuming for users to find their current fonts and discover new fonts. The new font menu component that I worked on and is owned by the Fonts team, is the first step toward the future off discovering and using fonts in all Adobe applications. Although we first started with new applications (mobile and web), we eventually want to bring the same experience back into desktop applications.

Most of Adobe's desktop font menus do not allow users to activate new fonts within the font menu. Users need to leave their design surface to look for inspiration and activate fonts on the Adobe Fonts website. Once their chosen fonts are activated, they can then return to their font menu and search for the activated font. This inevitably breaks the users' workflows.

Creative pros may know about our extensive inventory of fonts on the Adobe Fonts website, but casual or new users may not even know that the Adobe Fonts service comes with any Creative Cloud subscription. These users think that what they have in their application font menus is all that they get. From research, we know that awareness for our service is definitely a problem, so bringing the font discovery experience all into the font menu can highlight the value of our service and increase awareness.

Objective

The objective of this project is to create an integrated font browse experience that simplifies type complexity and helps users find the right fonts directly in the design surface while keeping in mind consistency and scalability within a suite of apps. The font menu also needs to meet users where they are, bringing inspiration into the app instead of directing users to find fonts on the web.

Initial designs

We mapped our desired experience into three key buckets.

The first section is the quick action/utility section, which includes recently used fonts, fonts that are currently in use in the document, and favorites or personalized groups of fonts. This section is for users who just want to see the fonts they need for a specific project or need.

The second section is for the discovery of all of Adobe Font's 20k+ fonts. We want to be able to highlight the value and surface all of the fonts within the font menu.

Finally, the third section is all the activated and locally installed fonts on the user's device. This essentially includes all the fonts the user would expect to see in their font list.

User testing

Goal #1: to determine whether users understand the new font menu structure

• Participants mentioned the design is “cleaner” and “better organized”

Goal #2: how do users feel about the entry into moods? and how do they react to what they find there?

• Participants were initially hesitant to click on moods but after clicking into the section, found it to be super useful and delightful

• The placement of the section wasn’t ideal. Users were scanning past it thinking it resembled an ad from Adobe

Goal #3: do users understand the search flow?

• Participants expected to be able to search anything (font name, classifications, languages, etc.)

Goal #4: to identify any aspects of the design that would disrupt workflow & to identify any “red flags” raised by the new design

• Participants want the menu to be more customizable & less busy

Goal #5: to understand the participants’ overall impressions of the font menu

• The new menu would improve participants’ experience and save time

• Encourage participants to explore and use different fonts

• Users loved the organization of the quick actions section

Scaling across surfaces

After iterating on user feedback and finalizing the iPad designs, I needed to scale this experience across surfaces to iPhone and web. Their are minor visual tweaks but it is a framework that scales between surfaces. The font menu has now been released on Illustrator & Fresco on iPad and soon to be released on Ps on the iPad. The phone font menu has been released on Fresco and soon to be released on Ps. For the web, the font menu has been released on Creative Cloud Express and the beta versions of Creative Cloud Canvas, Illustrator web, and Photoshop web.

Feature highlights

Some of my favorite features of the font menu include the More fonts menu, Search, and Add fonts to Creative Cloud.

More fonts:

More fonts allow users to browse by intent: classifications are commonly recognized by experienced type users and mood tags are useful for every user, and languages to cater to our international audience. We worked on culturalizing the experience so that within each language, only the classifications and moods that are relevant to the language show.

Search:

Search is a feature that we are actively working on to improve. We want to show font results as well as tag results in order to best build awareness of our 20k+ font library.

Add fonts to Creative Cloud:

The Add fonts to Creative Cloud feature allows users to add their own fonts or their company's brand fonts to their font menu to use alongside Adobe Fonts.

Impact & afterthoughts

At this moment, the new integrated font menu experience has been released in Illustrator & Fresco on the iPad, Fresco on the iPhone, Creative Cloud Express, Creative Cloud Canvas, Illustrator Web beta, and Photoshop Web beta.

The font menu saw amazing outcomes so far. Per month, there are 1.1B font downloads by the font browser and 488k fonts were uploaded via the Add fonts to Creative Cloud feature. Looking forward, our team has big plans for the font menu component. As we add more sections which would inevitably introduce more complexity, we need to rethink the framework and how the font menu scales across surfaces and between apps.

One of the biggest challenges of this project was working with so many product teams. When collaborating with product teams (i,e Illustrator, Fresco, etc), each team has its point designers, product managers, and engineers. They each have their own working style and ways of communicating. As a member of a horizontal team that works across product teams, I needed to figure out how best to communicate with each team and manage juggling numerous sign-offs. Additionally, fitting sections of fonts within a tiny panel is hard. Since fonts and font names are all text-based. finding the best way to group groups of text gets complicated.

I am super proud of my success for this product launch across the Adobe ecosystem. This project gave me the opportunity to collaborate with many teams and solidified my understanding of designing across all surfaces.