_Problem Space
#1
Users couldn’t understand what Zams actually does or how to start.
#2
The information architecture was confusing, with duplicated or hidden entry points.
#3
No onboarding flow existed — new users often got lost in the interface.
#4
UI patterns were inconsistent, which increased design-developer friction.
_Goals
■ Simplify the information architecture and clarify key user flows.
■ Build a consistent design language and interaction pattern.
■ Improve onboarding success rate and user efficiency.
■ Create a scalable design system for future development.
Design Process
01 Reframing the Information Architecture
I restructured the product into four clear layers: Templates, Agents, Apps, and Shortcuts.
The Copilot page became the main entry point, centralizing all conversations and actions.
Before: scattered modules across different tabs.
After: unified navigation and contextual hierarchy.
02 Designing the Onboarding Flow
I designed a branched onboarding flow that allowed users to connect apps, skip, or explore freely.
Animated walkthroughs and visual hints were introduced to help users understand the product gradually.
“ We wanted users to feel guided — not taught. "
03 Redesigning the Templates System
I redesigned the template modal: categories on the left, details and demo on the right, with a clear CTA at the bottom.
This helped users quickly understand functionality without external documentation.
Templates were the starting point for creating new agents.
04 Designing Agent & Shortcut Sharing Flow
I defined sharing flows and permission levels for agents, shortcuts, and folders — private, selected, and public.
The design differentiated sender and receiver experiences, including states for non-logged-in or unauthorized users.
“ A consistent sharing model reduced confusion and improved collaboration clarity. "
05 Establishing a Unified Visual System
I built a design system centered around SF Pro Text, standardizing component sizes, color tokens, and spacing.
All components were consolidated into a single Figma system with both Standard and Example variants for developer reuse.
Impact
↑ 25%
Years into design
↑ 20%
Happy Clients
↑ 40%
Industry Awards
Reflection
This project taught me that in an early-stage startup, a designer’s job goes beyond visuals — it’s about structuring clarity.
I drove a transition from chaos to coherence under tight resources and ambiguity.
The value of design lies not in “looking better,” but in “being easier to understand and easier to scale.”