SITI
Yaotu
Building the Visual Foundation
for a Local Guide Marketplace
As Yaotu's founding designer, I established the product's visual language from its earliest functional prototype and continuously refined hundreds of interfaces as the platform evolved.
My Contribution
I joined Yaotu as the founding designer when the product was still in its early stage. While product strategy, UX flows, and feature planning were handled by other team members, I was responsible for establishing and evolving the product's visual language.
What I Owned
Visual Direction
UI Design
Content Hierarchy
Layout Systems
Design Consistency
Screen Refinement
Visual Direction
Defined the overall visual style of the product.
Layout & Hierarchy
Organized complex content into clear, readable layouts.
UI Design
Designed and refined production-ready interfaces.
Design Consistency
Maintained a cohesive experience as the product grew.
Project overview
Marvelous Meal is an end-to-end mobile experience that connects recipe discovery, pantry management, and grocery planning into one streamlined workflow.
The project focuses on helping users with dietary restrictions make faster, safer meal decisions while reducing food waste and duplicate grocery purchases.
Roll
Scope
Platform
Visual / UI Designer
-
Visual Direction
-
UI Design
-
Layout
-
Typography
-
Content Hierarchy
Web Marketplace
Challenge
“Sharing rides with friends is common, but talking about money rarely feels comfortable.”
Passengers often want to contribute but don't know when or how much to offer. Drivers may quietly feel taken advantage of after repeatedly giving rides, yet hesitate to ask for reimbursement. Over time, these unspoken expectations create invisible social debt that can strain otherwise healthy relationships.
Existing payment apps solve the transaction, but they don't solve the conversation.
How might we make cost sharing between friends feel natural instead of transactional?
Building the Visual Foundation
When I joined Yaotu, the engineering team had already built the core product experience.
The interfaces were functional, but they lacked a consistent visual language. Typography, spacing, layout, and content hierarchy varied from screen to screen, making the product feel unfinished.
As the founding designer, my role was to establish a cohesive visual foundation that could scale as the platform continued to grow.
Typography
Heading Body Caption Weight Scale
Layout
Grid Spacing Cards
Color
Primary Secondary Accent
Components
Button Card Input Tag
Visual Design Principles
Principle 01
Clarity over Decoration
Principle 02
Design for Scannability
Principle 03
Consistency Builds Trust
Principle 04
Balance Information Density
Principle 01
Clarity over Decoration
Before↓
After
Why
Users consistently avoid asking friends for money because initiating the conversation feels socially uncomfortable.
Principle 02
Design for Scannability
Information was grouped into digestible sections so users could quickly scan listings and booking details.
Why
People often remember favors differently, leading to perceived unfairness.
Principle 03
Consistency Builds Trust
展示： 统一 Card。 统一 Spacing。
Why
Friendships aren't transactional.
People often express appreciation in different ways.
Principle 04
Balance Information Density
展示：
复杂页面。
Why
Friendships aren't transactional.
People often express appreciation in different ways.
Product Showcase
Instead of measuring payment volume, the product focuses on reducing social friction.
Looking Back
Working on Yaotu reshaped the way I think about visual design. I came to realize that effective interfaces are not defined by aesthetics alone, but by how clearly they communicate information and support real user tasks.
Consistency Takes Time
Establishing a visual language was only the beginning. Maintaining that consistency across a rapidly growing product required continuous refinement, attention to detail, and countless small design decisions.
Designing with Ownership
As the product's founding designer, I learned the value of clear ownership within a cross-functional team. While product strategy and UX were driven by others, my responsibility was to ensure every screen felt cohesive, readable, and production-ready.
Visual design is not the final layer added to a product. It is the language through which users understand it.