Personalized Recommendations
Recommendations based on personal and communal insights, as well as contextual recommendations
Problem & background
This project started with the problem of a blank canvas. While Adobe Fonts is perfect for users diving into fonts when they have an idea in mind, it doesn’t do much to help inspire or guide ideas at the beginning of a project. For the majority of users who do not think of themselves as type experts, the process of finding the right font within our library of 20 thousand fonts can be quite time-consuming. As a result, creatives are looking outside of Adobe at other content-rich platforms for inspiration, like Fonts In Use, Creative Market, and Pinterest.
User research
Before I began thinking about workflows and designs, I turned my attention to user research.
Our team conducted ten 1 hour face-to-face interviews and used Usertesting.com for more findings. We structured our research around users’ design workflows when finding fonts.
Our participants all echoed starting a project by looking for inspiration. They saw mood boarding, fonts used in action, and fonts used contextually as essential to their design process.
“Because I use fonts in use so often, I think it’s so valuable not just to see what it is, but how it’s used. Like a product. How it fits in your life. Just seeing the typeface won’t sell me, but it’s how it’s used.””
We have been hearing about this from our customers for years and this round of user research served as our wake-up call to bring inspiration to our website. Showing fonts in use would give Adobe its competitive edge, and there is just so much potential in what we can do.
Objective
The objective of the project is to inspire our users with rich content right on our website and to increase awareness of the Adobe Fonts service. Aside from increasing website engagement and driving free to paid conversion, we also wanted this project to help train our recommendation engine. In the future, we want to bring recommendations into our applications within the font menu.
Idea #1
The first idea I explored is a guided exploration module on the homepage. This step-by-step onboarding tool lets users tell us what they are working on so we can cater font recommendations to their specified characteristics and intent. Instead of showing users all 20 thousand fonts and asking them to do the work to narrow down font choices, guided exploration aims to offer them suggestions progressively. The goal is to be welcoming and accessible to all users, especially those beginning projects or who do not have much Type experience. Users can also feel in control as they tell us what they need for their work.
Idea #2
The second idea focused on recommending fonts that are personalized to the individual. Powered by our recommendations engine, personalized recommendations can recommend fonts based on personal, communal, and contextual font usage. We then identified categories to recommend: For you, trending, newly released, hidden gems, and staff picks.
For you: track fonts that the user has already used and recommend fonts that others have used, based on shared usage with the user.
Trending: recommend fonts based on popularity within the user’s region.
Newly released: select from the top 25 most recent additions to our font library.
Hidden gems: recommend fonts that are highly rated but have low usage.
Staff picks: a manually curated list of fonts our team would like to feature.
Out of the two above ideas, we decided to move on with Personalized recommendations due to two reasons:
Our recommendations engine can measure font usage across many categories and has room to scale. Aside from the above five categories, the engine can examine other categories such as fonts popular for specific Adobe applications or fonts good for specific intents.
Idea #1, guided exploration, needs an expansion of our tagging system to map more fonts to intents and moods. Additionally, guided exploration requires the user to have an idea in mind before going through the modules, which may not be helpful for users in the browsing stage of their workflow.
User testing
After an initial round of designs, I tested two versions: one version with sections clearly separated and defined, and one version in a mosaic style. The results showed that a mosaic style tested better — users cared less about the category of suggestions. They wanted to see more inspiration and more imagery.
A visual system
Besides recommending fonts, we also expanded our scope to include recommendations for moods (tags), font packs, and font pairings. We created visual system for our four content types. Each card type has a different height to visually differentiate itself from the others.
Our foundry partners provided us with various fonts in use images to showcase their fonts. For fonts that do not have accompanied images, we came up with a color palette to also show those fonts in an inspirational way.
Final design
The feature launched in November 2021 as a new page on the Adobe Fonts website. By default, users see inspirational content across all categories but they are able to select tags to narrow down their content. A blurb below the tags explains the section's purpose and serves as a way to increase SEO. Hovering over a content card shows details of the font and allows quick activation.
Towards the end of this project, our services teams with dedicated websites such as Adobe Fonts and Adobe Stock took on an initiative to revamp our navigation and content framework. This was the perfect time to redesign our homepage to both fit the new framework and introduce inspirational content right on the homepage.
Now on the homepage, we brought a snippet of the recommendations feature along with an entry point to see more on the recommendations page.
Impact & next steps
The recommendations feature saw amazing results. Users are more likely to activate fonts using the recommendations page compared to any other font browsing pages on the Adobe Fonts website.
Not only was this feature helpful for users, but from a business perspective, this feature further elevates our foundry partners by showcasing their fonts with imagery and fonts in use examples.
Next, we will keep measuring and refining recommendations and categories so we can eventually bring recommendations into the application font menus.