During my role at BobaTalks, I designed the design system to aid the design-development flow. I provided documentation and usage guidelines for easy adaptation.
Duration
4 Weeks
Role
Product Designer (Lead)
Team
(2) Designers (6) Engineers (1) Project Manager
Tools
Figma, Library, Storybook
INTRODUCTION
What is BobaTalk's vision?
BobaTalks is a mentorship platform that connects students and professionals for structured career guidance. As the platform expanded, multiple product verticals (mentee dashboard, mentor tools, sessions, chat, scheduling) emerged — each with its own look and feel.
This design system provides a comprehensive set of design guidelines, components, and resources that empower developers and designers to build consistent interfaces that align with BobaTalk's brand standards.
CHALLENGE
Balancing Bold Expression with Functional Usability
We needed to translate BobaTalks’ bold, kawaii illustration style brand identity into a functional design system — one that captured the energy and confidence of the new visual direction while maintaining accessibility, clarity, and responsiveness.
The goal was to preserve the brand’s expressive character without compromising usability, ensuring every component not only looked like BobaTalks but also worked seamlessly for mentors and mentees alike.
SOLUTION
Translating Visual Identity into an Atomic, Scalable Design System
We developed an atomic design system that transformed BobaTalks’ bold visual identity into a cohesive, scalable product framework. Starting from foundational tokens for color, typography, and spacing, we built modular components that maintained brand expression while ensuring usability and accessibility. This structure allowed teams to design and develop faster while keeping every interface distinctly “BobaTalks.”
ESTABLISHING THE FOUNDATION
The foundation was both brand-aligned and scalable
We began by defining the core building blocks of the system — color, typography, spacing, and grid — using design tokens in Figma. These foundations reflected BobaTalks’ vibrant identity while ensuring accessibility and consistency.
BUILDING THE SYSTEM
DOCUMENTION
Building a Connected Design–Dev Ecosystem
A unified workflow connected design and development through shared tools — Notion for documentation, Figma and Tokens Studio for design source of truth, and Github for coded components.
A clear governance model and weekly syncs kept updates consistent, reviewed, and versioned across teams.
RESULTS
Established a scalable design system built on atomic design principles
Created a centralized documentation hub in Notion and Storybook for cross-functional visibility and consistency.
40+
Resuable Components
Improved design-dev collaboration
by aligning Figma Tokens Studio variables with code-level tokens in Github.
LEARNINGS + RELECTIONS
I learned how to think beyond visuals — to design for systems, not just screens.
Building the system from scratch was a deep dive into structure and scalability.
Working with atomic design taught me to break complex interfaces into simple, reusable parts, making every component intentional.
Defining variables and tokens pushed me to consider naming conventions, hierarchy, and future-proofing — how small decisions scale across an ecosystem.
