VISUAL DESIGN · WEB PRODUCT
Connecting travelers with local guides
in Japan.
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 ROLE
Visual Designer
TEAM SIZE
23
TIMELINE
June 2025 - Present
PLATFORM
Web
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.
01
Visual Direction
Defined the overall visual style of the product.
02
UI Design
Designed and refined consistent, production-ready interfaces.
03
Layout & Hierarchy
Organized complex content into clear, readable layouts.
04
Design Consistency
Maintained a cohesive experience as the product grew.
Building the Visual Foundation
When I joined Yaotu, the product was still largely functional — screens contained the necessary information, but there was no established visual system to guide how that information should be presented.
My first focus was to define a visual direction that could give the growing product a recognizable and consistent identity.
EARLY INTERFACE
Functional structure · Limited hierarchy · Minimal differentiation
REFINED INTERFACE
Clear hierarchy · Stronger visual rhythm · Consistent product language
01 — Establishing Hierarchy
Introduced clearer distinctions between headings, supporting information, actions, and secondary content.
02 — Creating Visual Rhythm
Used spacing, grouping, and consistent alignment to make dense interfaces easier to scan.
03 — Building a Product Language
Established recurring patterns for typography, color, cards, controls, and emphasis across the platform.
Visual Evolution Across the Product
01 — Availability Calendar
EARLY INTERFACE
REFINED INTERFACE
From dense pricing information to a scannable availability system.
02 — Guide Profile
EARLY INTERFACE
REFINED INTERFACE
From fragmented profile information to a clear, structured hierarchy.
Designing for Complex Information
As Yaotu expanded, many screens needed to accommodate increasingly dense information — from guide profiles and pricing to availability, booking details, and service options.
My role was to translate this complexity into clear visual structures, using hierarchy, grouping, spacing, and progressive disclosure to make information easier to scan and understand.
As Yaotu expanded, many screens needed to accommodate increasingly dense information — from guide profiles and pricing to availability, booking details, and service options.
My role was to translate this complexity into clear visual structures, using hierarchy, grouping, spacing, and progressive disclosure to make information easier to scan and understand.
01 — Status at a Glance
Surfaced trip status, timing, and location cues so guides can quickly understand what is happening and what requires attention.
02 — Structured Information
Grouped traveler, trip, payment, and meeting details into clear sections to make a dense interface easier to scan.
03 — Clear Action Priority
Separated primary actions from secondary controls, helping guides identify the next step without competing visual elements.
Maintaining Consistency as the Product Grew
As Yaotu expanded across traveler and guide experiences, maintaining consistency became increasingly important.
I established reusable visual patterns for typography, color, cards, controls, and interaction states so new interfaces could evolve without fragmenting the product experience.
Reflection / Takeaway
Designing Yaotu taught me that visual design is not simply about making individual screens look polished. As the product grew, my role increasingly became about creating structure — establishing patterns, hierarchy, and consistency that could scale with the product.
The biggest shift in my thinking was learning to design not just for individual screens, but for the system connecting them.