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.

Grateful you're here! Always happy to chat ^^

This site is

under active revamp.

Last updated Jan 9, 2026 ©Jean Chen

Grateful you're here! Always happy to chat ^^

This site is

under active revamp.

Last updated Jan 9, 2026 ©Jean Chen