%201.svg)
%20(1).png)
10k Athletics
The Challenge
Create a cohesive visual language that balances speed, flexibility, and long-term scalability — without sacrificing polish.
My Contribution
Built a design system with tokens and variables for color, typography, radius, and spacing, reducing design/development time by 25%.
Created a UI component library grounded in atomic design methodology, enabling scalable, reusable patterns.
Designed responsive dashboards, scheduling, and communication tools with a consistent visual system.
Mentored a college design intern, providing feedback and teaching UI/UX best practices.
Process
1. Design System Foundations
I started by defining the brand’s visual identity through tokens and variables in Figma. These included color palettes, typography scales, spacing, and border radii — forming the foundation for a flexible and scalable system.
2. Atomic Design
Next I applied Atomic Design to structure the system end-to-end — composing atoms (buttons, inputs, icons) into molecules (labeled fields, schedule rows), into organisms (sidebar, radar widget, habits panel), then scaling into templates (dashboard grid/layout) and final pages with realistic data. This modularity made patterns reusable and easy to extend.
%20(1).png)
3. UI component Library
I assembled a UI component library — a curated sticker sheet of buttons, inputs, graphs, cards, and layouts — serving as a single source of truth for both designers and developers.
%20(1).png)
4. Application in Dashboard & Tools
With the system in place, I applied it to the athlete dashboard, scheduling tools, and communication features. These responsive layouts validated the system’s usability and scalability in real product contexts.
%20(1).png)
5. Mentorship & Handoff
I trained the product owner (student founder/designer) in UX fundamentals and component-driven workflows, enabling a post-contract handoff and continued expansion without a dedicated designer.
Outcomes & Impact
Buisness Results
25% faster design/development velocity after system adoption (sprint velocity).
Shared system across features (dashboards, scheduling, communication) via reusable components.
Post-contract continuity: Trained the product owner (student founder/designer) to maintain and extend the library; they shipped new dashboard cards and updated color variables independently.
Reflection
This was a deep dive into the leverage a strong design system provides. Working within the atomic design framework made components scale cleanly and enabled system-wide changes in seconds. I quickly learned that anything not wired into the system creates friction and slows things down. By handoff, the product owner I mentored was extending the system independently. I left with a satisfied client, an informed mentee, and a deeper foundation in systems thinking.
Before & After Summary
In this project I elevated the UI from prototype to production quality, establishing tokens, components, and clear patterns. The result was a cohesive, professional product ready to launch—consistent, accessible, and easy to extend.
.png)
.png)
See More Projects
Select work that showcases a variety of design direction and skill.
%20(1).png)
%20(1).png)
%201%20(1)%20(1).png)