Know Time
Know Time
Know Time
Traditional Time System Clock App
Traditional Time System Clock App
Traditional Time System Clock App
Wellness Tech
Wellness Tech
Wellness Tech
Indie Build
Indie Build
Indie Build
AI-Assisted
AI-Assisted
AI-Assisted
Design System
Design System
Design System
A quiet app that brings ancient Chinese wisdom into your daily rhythm.
A quiet app that brings ancient Chinese wisdom into your daily rhythm.
OVERVIEW
OVERVIEW
OVERVIEW
Incorporate TCM to modern lifestyle with vibe coding
Incorporate TCM to modern lifestyle with vibe coding
Incorporate TCM to modern lifestyle with vibe coding
This project explores how TCM principles can fit naturally into modern lifestyles through intuitive design and AI-assisted vibe coding. By translating traditional concepts into glanceable interfaces and culturally inspired visuals, the goal was to make TCM easier to understand and practice. AI tools helped generate illustrations and accelerate exploration, blending tradition and technology into a simple, modern wellness experience.
This project explores how TCM principles can fit naturally into modern lifestyles through intuitive design and AI-assisted vibe coding. By translating traditional concepts into glanceable interfaces and culturally inspired visuals, the goal was to make TCM easier to understand and practice. AI tools helped generate illustrations and accelerate exploration, blending tradition and technology into a simple, modern wellness experience.
Timeline
Timeline
3 Weeks (Design to Launch)
Jul - Aug, 2025
3 Weeks (Design to Launch)
Jul - Aug, 2025
3 Weeks (Design to Launch)
Jul - Aug, 2025
Role
Role
UX/UI Design
Development (AI-assisted)
Product Manager (AI-assisted)
UX/UI Design
Development (AI-assisted)
Product Manager (AI-assisted)
Tools
Project Workflow
Project Workflow
Project Workflow
RESEARCH
RESEARCH
RESEARCH
Knowledge Background
Knowledge Background
Knowledge Background
I extracted the five elements of nature and the cycles of time to show how the human body is a living reflection of the universe's natural rhythm.
I extracted the five elements of nature and the cycles of time to show how the human body is a living reflection of the universe's natural rhythm.
Research Methods
Research Methods
Research Methods
KNOWLEDGE
KNOWLEDGE
11
11
Professional Articles Read
Professional Articles Read
DOCUMENTARIES
DOCUMENTARIES
2
2
Documentaries Watched
Documentaries Watched
QUALITATIVE
QUALITATIVE
3
3
Interviews Taken
Interviews Taken
QUANTITATIVE
QUANTITATIVE
80+
80+
Data Points Collected
Data Points Collected
Problem Statement
How to design a reward flow that’s simple & seamless to help users engage effortlessly?
How to design a reward flow that’s simple & seamless to help users engage effortlessly?
How to design a reward flow that’s simple & seamless to help users engage effortlessly?
Pain Points
Pain Points
Pain Points
01
01
01
Converting traditional timing is annoying
Converting traditional timing is annoying
Converting traditional timing is annoying
text
text
02
02
02
Finding TCM knowledge is time-consuming
Finding TCM knowledge is time-consuming
Finding TCM knowledge is time-consuming
text
text
03
03
03
TCM concepts feel abstract & confusing
TCM concepts feel abstract & confusing
TCM concepts feel abstract & confusing
text
text
DEVELOPMENT
DEVELOPMENT
DEVELOPMENT
AI Tools
AI Tools
AI Tools
I integrated AI as a collaborative partner to bridge the gap between complex TCM data and modern interfaces, significantly accelerating technical execution while maintaining creative control.
I integrated AI as a collaborative partner to bridge the gap between complex TCM data and modern interfaces, significantly accelerating technical execution while maintaining creative control.
Cursor
Cursor
Cursor
Demo
Demo
Demo
Vibe Coding
Vibe Coding
Vibe Coding
Testing
Testing
Testing
Used Cursor to translate "vibe coding" into a functional demo, enabling rapid prototyping and real-time testing.
Used Cursor to translate "vibe coding" into a functional demo, enabling rapid prototyping and real-time testing.
CHATGPT
CHATGPT
CHATGPT
PRD Writing
PRD Writing
PRD Writing
Framework
Framework
Framework
Data
Data
Data
Leveraged ChatGPT to structure project logic, transforming TCM principles into organized, actionable frameworks.
Leveraged ChatGPT to structure project logic, transforming TCM principles into organized, actionable frameworks.
gEMINI
gEMINI
gEMINI
Image Generation
Image Generation
Image Generation
Utilized Gemini to generate visuals, translating abstract concepts into modern, high-fidelity assets.
Utilized Gemini to generate visuals, translating abstract concepts into modern, high-fidelity assets.
Design System
Design System
Design System
A natural classical painting-inspired style
A natural classical painting-inspired style
A natural classical painting-inspired style
I developed a comprehensive design system inspired by classical painting, bridging traditional aesthetics with a streamlined modern workflow.
I developed a comprehensive design system inspired by classical painting, bridging traditional aesthetics with a streamlined modern workflow.
I developed a comprehensive design system inspired by classical painting, bridging traditional aesthetics with a streamlined modern workflow.
Color: Low-Saturation Palette
Color: Low-Saturation Palette
Color: Low-Saturation Palette
A low-saturation palette drawn from nature to foster a calm, pure, and meditative atmosphere.
A low-saturation palette drawn from nature to foster a calm, pure, and meditative atmosphere.
Typography: Classical Elegance for Clarity
Typography: Classical Elegance for Clarity
Typography: Classical Elegance for Clarity
Source Serif was selected for its blend of classical grace and digital clarity, ensuring readability across languages.
Source Serif was selected for its blend of classical grace and digital clarity, ensuring readability across languages.
Spacing & Corner Radius: Precision
Spacing & Corner Radius: Precision
A unified spacing and corner radius system used alongside MCP to ensure visual consistency and rapid development.
A unified spacing and corner radius system used alongside MCP to ensure visual consistency and rapid development.
A unified spacing and corner radius system used alongside MCP to ensure visual consistency and rapid development.
FINAL PRODUCTS
FINAL PRODUCTS
FINAL PRODUCTS
01
01
01
ICONOGRAPHY
make symbols intuitive for
Instant Recognition
By transforming complex terminology into clear visual signifiers, we significantly reduce cognitive load for the user. This visual translation breaks down the language barriers of ancient TCM terms, ensuring health insights are "glanceable" even in a fast-paced modern lifestyle, allowing users to make informed wellness decisions in seconds.
By transforming complex terminology into clear visual signifiers, we significantly reduce cognitive load for the user. This visual translation breaks down the language barriers of ancient TCM terms, ensuring health insights are "glanceable" even in a fast-paced modern lifestyle, allowing users to make informed wellness decisions in seconds.
1 am - 3 am
Represent time with the functioning meridian
1 am - 3 am
Represent time with the functioning meridian
1 am - 3 am
Represent time with the functioning meridian
Translating ancient terms into meridian-specific icons
Translating ancient terms into meridian-specific icons
Translating ancient terms into meridian-specific icons
I converted cryptic "Shichen" characters and meridian names into intuitive organ icons. Users no longer need to memorize complex theories; they can instantly identify which body system is active just by recognizing the symbol.
I converted cryptic "Shichen" characters and meridian names into intuitive organ icons. Users no longer need to memorize complex theories; they can instantly identify which body system is active just by recognizing the symbol.
Crafting cultural motifs into icon assets
Crafting cultural motifs into icon assets
Crafting cultural motifs into icon assets
I blended minimalist modernism with traditional aesthetic motifs. These icons act as more than just functional buttons. They are visual bridges connecting heritage with digital elegance, elevating the overall premium feel of the experience.
I blended minimalist modernism with traditional aesthetic motifs. These icons act as more than just functional buttons. They are visual bridges connecting heritage with digital elegance, elevating the overall premium feel of the experience.
02
02
02
ILLUSTRATION
make illustrations storytelling for
Effortless Memorization
Illustrations serve as storytelling tools rather than just decoration. By pairing abstract five-element theories with concrete character behaviors, we create a "muscle memory" learning experience. This allows users to intuitively grasp the natural rhythm of their bodies through association rather than rote memorization.
Illustrations serve as storytelling tools rather than just decoration. By pairing abstract five-element theories with concrete character behaviors, we create a "muscle memory" learning experience. This allows users to intuitively grasp the natural rhythm of their bodies through association rather than rote memorization.
Kidney
Kidney
Kidney
Suggest to nourish energy
Suggest to nourish energy
Suggest to nourish energy
Heart
Heart
Suggest to have a nap
Suggest to have a nap
Suggest to have a nap
Stomach
Stomach
Stomach
Suggest to have a breakfast
Suggest to have a breakfast
Suggest to have a breakfast
Small Intestine
Small Intestine
Small Intestine
Suggest to have a lunch
Suggest to have a lunch
Suggest to have a lunch
Blending zodiac narratives with five elements
Blending zodiac narratives with five elements
I depicted zodiac animals performing specific wellness activities such as resting through color palettes inspired by the five elements. This allows users to perceive the internal shifts.
I depicted zodiac animals performing specific wellness activities such as resting through color palettes inspired by the five elements. This allows users to perceive the internal shifts.
03
03
03
INTERFACE
make guidance actionable for
Seamless Integration
I recoded ancient laws of time into the interactive language of modern technology. This interface acts as a navigational system that embeds TCM wisdom directly into the user’s daily schedule, ensuring that wellness feels like a natural extension of life rather than an added chore.
I recoded ancient laws of time into the interactive language of modern technology. This interface acts as a navigational system that embeds TCM wisdom directly into the user’s daily schedule, ensuring that wellness feels like a natural extension of life rather than an added chore.
Bridging cycles with the time system dial
Bridging cycles with the time system dial
Bridging cycles with the time system dial
I designed a central dial that aligns meridian activity. It provides a high-level view of the day, showing exactly how traditional rhythms map onto a 24-hour modern clock.
I designed a central dial that aligns meridian activity. It provides a high-level view of the day, showing exactly how traditional rhythms map onto a 24-hour modern clock.
Delivering contextual advice through layered information
Delivering contextual advice through layered information
Delivering contextual advice through layered information
The interface provides precision wellness tips based on the current active meridian. Information is strategically layered: the surface offers quick action items, while deeper layers provide systemic TCM insights for users who wish to explore further.
The interface provides precision wellness tips based on the current active meridian. Information is strategically layered: the surface offers quick action items, while deeper layers provide systemic TCM insights for users who wish to explore further.
Learnings
Learnings
Learnings
01
Early alignment between designers and developers is essential
Early alignment between designers and developers is essential
Early alignment between designers and developers is essential
Close collaboration and shared understanding helped prevent rework, ensured feasibility, and allowed the design vision to translate smoothly into implementation.
Close collaboration and shared understanding helped prevent rework, ensured feasibility, and allowed the design vision to translate smoothly into implementation.
02
Domain knowledge greatly enhances AI-driven workflows
Domain knowledge greatly enhances AI-driven workflows
Domain knowledge greatly enhances AI-driven workflows
Working with AI tools (such as vibe-coding or generative illustrations) required a strong grasp of what to do—showing that meaningful outputs depend on deep domain understanding, not just prompts.
Working with AI tools (such as vibe-coding or generative illustrations) required a strong grasp of what to do—showing that meaningful outputs depend on deep domain understanding, not just prompts.
03
Collaboration fuels better ideas and better outcomes
Collaboration fuels better ideas and better outcomes
Collaboration fuels better ideas and better outcomes
This project reinforced my desire for more cross-functional collaboration. Diverse perspectives—whether from engineering, product, or domain experts—consistently elevated both the design quality and the problem-solving process.
This project reinforced my desire for more cross-functional collaboration. Diverse perspectives—whether from engineering, product, or domain experts—consistently elevated both the design quality and the problem-solving process.