
Typistry
Interactive type specimen platform
Reimagining the type specimen book for mobile learning
Role
Product Designer
Timeline
3 weeks, Fall 2025
Tools
Figma
Team
Sole Designer
AT A GLANCE
I defined and designed a mobile-first interactive type specimen platform from concept to prototype
01 Problem Reframing
Reframed the brief from “displaying a typeface” to “helping users learn and engage with typography,” identifying an opportunity to transform a traditional specimen book into an interactive, educational experience.
02 UX & UI Systems
Designed the end-to-end UX and UI system for a mobile-first platform, defining information architecture, typographic hierarchy, and reusable components built on strict grid and accessibility principles.
Context
Typistry is a mobile-first interactive type specimen platform designed to help designers explore, understand, and apply typography through interaction rather than static reference. Developed as part of a Communication Design Studio course, the project builds on earlier work in print hierarchy and kinetic typography. By reframing the traditional specimen book as a learning tool, Typistry emphasizes interaction, motion, and feedback to make typographic concepts more approachable and intuitive.
I worked as the sole designer, leading the project well beyond the original assignment scope. In addition to meeting core requirements, I reframed the problem space, expanded the concept into a cohesive product vision, and designed both mobile and web experiences to explore how typographic learning scales across contexts. My work spanned research and problem definition, UX strategy, visual design, system and component building, accessibility considerations, and high-fidelity prototyping. Throughout the process, I focused on translating typographic knowledge into a clear, human-centered digital system that balances education, usability, and visual craft.
01 Problem Framing
Rethinking the brief
Why Design a Type Specimen for Mobile?
The original assignment brief tasked students with designing a mobile type specimen app in Figma that translates typographic hierarchy, motion, and interaction design principles into an exploratory learning experience. The project’s initial goal was to reinforce mobile UI fundamentals in Figma, but with that foundation already in place, I pushed beyond the baseline to question the product’s purpose. Many strong type specimen tools already exist on the web, raising a key challenge: why design a type specimen for mobile when fonts aren’t typically downloaded on phones?
Reframed Design Prompt
How might we reimagine the traditional type specimen book as a mobile-first experience that helps users learn, notice, and engage with typography through interaction rather than static reference?
02 Solution
Redefining the Type Specimen as a Learning Tool
01 Establishing Intent
An opening animation and guided introduction that reframes the type specimen as an interactive learning experience, setting expectations through motion and exploration.
02 Integrated Learning System
Micro-lessons embedded across the app, guiding users through core typographic concepts via short, readily available explanations
03 Community-Driven Knowledge Layer
A centralized forum combining expert insights, peer Q&A, and curated content to support continuous learning.
04 Structured Typeface Discovery
Search and filter tools for browsing, refining, and saving typefaces.
05 Core Type Specimen, Integrated.
The primary focus of the assignment, designed as an interactive specimen and embedded seamlessly within a broader learning system.
06 Desktop as Platform Extension
A scalable web experience designed for advanced comparison, structured browsing, and asset access.
