Font Squirrel

Let’s improve UX and business with design thinking

Recently I went for a typographic hunting process and eventually landed on fontsquirrel.com, I was instactly taken to my junior designer years, but, I found the website outdated, in other words I saw an amazing re-design opportunity, not only focused on improving the aesthetics but reimagining the UX and business model.

Work Done & Platform

Product Design

Branding

Strategy

Tools

Figma

Miro

Year

2021

goodkind mockup

Design Process

Summary

Understand

Primary Research (Interviews)

Expert Review

Patterns Benchmark

Define

User personas

User journey maps

Insights definition

Prototype

Paper Sketching

Brand Design

Mockups and prototypes

Hand Off

Hi-Fi prototypes

Components library

Usability testing

Stage 1

Understand

I interviewed 5 designers from different backgrounds, to make sure the proposal  included different pains and needs. I also performed an expert review to identify potential usability problems and finally I worked on a simple patterns benchmark focused on selecting, filtering, modifying and purchasing content.

Stage 2

Define

Two user personas were created; with different needs, pain points and opportunities and a journey map for each one to understand the font finding process, here’s an example:

Martha the junior freelancer

Martha, the junior freelancer

She needs to create a new graphic asset for a client and has a huge font catalogue installed in her laptop, that makes her machine run slowly.
Finding a font is also a painful process, she needs to remember many font families, so, browsing and installing new fonts becomes a must. She also likes visiting different font websites to discover new typographic families, this process is fun but it also presents multiple challenges.

1

Martha's Journey

She needs a new and fresh font to design a graphic asset

“I need to install a new and fresh script font, I’ll organize my fonts later. ”

2

Martha's Journey

She goes deeper in her research and finds two interesting typefaces, that are quite expensive.

“I've spent about 2 hours in this research this is frustrating.”

3

Martha's Journey

She struggles to find a free font that looks similar to the ones she liked, she still needs to illustrate a couple special characters.

“I had to use a different font, it sacrificed the design quality of the graphic piece.”

I found three insights as principles that will drive the entire ideation process:

Designers want to enable or disable typefaces seamlessly with a digital product, so they can avoid lowering speed in their computers.
Designers would enjoy having a way to play around with different font pairs, styles and colors.
Designers would love to capture instanctly font families from cool websites like the ones featured on Awwwards.

Stage 3

Prototype

After the understand and define stages, I sketched rought ideas of solutions on paper before jumping to the brand and UI re-designs, here are the results:

Brand Revamp

An iso-type that can be rendered better on all sizes required, given that this is a digital business.


Fresh and modern color palette


Readable typeface

font-squirrel-redesign

Clean UI

Clean and trendy style, a experience that designers will love

Improved navigation and filters

List and card view to preview fonts seamlessly

font-squirrel-redesignfont-squirrel-redesign

Dark Mode

Research shows that most designers like to work at night so dark mode is relevant

font-squirrel-redesign

Pro Membership

This is the business solution, designers will pay a monthly fee to have a multiple advantages like:

Have cloud space to activate or deactivate fonts without the need of downloading them

Use an unlimited amount of curated premium fonts


Use the premium Font Squirrel Chrome extension

font-squirrel-redesign

Chrome Extension

Created to disrupt the font market as well as providing meaningful data about new font creators, trends and popular typefaces. Data always brings the right tools to engage users.


The user installs this extension in the browser


When an interesting font is spotted, it tells the user what font it is, if FS has that font in the database, it can be activated immediately, if not, it is going to be added to a queue, when the font is integrated to the product the user will be notified.

font-squirrel-redesign

Font Lab

A space to try fonts in different visual contexts and make an informed decision before a potential purchase.

font-squirrel-redesign

“I’ve used Font Squirrel in the past and to be honest I hated the website, so I moved to different options like Google Fonts. When I tried the new experience, I enjoyed it a lot,
I’d see myself using this quite often.”

Santiago Henao

Interviewed designer

View Next Project