Font Field

Overview

Font Field is a font manager app designed to work as a desktop app for macOS. In Font Field creatives can view, classify and manage their fonts.

This was born as a solution for a real life necessity a friend made me realize. Font Field is going to be developed and launched in the near future.

Font Field helps creatives search for fonts they have already installed faster, by allowing classification of their fonts and providing visualization of sample text or custom text.

Role

Designed the entire product and its experience. Performed various activities from research to testing.

Challenge

Create a way creatives can view, classify and manage their fonts to make font wise decisions faster and more clever.

Outcome

Working prototype of a desktop app with positive feedback from potential users, ready to start the development phase to build the MVP.

Project Details

Problem
Creatives, specially designers working with type don’t have a place where they can visualize, classify and manage their fonts, commonly resulting in an Illustrator file with a lot of the same text in different fonts to compare and test. This process usually takes a lot of time and doesn't offer a lot of flexibility in the search of the perfect font to work with.

Goal
The goal for this project was to design a font manager that improved the experience of searching for the perfect type to work with, making the work of creatives faster and wiser.

Design criteria

Ease of use - The app needs to be easy to use and revisit, it should be very intuitive and be very easy to get used to it.
Customization - It should allow some level of customization to better adapt to each user.
Professionalism - Flexible organization and custom filters. Everyone can make the most out of the app. Allow users to work their way.
Categorization and filtering - Users need to be able to add multiple categories to a single font and filter accordingly.

Research

Research objectives

Explore and identify patterns of how creative people usually work with type.
Understand the process of how creative people search for the perfect font to work with.
Identify pain points and unmet needs that creatives face when working with type.
Uncover what creatives felt would have improved past experiences of trying to search and decide for a font to work with.
Learn about how creatives currently manage their fonts.
Learn about the existing landscape of digital solutions and their reception.

User interviews
I interviewed 10 people that fall within the target demographics, characterized as creatives, mostly graphic designers, from students to professionals with 25+ years of experience. The questions focused on learning and understanding their working habits, how they manage their fonts, if they use any app to manage them and how they search for the perfect font for their work.

I wanted to learn about their motivations, actions and feelings while working with type, and identify any pain points while doing so.

Secondary research
I conducted secondary research to understand and learn more about creatives’ behavior and preferences while working. I also wanted to learn about the creative industry itself, how big it is, how many many professionals work with type, how big is the market size, etc. I also searched for any data that allowed me to uncover any pain points or needs of creative people while working with type.

Competitor analysis
To get a better understanding of the competitor landscape, I conducted analyses, first I skimmed about 5 apps on the market and took notes about the design, the features and the feedback they have received, secondly I chose the 3 most popular and did a deeper search and a usability and interaction analysis for each one of them.

These are the apps I researched:

Font Base*
Connect Fonts *
Typeface*
Fontcloud
Font Manager Deluxe

*Font Manager apps selected to conduct deeper research.

Findings
After all the research I condensed all the information into the following findings:

Creatives aren’t aware that font manager apps exist.
Most designers find it difficult to manage their fonts, and often forget about fonts they have installed.
A lot of creatives spend a lot of time searching for the perfect font since they do it in a software that is not specifically for doing so, this process is usually tedious and leaves them with a feeling that they should have tried more fonts.
One of the designers commented that he had tried a font manager app before but stopped using it because of usability problems.
Most creatives don’t use a particular software for managing their fonts, very few have found alternatives ways to manage them, like folders on their computer or boards in Trello.
Designers have thousands of fonts installed, somewhere usually in between 1000 - 8000 fonts.
The most popular fonts are very readable and classic.
Most designers work between 31 - 50 hours a week. Some even more, since they have a full time job and freelance in their spare time.
99.9% of graphic designers choose MAC over PC, because it is widely used across the industry, it’s simple operating system, and the build quality Apple produces.
Even though there are similar apps, the landscape of font managers isn’t very broad.
Most of the competitors are desktop apps, only a couple are web apps (cloud based).
The style of the similar apps is very clean and clear, easy to understand, professional and mostly colorless.
The majority of the competitors’ products have a price, some offer free trials, and some others have free and premium versions.
Flexibility in the organization of fonts is not a feature a lot of similar apps focus on.

User

User story‍

Meet Sylvia
‍
Sylvia is a graphic designer with more than 6 years of experience who works a lot with type, she wants to be able to manage her fonts in an easy and intuitive way, so that she can work faster and make better decisions.

User flow
While working with type, Font Field provides help to view and manage fonts installed in the device, allowing users to make a better and faster decision.

DESIGN DIRECTION

Experience attributes

Approachable
Simple, clear and smooth. Everything needed at sight and intuitive to use. Help users to focus and make smart choices.
Pro level
Relevant, in-context and trustworthy interface. Provide users with a holistic picture.
Customizable
Flexible organization and custom filters. Everyone can make the most out of the app. Allow users to work their way.
For everyone
Open, personal and understandable. Give users the feeling the app was built just for them. Empower users to use the app in their own unique way and maximize its potential.

Layout
A friendly classic with a hint of modernism.
Open, organized and inviting. Like a cool hanging area.

Tone
Enthusiastic diplomatic.
Positive, engaging and precise energy all around.

Ideation

HMW
I mapped out the solutions by going through each step and asked ourselves HMW's to find design opportunities, and followed by gathering inspiration. I enjoyed this part because it allowed creative thinking and bringing in ideas on what people like and find useful. I also liked this process because it helped get inspiration to start sketching.

Sketches
After a crazy 8s dynamic I started to sketch a variety of options for different screens and interactions based on the user flow. This allowed me to visualize the ideas quickly and helped me to think about the layout of the product and to fine-tune all the features.

DESIGN

Digital Wireframes
I converted the sketches into digital mid-fidelity wireframes and then gave them a little more shape turning them into hi-fidelity wireframes, along the way I improved some elements and screens.

Prototype
When the hi-fidelity digital wireframes were ready it was time to start connecting the screens and create the prototype.

My main focus was to prepare the prototype to feel like a real app as much as possible, to ensure the feedback received from users while testing the app would be as accurate as possible.

USABILITY TESTING

My goals for the testing were to:

Test ease of use when classifying fonts
Test all the customization features
Test discoverability and usability of the interaction flow
Learn about users’ behavior, especially on how they classify and find fonts
Gather general feedback about the look and feel of the interface and experience

Guerrilla Testing
I conducted guerrilla testing in a university, I made sure to select participants that were familiar with design and typography. For this I had 10 participants between design students and design professionals.

I explained what the app was about and then let the participants navigate on it and use it for a few minutes. I asked the participants to try to think out loud while using the app to collect feedback and general comments about the app.

Moderated Testing
Moderated in-person tests were also conducted. I gathered 5 participants that were the target group for Font Field. I chose this method because I wanted to be able to watch the user, physically see their pain points, and observe their body language as they navigated through the app.

During the session I provided a general explanation of what the app was about and then proceeded to give different tasks for the participant to complete. I observed how participants interacted with the prototype while completing the tasks and also made notes on relevant things that they said.

Findings + Iterations
1. Designers don’t understand what the button that customs the colors of the background and text is for
In Font Field it is possible to customize the color of the background and the color of the fonts, this with the idea to provide the view of how the font would look in a certain color palette, following a defined branding or simply to see how it behaves with certain colors. During the testing I noticed that users didn’t know what to expect from the button that allowed them to change the colors of the background and fonts.

Solution: I replaced the button for something that was more familiar to the user, so it could hint better what it is for, and I also added a little tutorial the first time someone enters the app to help get familiar with the interface.

2. Some people prefer grid view and others list view
The fonts in Font Field were originally displayed in a list view, while conducting the usability testing almost half of the participants asked if it was possible to change the view to a grid due to preference and style of working, some of them manifested that they think they could work faster with a grid view.

Solution: I implemented some buttons to modify the view of the fonts, so every designer can feel comfortable and productive while they use the app.

3. Custom filters are not enough, designer need a search bar
Even though the custom filters are great for classifying and searching for fonts, users also need a search bar to optimize even more their search for the perfect font for their project. A search bar allows them more flexibility and a certain ease of use while using the app.

Solution: I added a search bar to the user interface, so Font Field accommodates to the needs of the user.

4. Designers desires to have the ability to select a font and search for similar fonts like in other design tools
One of the most useful features related to fonts in other tools is the ability to select a font and search for similar fonts, designers missed that feature while testing Font Field, they mentioned that for some cases that feature is really useful and time saving.

Solution: I included this feature in a way that is familiar to designers so they know what the button is for and can search for similar fonts when clicking it.

Final design

Visual Style
I focused on creating a simple guide of the visual style of Font Field for easy collaboration in the future for the purpose of helping all team members in bringing Font Field to life.

The visual style is meant to help build consistency in the product’s visuals.

Font Field
The final design encompassed all previous iterations, it is the simplest but most complete design. I focused on usability and a good visual appeal. I was able to innovate and create new experiences through our solutions but using familiar elements.

Designers and other people working with type can now classify and search for fonts in an easy and intuitive way. Font Field allows designers to put fonts in folders and also to add tags to fonts. It also can pair fonts, compare and search for similar fonts once one has been selected. Font Field has a lot of customization features, like alignment, font size, view, text, and colors.

Enabling creatives to view and manage their fonts, making working with type more efficient and reducing the time it takes to choose the perfect font for a project.

↗ View prototype on Figma

Takeaways

Next steps
These are the future steps for Font Field:

Development
Now that the design was tested and some iterations were made it is time to start developing the MVP. For this it will be necessary to do the story mapping to define what makes it to the MVP and what is for later releases. It is also important to divide the features and plan the sprints.
Test
When the MVP gets released another round of testing should be made to keep improving the design and experience of the product. The improvement made during this round of testing should be incorporated for the second release of the app.
Availability for Windows
Since the app is meant to be released for MacOS first, the availability for Windows is something that needs to be worked on. The Windows version has to be developed while working on the next features for the MacOS version.
Plugin
For a better ease of work there will exist a plugin version of the app. This plugin is going to be available for the most popular design tools like Figma, InVision, Sketch and the Adobe Creative Cloud to facilitate font selection and font pairing directly from the tool.

What I learnedDuring this project I learned a lot, it was very enjoyable working on it, and the experience was very challenging and fun, here are the most important learning I had while designing Font Field:

Ideate as much as possible
During the ideation stage of the process it is important to explore different techniques to end up with the most ideas possible. Sometimes the craziest dynamics produce the best ideas.
Define research objectives
Before jumping into any research it is important to define the objectives of the research, this will help when deciding what kind of research to conduct. Defining the research objectives first is necessary not only to know what kind of research to conduct but also to guide the questions or tasks of the research toward the objectives.
Multiples ways of testing
Involving the developers from the beginning will make them understand better the product they are about to develop and its interactions, this will minimize doing rework later on the development of the product.
User flows help untangle things
When things are getting complex, creating the user flow is very helpful. It puts a comprehensive process on paper and uncovers problematic and promising points to improve the experience of the product.
Document as much of the work process as possible
Documenting during the whole process is key to be able to share the project with others. Having a good documentation can help fill out the gaps of the product of other people, like stakeholders or developers. A great documentation provides clarity about the process and product.
Fill out a need
The most important part of the product is its capability to cover a need for the user. Even if the idea of the product is already out there there is always room for improvement and to cover unseen things.
Push yourself and enjoy the ride
Usually design is not a one person process except when it is. It is good to be prepared for when this happens, it requires focus, discipline, autonomy, proactivity and self management. Additionally, it requires enjoying working and spending time alone.