Type - Janice Kim

BACKGROUND

My typography obsession

In spring 2022, I took a book design course, gaining a fresh perspective on typography inspired by Paul McNeil's The Visual History of Type. I realized the need for font directories like Google Fonts or Adobe Fonts to include more information on typeface origins, purpose, and foundries. I left the idea on the back burner but decided to revisit it in a UX/UI design class five months later.

THE PROBLEM

It’s difficult to make intentional typeface choices beyond appearance. From visual fit to best use cases, with many typeface options, it’s hard to find the perfect font.

SKIP TO SOLUTION ↓

USER INTERVIEWS

Discovering user needs

Before starting, I had to identify pain points in font discovery for designers that a web-based solution could address. I also aimed to determine the unique affordances of my platform compared to Google Fonts or Adobe Fonts. To gain insights, I interviewed three people: a non-designer, a design student, and a professional designer.

SURVEY

Identifying pain points

I sought out more summary-focused, quantitative data via a short survey that I sent out to design communities and the undergraduate design and fine arts newsletter. In a week, I had 25 respondents:

The top 3 pain points individuals faced in selecting a typeface were: choosing font pairings, having too many options, and wanting to discover novel typefaces.
Choosing a typeface is time consuming because it’s difficult to test and narrow down typefaces.
The average amount of time spent searching for typefaces was about 45 minutes.

RESEARCH SYNTHESIS

Interpreting data

Using the notes and quotes I wrote down during interviews and survey statistics, I organized insights in FigJam to extract insights. To discover patterns and overarching themes, I grouped data hierarchically.

MOVING FORWARD

Given time constraints, I prioritized my insights and decided to focus on the top three when brainstorming potential solutions. I also decided to focus on developing a solution for designers.

THE DIRECTION IS CLEAR

Simplifying search

Through synthesis, I identified 3 insights that helped me identify the root of the problem: designers seek a simplified typeface search and discovery process that emphasizes appearance and intention.

No way to compare typefaces at once

With the goal of suggesting more universal, popular typefaces, existing tools like Google Fonts focus on allowing the user to explore typefaces individually. So many tabs!

Increasing discovery by avoiding infinite scroll

Typeface discovery is centered around filtering and scrolling through a database. This makes it difficult for users to discover new typefaces efficiently.

Making more intentional typeface choices

It’s already hard enough trying to find background information on a typeface without going to Wikipedia. Currently, font sites have minimal information, giving only basic foundry information.

THIS IS WHEN I HAD A

Lightbulb moment

My solution needed to visually organize typefaces for effortless discovery and comparison, avoiding a mere list or database view. My focus shifted to: How might we create a new way to easily discover and compare typefaces without becoming a database?

In the realm of natural language processing, word clouds visually summarize vast information, commonly used for depicting website metadata. As an exploratory tool for text data, using a word cloud for typeface discovery enables users to compare typefaces side by side, test them faster, and avoid scrolling.

AN OPPORTUNITY ARISES

Choosing a direction

With a clear problem space and starting point, I delved into specific pain points and created initial rough concepts. Over the next few days, I brainstormed potential solutions, jotting down notes whenever new ideas arose. My ideas coalesced into three main concepts:

Draggable typefaces within the cloud
Folders to save and organize typefaces
Foundry profiles to follow

MOVING FORWARD

Given time constraints, I prioritized my insights and decided to focus on the top three when brainstorming potential solutions. I also decided to focus on developing a solution for designers.

LOW-FIDELITY

Bringing ideas to life

Next, I began wireframing required screens at low-fidelity in Figma. This process allowed me to focus on layout, ideate detailed flows, and begin component design without getting bogged down in the details. While some of these screens would not ultimately prove necessary for presenting the final solution, they helped me better conceptualize it as a holistic system.

Font cloud

This interactive cloud of typefaces is filterable and searchable, with the ability to remove typefaces temporarily that aren't of interest.

Typeface info

Individual typeface pages feature all of the fonts available via a family overview, examples of the typeface in use, an overview on similar typefaces, and pairing recommendations

Folders

Saved typefaces are organized in folders created by the user. Similar to the main discovery view, users can view folders as clouds.

FEEDBACK

In-class critique

I was given the opportunity to receive feedback from peers by presenting my wireframes to the class. Some key considerations that were brought to attention were:

Incorporating an onboarding process to ensure the user doesn’t feel overwhelmed with the cloud
Creating a separate, consistent space to compare typefaces side by side
Differentiate typefaces in the cloud using color or opacity for clarity

MOVING FORWARD

I actually liked how the monotone color palette of my wireframes fit in with the idea of elevating the typefaces, rather than adding in color. As I began creating hi-fi mockups, I limited my color palette to grays, blacks, and whites.

HI-FI

Refining the look

I converted wireframes into screens while considering peer feedback. Creating a component library ensured consistency and feasibility in my designs. Additionally, I started working on mock-ups for the mobile version of Type.

USER TESTING

Evaluating the solution

I conducted 3 think-alouds to assess how users interacted with Type. Based on feedback, I revised my designs, resulting in an improved user experience:

Introducing micro-interactions to enhance experience
Creating a smoother onboarding process without tool-tips, which may get lost on the page
In the mobile view, including a dark mode option

INTERACTION DESIGN

For designers, by a designer

A key comment from Grace, a current product designer, was to maximize user experience and cater to my target audience, designers, by incorporating subtle, yet impactful interactions:

Micro-interactions such as having the seesaw in the navigation bar pivot for playfulness
Using hover states for buttons to highlight interactivity without using color
Adding active states for navigation to ensure the user knows where they are
Introducing in-page, “jump-to” navigation for longer typeface description pages

THE SOLUTION

Meet type

Onboarding

Users are offered guidance on exploring the cloud with the option to go through the onboarding process. The onboarding demonstrates how to interact with the playground, a collapsible space where users can drag typefaces of interest and individual typefaces in the cloud.

Explore the cloud

Users can search for specific typefaces based on keywords, filter the cloud by classification, languages, price, and more, and customize preview text when the user clicks on a typeface.

List View

List mode is suitable for quickly comparing typefaces by skimming through the list or if you already know the name of the typeface you wish to further explore.

Details

When directed to a typeface’s page, users can see all of the fonts available via a family overview, interact with the typeface via a text editor that I call the “sandbox,” gain background information, and explore real-world examples and pairings.

Saved

Saved typefaces are organized in folders created by the user. Similar to the main discovery view, users can view folders as lists or clouds.

The playground also functions as a cart, where users can drag typefaces from the playground into their folder.

BONUS

Mobile version

When designing the mobile version of Type, I sought to keep designs consistent while maximizing space. This included changes such as:

Including a bottom navigation bar
Playground lives at the bottom of the page and splits the page horizontally when open
Incorporating dark mode
Leaving the sandbox out
Decreasing hover interactions due to technical feasibility

REFLECTION

Learnings

A self-generated product

Initially, I was nervous because the problem was self-defined and self-generated. This ambiguity pushed me to think more critically for new solutions, which was extremely exciting. I enjoyed pushing myself to think of a project that was more focused on my interests and less on a "business need" or new app idea. UPenn is already business-y enough!

The details make a difference

A big takeaway was how interaction design and animations can impact user experience. Because this project had fewer screens, I learned about applying different scales of interaction and using interaction design to add a playfulness to the site. I’m excited to go beyond smart-animate and see how I can explore Figma prototyping to build more detailed experiences.

When inspiration strikes

Design inspiration can come from anywhere at anytime. Never did I think that I would be inspired by a computer programming concept to build a visual tool for designers, and yet here we are! I learned that I can pull inspiration from different sources that may not seem relevant to ideate new approaches to existing problems.