Prototyping a tool for design enthusiasts to explore typefaces
UX/UI Designer
I created a designer tool that introduces a new method of typeface discovery—an interactive word cloud. This tool allows designers to compare typefaces easily and explore individual typeface applications.

This project was developed as my final project in DSGN 2570: UX/UI Design, taught by Tom McQuaid.
Oct - Dec 2022
User Research
UX/UI Design
Interaction Design
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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
Saved typefaces are organized in folders created by the user. Similar to the main discovery view, users can view folders as clouds.
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
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.
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.
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
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
Meet type
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.
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 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.
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
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.