SnapFont: a font discovery app

The challenge

The world around us is brimming with typographic inspiration. From signage to packaging, designers often encounter fonts that spark their creativity. However, translating that inspiration into finding the actual font can be a challenge. This is where Maddy Beard’s (Flux Academy) design challenge came in:

Intrigued by this idea, I took the challenge and decided to explore the possibilities, and see if I could design a user interface for this app within a 3-hour timeframe.

This case study details the design process for SnapFont, an app that aims to bridge the gap between real-world inspiration and the perfect font discovery.

A little research never “hurts”

Understanding the challenge and unveiling user needs

Before I went into “design mode”, and started to do some sketching of what the app would look like according to my intuition, I wanted to really understand the designer’s experience, so I sought out candid conversations with some fellow designers (Graphic, Web & UI Designers). Their responses went beyond a simple “amazing!” They expressed a genuine desire for a tool that streamlines the font discovery process. Specifically, they mentioned:

• The time-consuming nature of searching for fonts
  Sifting through vast libraries and online resources can be frustrating and eat into valuable design time.
• The disconnect between inspiration and identification
  Often, designers encounter inspiring typography in the real world but struggle to identify the exact font or similar options.
• The limitations of existing solutions
  While some font discovery apps exist, they may lack intuitive interfaces, offer limited search functionalities, or have cumbersome workflows.

Learning from existing apps

My research extended to analyzing existing font discovery apps. Here’s a breakdown of some key observations:

Armed with this intel, I grabbed my tablet and sketched a list of core features, laying the groundwork for a user flow that would be smooth and intuitive.

By understanding both user needs and the existing market landscape, I was able to identify opportunities to create a more user-friendly and effective font discovery tool. This research became the foundation for sketching out the core features of SnapFont, aiming to address the pain points and leverage the strengths I discovered.

Designing a Solution (within a 3-hour timeframe)

Wireframing the SnapFont journey

My tablet became a canvas for low-fidelity wireframes. I focused on the five key pages that would guide users through the app:

• Home: A welcoming space showcasing recent searches and a prominent button to capture inspiring typography on the go.
• Capture: Seamless photo capture directly from the app’s camera.
• Import (optional): The flexibility to upload photos from the user’s gallery.
• Identify: This is where the magic happens! The app analyzes the uploaded image, searching for similar font matches.
• Results: A curated list of identified fonts.
• Single Font View: This page displays detailed information about the chosen font and the download option.

Building a cohesive Design System

Atomic Design principles guided the creation of a robust design system. I established a clean and readable typography scale, followed by a color palette that exuded creativity and a sense of discovery. Figma’s variables (primitives & tokens) ensured consistent color usage and font styles throughout the app. Google’s Material Symbols & Icons provided a comprehensive and accessible iconography system.

Next came the design of reusable components: buttons, navigation elements, etc, all meticulously crafted to guarantee design consistency and streamline the screen creation process. Here’s where the magic of the design system truly came into play. By utilizing these components as building blocks, I efficiently assembled the various sections and pages of SnapFont: each component acted as a pre-defined element, allowing me to snap them together to create the home screen, the capture screen, the results page, and so on. This approach not only ensured a consistent visual language throughout the app, but also dramatically accelerated the design process. Furthermore, variant components were created to handle different states and interactions. This attention to detail ensured a dynamic and user-friendly experience within SnapFont.

Prototyping the SnapFont experience

Prototyping stage! Figma’s powerful tools allowed me to simulate user interaction between screens, creating a seamless flow that mirrored the user journey. This pre-launch testing phase was crucial for refining the design before finalizing the app.