.png)
Font Book X
UX/UI Case Study
Role
Problem Identification, Research, Ideation, Refinement, Finalization
Timeline
January–April 2019 (12 Weeks)
Team
Tools
Rhodia Dot-Grid Pad, rOtring 600, Sketch, Illustrator, Sketch Cloud, Abstract
Project Summary
The goal of this project is to reimagine font book into an app that is more useful, easier to use, adds functionality, and looks modern. In the end, the aim is to make font book not only a utility but an app people want to use.
Check it out here → Final Sketch Prototype
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.
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.
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.
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.
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.
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.
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.
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.,
