Give the quiz a try

Project details

My role: I was the sole person working on this app.

Methods and Skills: UI Design, UX and Interaction Design, JavaScript

Table of contents

1. Situation & Problem
2. Solution
3. Conclusion

Situation & Problem

"Can you tell me what typeface that is?" I've been asked this question a few times over the years.

The Problem

How do you develop your typeface-identifying ability? There are apps that display some text, styled in a particular typeface, and ask you to identify the typeface. I'm looking for something that forces me to focus on the anatomy of the type.

The Solution

I decided to create a quiz that highlighted and explained the defining characteristics of the typeface in question.

Give the quiz a try.

The "Question" view

This screen seems to be 90% epicenter - the giant word with the 'highlighting' of the typeface anatomy. I explored a few options before landing on the dashed circles and lines.

The "Final Score" view

Quiz takers enter through the home page, go through a series of question screens, and end on the final score page. What would I expect to see after I answered the last question?

For me, it was the following:

• my score
• my answers
• the correct answers
• some explanation for each answer
• my options for where to go next
• some indication of how awesome I am (or not)
• I don't want to travel to other pages to satisfy these points
• how I did compared to other quiz takers

Conclusion

I made the decision to focus on the early steps in the interface design process and reserve styling for later. I've tried the opposite approach - focusing on things like color, typography, etc. and trying to make things look great from the start - but that always delayed project completion and left important problems unsolved. I think this helped me focus on the purpose of the project.

I built this quiz to learn about typefaces and JavaScript. This was a great experience exercising my design muscles to build something for myself.

Give the quiz a try