Main Screen of the Redesigned Font Book.

Font Book X

UX/UI Case Study

Content SeparatorContent Separator

The Problem

Font book is a font manager made by Apple Inc. for macOS first released in 2003. Unfortunately, the app hasn’t changed a whole lot since that time. There is so much that could be done with the app now that the font world has changed; fonts are no longer just a description of bézier curves but software.

This leads to the purpose of this project. This project seeks to reimagine Font Book for the modern age.

Full Project Brief

Content Separator
Apple's current Font Book Application.
Content Separator

The Process

When redesigning an application like Font Book, it requires a fairly comprehensive process. Starting with research and a competitive challenge to see what's out there and which ideas work and which ones don't. Followed by rapid iteration of theoretical interfaces and experiences with pen and paper. After, a narrowing of ideas and a higher fidelity mockup is produced that is offered to others for feedback. Then, feedback is incorporated into the design with a nearly done version being tested by potential users. Lastly, the user testing is incorporated and a final prototype is made to be built by engineers.

Content Separator

Competitive Analysis

When doing the research for this app redesign, a competitive analysis was performed to assess the strengths and weaknesses of current and potential competitors in the font management landscape.

I analyzed two similar apps — RightFont 5 and FontBase — and one service — Google Fonts. The two apps revealed that the ability to manage, sort, filter, and collect fonts were killer features. Google Fonts, although not a direct competitor, is the most popular and available non-system font library. People use it not only because it's free, they use the service because it's easy to find, filter, and sort the fonts theatre available. Although, Google Fonts is not perfect with the font installation process remaining difficult.

The main takeaways were to have powerful search, filter, and sorting with the ability to collect fonts for projects and have easy installation and maintenance.

Full Competitive Analysis

A placeholder image for some app screens.
Content Separator

User Scenarios

One of the important steps in User-centred design is user scenarios exploring the lives of potential users.

Using these scenarios, I found that searching for novel fonts is an important aspect while also ensuring it is legal to display these fonts. Another scenario reveals that displaying a practical preview of the font in use is important. Finding complementary pairs of fonts is also an essential feature to keep people coming back. This can be achieved through aggregate data from Font Book across the globe or a panel of typography experts.

Full User Scenarios

User Scenarios for Font Book X.
Content Separator

Flowcharts

Flowcharts are an invaluable tool to plan out the design of your app. Since I was redesigning an app rather than making one from whole cloth, I mapped out the current app workflow as well.

The flowcharts revealed a solid roadmap to a MVP to future development of the product after version one.

Full App Flowcharts

App Flowcharts.
Content Separator

Low Fidelity Wireframes

After all of the research and analysis is done, I had a strong basis in which to make sketches of app screens and to draw interactions between them.

Low Fidelity Wireframes

Low Fidelity Wireframes.
Content Separator

Image & Graphic Assets

Here is where we put the competitive analysis into action. I took all the research and incorporated that into the images and assets which would fit with the existing system iconography and be useful to the user.

Full Image/Graphic Assets and Analysis

App assets.
Content Separator

The Solution

Please explore the app prototype below! There you will find the final app prototype displaying the new and improved functionality of Font Book X.

The main sections include —

∙ the library where users can explore the fonts that they have installed with an option to filter and sort the fonts,

∙ collections where users can find the collections of font they collected for projects or the collections automatically generated by classification or popularity,

∙ the store where users can get free fonts or buy fonts for future projects or to fill in for a missing font,

∙ the add font screen where users can explore a font's weights, pairings, examples, etc.,

Final Sketch Prototype

Showing the featured section of the font store.
Content Separator← Back