1. At a glance
Role
A Product Designer
Timeline
Sep 20 – Oct 20, 2026 (1 Month)
Team
1 designer, AI agents for repetitive component work
Tools
Figma, Airtable, Style Dictionary, Storybook, Git
One-line summary: Lumo is an AI-value platform and its design system gives the web, mobile and admin products one shared set of tokens and components, so new screens are built faster and look consistent.
Scope: Customer web app, mobile app and back office (admin) system, all served by one token and component system.
2. Context and problem
- About Lumo: Lumo helps teams understand where AI creates real value in their business. Customers use the web and mobile apps, the internal team runs everything from the admin back office.
- The problem: The three products were designed screen by screen with no shared foundation. Colours , spacing and buttons drifted between platforms and every hand-off to engineering needed extra explanation.
- Goals: Cut the time to design a new screen, keep the brand identical across platforms and give engineering a single source of truth for tokens.
- Constraints: One designer, a fixed delivery window and new tooling to learn (Style Dictionary, Storybook).
- What success looked like: A new screen can be assembled from existing components with no one-off styles and a token change in Figma reaches the code without manual copying.
3. Resources
| Resource |
What it is |
Link |
Owner |
| Design Library |
Figma library: tokens, icons, web, mobile, admin components |
Figma Link |
Aye Kyawt |
| Airtable Base |
Component registry and tracking |
Airtable link |
Aye Kyawt |
| Git Repo |
Token build pipeline and component code |
Repo link |
Aye Kyawt |
| Production Storybook |
Live, published component documentation |
Storybook link |
Aye Kyawt |
| Lumo DOC |
lumo-reference-site |
link |
Aye Kyawt |
4. Process
Phase 1: Research and references
- What I did: Reviewed the previous assignment design systems lessons and listed which patterns Lumo (capstone project) needed, such as data tables, progress and form flows.
- Key decisions: Borrowed the structure of mature systems but kept Lumo's own look, with Aqua as the brand color and Inter as the typeface.
- What didn't go to plan: I collected too many references up front. Only a few shaped the final decisions, so research took longer than it needed to. Because I also would like to continue building this project so far.
Phase 2: Foundations and tokens
- What I did: Ran a naming workshop, then built two tiers of tokens: Core for raw values and Semantic for design use. Added On-Light and On-Dark modes plus Web, Mobile and Admin product platform modes.
- Key decisions: Designers only use Semantic tokens and every Semantic token aliases a Core token. That keeps rebranding to a single place.