Rolling with
Building
Design System
Scaleable Design System
Accessibility
Design Documentation
Rolling with
Building
Design System
Scaleable Design System
Accessibility
Design Documentation
Overview:
Design Lead / Team of 4 / 12 Weeks
Overview:
Design Lead / Team of 4 / 12 Weeks
My Role: Design Lead
My Role: Design Lead
As the design lead of a four-person UX team, I led the creation of Action!, an unofficial design system for Letterboxd, the social film-tracking platform with over 10M+ cinephile users.
As the design lead of a four-person UX team, I led the creation of Action!, an unofficial design system for Letterboxd, the social film-tracking platform with over 10M+ cinephile users.
As Design Lead, I was responsible for:
As Design Lead, I was responsible for:
Led project planning, component inventory, and Figma organization
Led project planning, component inventory, and Figma organization
Facilitated team workshops and usability testing sessions
Facilitated team workshops and usability testing sessions
Built foundational tokens and film card component sets
Built foundational tokens and film card component sets
Authored Zeroheight structure, tone, and accessibility content
Authored Zeroheight structure, tone, and accessibility content
Problem ——> Solution
Problem ——> Solution
We identified that Letterboxd’s current product experience, while beloved, lacked the foundational consistency and accessibility needed to scale.
In this project, our team set out to create "Action!": a human-centered, componentized design system that speaks to both brand and operational efficiency.
We identified that Letterboxd’s current product experience, while beloved, lacked the foundational consistency and accessibility needed to scale.
In this project, our team set out to create "Action!": a human-centered, componentized design system that speaks to both brand and operational efficiency.
UI Kit
UI Kit
Documentation
Documentation
Impact
Impact
By transforming scattered UI patterns into a documented, accessible, and reusable system, I shifted design from reactive execution to scalable infrastructure.
By transforming scattered UI patterns into a documented, accessible, and reusable system, I shifted design from reactive execution to scalable infrastructure.
Cut component redundancy by 40%
Cut component redundancy by 40%
Improve visual clearance and support better hierarchy by rebuilding components and style guidelines.
Improve visual clearance and support better hierarchy by rebuilding components and style guidelines.
40%
40%
Fun and
easy to start
Fun and
easy to start
Reduced onboarding time for new contributors. 80% of the testers found the documentation “easy and fun”
Reduced onboarding time for new contributors. 80% of the testers found the documentation “easy and fun”
WCAG 2.1AA
WCAG 2.1AA
Embedded WCAG 2.1 AA guidance into 100% of documented components
Embedded WCAG 2.1 AA guidance into 100% of documented components
100%
100%
Design For Scales:
Why Letterboxd Needed
a Design System
Design For Scales:
Why Letterboxd Needed
a Design System
Design systems are more than UI kits —they’re infrastructure for consistent, scalable product development. With Letterboxd’s growing interface complexity and a lean team lacking a UX designer, we saw a key opportunity: introduce a design system that brings clarity, accessibility, and efficiency to the product ecosystem.
Understanding Letterboxd:
Platform Features, Team, and Gaps
Understanding Letterboxd:
Platform Features, Team, and Gaps
Freemium
Freemium
3 Key Features
3 Key Features
Letterboxd is growing
Letterboxd is growing
From 2020 to 2024, subscribers shot up
from 1.8 million to 17 million
From 2020 to 2024, subscribers shot up
from 1.8 million to 17 million
The box office doesn’t lie.
That’s an 844% increase
The box office doesn’t lie.
That’s an 844% increase
No UX designer.
No UX designer.
Estimated under 20 employees.
Design decisions led by product managers, brand designers, and developers.
Estimated under 20 employees.
Design decisions led by product managers, brand designers, and developers.
—free use with paid Pro/Patron tiers.
—free use with paid Pro/Patron tiers.
Core Features
Core Features
Business Model
Business Model
Team Composition
Team Composition
What is Letterboxd?
What is Letterboxd?
Letterbox.com
Letterbox.com
Letterboxd is a social film diary platform where users can log, rate, review, and discuss movies.
Letterboxd is a social film diary platform where users can log, rate, review, and discuss movies.
3. Social Features
3. Social Features
Follow friends, read others' reviews,
and discover trending films.
Follow friends, read others' reviews,
and discover trending films.
65
65
List & Reviews
List & Reviews
Users can curate lists
and write reviews
Users can curate lists
and write reviews
For when you want to feel something
For when you want to feel something
username
username
200 films
200 films
93
93
868
868
Film Logging
Film Logging
Users log films they've watched
and rate them
Users log films they've watched
and rate them
Log
Log
4.5
4.5
Letterboxd is community driven -----
since we're an open field for any film lover to bask in,
our users enjoy coming to the site.
But do they enjoy using it?
What We Found:
Inconsistencies, Accessibility Gaps, and Design Debta Design System
What We Found:
Inconsistencies, Accessibility Gaps, and Design Debta Design System
We conducted a full-site audit and built a component inventory to assess styles, interactions, and layouts.
Team zoom meeting: Organize and analyzing the current Info Arch and UI kit
Team zoom meeting: Organize and analyzing the current Info Arch and UI kit
Meeting to align the naming of tokens
Meeting to align the naming of tokens
Challenges Identified:
Repeated, inconsistent UI patterns
Limited attention to accessibility standards
No centralized guidelines for design or handoff
This gave us a bird’s-eye view of systemic inefficiencies and helped us frame our solution.
Letterboxd Inventory
Letterboxd Inventory
⛔️️ Fragmented UI,
Inconsistent Experience
⛔️️ Fragmented UI,
Inconsistent Experience
Through a full design audit, we surfaced inconsistent visual styles, duplicated components, and varied interaction patterns. The absence of documented UI logic or shared naming conventions made it difficult to maintain quality and ship efficiently, especially for a lean team with no dedicated UX designer.
Through a full design audit, we surfaced inconsistent visual styles, duplicated components, and varied interaction patterns. The absence of documented UI logic or shared naming conventions made it difficult to maintain quality and ship efficiently, especially for a lean team with no dedicated UX designer.
Currently, we have more than 20 different shades of gray. That not only affect the efficiency of the product development, it also affect the experience of the end users.
Currently, we have more than 20 different shades of gray. That not only affect the efficiency of the product development, it also affect the experience of the end users.
⛔️️ Accessibility Gaps
⛔️️ Accessibility Gaps
Basic WCAG standards were often overlooked, affecting both visual clarity and navigational consistency for users with disabilities.
Basic WCAG standards were often overlooked, affecting both visual clarity and navigational consistency for users with disabilities.
Besides the inconsistent styles of font, shape and border.
The size of the text and touch point are too small, the color contrasts are too low, That makes certain interface not accessible, and not usable.
Besides the inconsistent styles of font, shape and border.
The size of the text and touch point are too small, the color contrasts are too low, That makes certain interface not accessible, and not usable.
⛔️️ Lack of Scalable Infrastructure
⛔️️ Lack of Scalable Infrastructure
With new features, film releases, and editorial content rolling out regularly, Letterboxd lacked a systematic way to grow—while maintaining its distinct brand identity and community voice.
With new features, film releases, and editorial content rolling out regularly, Letterboxd lacked a systematic way to grow—while maintaining its distinct brand identity and community voice.
Why Now: Aligning UX Gaps with Business and Brand Goals
Why Now: Aligning UX Gaps with Business and Brand Goals
With a small team, limited design resources, and growing user engagement, Letterboxd needed:
Cross-functional efficiency
Brand cohesion across platforms and vendors
Scalable, accessible components for long-term product evolution
From Audit to Strategy:
How Our Team Approached the Redesign
From Audit to Strategy:
How Our Team Approached the Redesign
As a team of four UX designers, we followed a structured process:
# 1
# 1
Developed design principles for the new system
"FILM"
Flexible
Inclusive
Lively
Meaningful
Developed design principles for the new system
"FILM"
Flexible
Inclusive
Lively
Meaningful
Learn more
Learn more
# 2
# 2
Named the system Action!
— a nod to the cinematic moment where creation begins
Named the system Action!
— a nod to the cinematic moment where creation begins
Learn more
Learn more
# 3
# 3
Build the UI Kit:
Improving the information hierarchy and visual language across the platform
Build the UI Kit:
Improving the information hierarchy and visual language across the platform
Learn more
Learn more
# 4
# 4
Build the UI Kit:
Improving the information hierarchy and visual language across the platform
Build the UI Kit:
Improving the information hierarchy and visual language across the platform
Learn more
Learn more
