Portfolio 2026

PORTFOLIO 2026

产品设计作品集

Complex systems / AI workspaces / Enterprise SaaS

Doris Yeung / 杨婷婷PRODUCT DESIGNER / 产品设计师

From complex product systems to production-ready frontend delivery

Product experience · Design systems · AI workflows & growth content

0→1million-scale

AI agents, tools & multi-device UX

Led Vika’s zero-to-one core UX across data collaboration, workflow automation, AI-assisted app creation and its overseas redesign; the product reached a million users during my tenure. Experience also spans AI agents, web, phone and tablet products, including multi-device work for Yunzhijia and HEYTEA.

10+design team

Design systems & team leadership

Led 10+ designers focused on interaction and UX, also covering brand and visual design, with goals, reviews and delivery QA. Led Vika’s design system on Figma Community, then established engineering standards and AI collaboration rules to deliver interfaces, visual assets and interactive frontends with Figma and Vibe Coding.

2× #1Product Hunt

Brand & growth design

Designed sites, demos and launch assets for overseas growth. Independently produced bilingual Remotion / HyperFrames videos from script and storyboard through motion and delivery, plus AI narration, digital presenters and covers. Wrote Agent Skills and multi-Skill workflows for production, review and delivery; both launches earned Product of the Day #1.

AI NATIVE / VIBE CODINGPRODUCTION-READY FRONTENDS

  • UI & frontend build

    Codex + React / Next.js: UI, visuals and real interactions

  • Agent Skills

    Reusable workflows for design, content production and delivery

  • PR & release QA

    GitHub PR: states, responsive UI, localization and release QA

02 / 43
DORIS YEUNGPRODUCT DESIGN ARCHIVE

HOW I WORK

Use product evidence to refine designsKeep key decisions with the designer

Test design assumptions against real tasks, subscription states and sign-up funnels, then revise the design. AI supports research, implementation and checks; I own the problem, trade-offs and release decision

  1. 01DEFINE THE PROBLEM
    Define the problem

    Feedback and task data

    Summarize research

  2. 02
    Compare designs

    Prototypes and task flows

    Generate options

  3. 03TEST ASSUMPTIONS
    Test assumptions

    Real tasks and key states

    Assist comparisons

  4. 04
    Build interactions

    Components, states and access

    Code within design rules

  5. 05RELEASE DECISION
    Review and iterate

    Test results and release feedback

    Summarize checks

CURRENT AI COLLABORATION

Figma-led

  1. Design the prototype
  2. Review together
  3. Handoff and verify

Vibe Coding

  1. Codify the rules
  2. Build with AI
  3. PR review and QA
04 / 43

DESIGN JUDGMENT / THREE PROJECTS

The basis for each design choice

Product evidence sets the boundary: what to simplify, which states to distinguish and where to remove friction

  1. BUDAPRODUCT TRUTH

    A full workbench carries more detail than a short feature explanation can hold

    TASK / FILE / STATE

    Use Mini UI to focus the action; retain real tasks, artifacts and execution states

  2. SANDOCKSYSTEM RELIABILITY

    Payment events, subscription status and access permissions change at different times

    PAID / CANCELED / PAST_DUE

    Check access separately for paid, canceled and overdue subscriptions

  3. VIKAFIRST ACTIVATION

    The sign-up funnel exposed friction at the mandatory questionnaire

    FUNNEL / QUESTIONNAIRE

    Remove the requirement and reduce questions before first creation

05 / 43

Agent Workspace / Product & Launch Design

2026

Buda

Buda connects Agent tasks, sandboxes and cloud Drive. I contributed to product UI and web demos, and made the Remotion launch film

ROLE
Product Designer · Design Engineer
SCOPE
Workspace and files · Website · Mobile / tablet Remotion launch film · Product Hunt gallery
06 / 43

BUDA / LANDING PAGE

Explain Agent workwith motion and Mini UI

Led design and implementation of the Hero motion, scenario demos and Feature Mini UI to show how Agents plan, execute and deliver tasks, including responsive adaptation and release checks in five languages

  1. StructureLanding page Hero

    Set the Hero claim, then arrange the supporting product evidence

  2. Motion and textureLaunch video

    Use the launch video to establish motion rhythm and visual style

  3. Interaction componentsAgent Chat

    Use real planning and tool states to define the components; peer products are reference only

  4. Delivery checksStates / locales

    Check progress, errors and handoff across responsive layouts and five locales

TradeoffReduce workbench detail for a short explanation; preserve real tasks, files and execution states so the Mini UI remains grounded in the product

BUDA.IM / LANDING PAGE
The current Buda landing page at buda.im, from the navigation and Hero through the Agent workflow demo and customer logos
07 / 43

BUDA / MULTI-DEVICE · MOBILE · DESKTOP

One session, native on both ends

Desktop holds conversation, browser, terminal, Git and Drive in one workspace. Mobile is rebuilt for small screens; generated files return as cards

DESKTOP · AGENT WORKSPACE
Buda desktop agent workspace: the Marketing Agent runs its 9:00 daily brief, offers topics and opens Google Trends in the Browser panel
Buda mobile Drive: folders and files in Growth Analytics / Board, led by the scorecard the agent edited two minutes ago
MOBILE · DRIVE → OUTPUT
Buda mobile: the generated Scorecard.md opened, with its signals, files read and what changed

Both surfaces share session and file structure, tokens and component styles

08 / 43

BUDA / MOBILE APP

Progress and approval on mobile

After starting a task on desktop, use the phone to check the same session, open generated files or add instructions for the Agent

MOBILE DESIGN NOTES
  • The same session context stays available when switching to the phone
  • Execution details stay collapsed until the user needs individual steps
  • Generated files are saved to Drive, with a card in the session for later access
THE TRADE-OFF

Setup and debugging stay on desktop

Buda mobile: session entry with the recent session list
Buda mobile: the new session entry with suggested tasks
Buda mobile: the native session for one agent run, question and answer
Buda mobile: the Drive folders and produced files
Buda mobile: the produced file previewed in the conversation
Buda mobile: the process block, Worked for 1m 20s over files explored and commands run
Buda mobile: search across sessions and files with contextual results
Buda mobile: the profile page, workspace and agent defaults
09 / 43

BUDA / AGENT EXPERIENCE

One task, from request to result

A growth-scorecard task connects the request, completed steps and the file saved to Drive

Buda — Agent Workspace
Growth AnalyticsCMO+CIO joint scorecard
Growth Agent · done
Your request

Build a CMO+CIO joint scorecard that proves growth impact.

Understood. I'll align acquisition efficiency and pipeline quality.

Execution plan

Align acquisition efficiency and pipeline quality
Draft the KPI tree and the data-quality rubric
Assign owners across growth, RevOps and data engineering

Tools used

Workspace Searchdone
Data Extractordone
Report Builderdone
Ask Growth Analytics to continue…
Claude Sonnet 4.6 · MEDIUM

Task result

Draft complete

AgentDriveBrowserGit
CMO+CIO scorecard draft
Report Builder · synced to Drive
Draft outline
KPI treeAcquisition efficiency
Pipeline quality
Data-quality rubric
Owners
Open in DriveSynced to Drive
Align acquisition efficiency and pipeline quality01Draft the KPI tree and the data-quality rubric02Assign owners across growth, RevOps and data engineering03Draft KPI treeAcquisition efficiencyand pipeline qualityData-quality rubric

Visible execution steps

DriveCMO+CIOscorecard draft
Open in Drive

Ready to open

10 / 43

BUDA / AGENT CANVAS

Two human gates

One run leaves six artifacts. A person is only asked at the start, and before delivery.

PlanExecute planIt starts once you agree
Generate · PreviewNeither asks a person. The artifacts carry the proof.
ReviewAwaiting approvalThe last gate stays human
Design call

Gate the irreversible. Let the artifacts speak.

November content calendarnov-content-calendar.xlsx · Drivewritten
Nov 202613 planned posts
123456789101112131415161718192021222324252627282930
LinkedInXInstagram
OpenNothing needed from you
AI briefPAGE
Social postsQUEUE 03
claw-man.tsxREACT
claw-man.gameWEB
team-contact.csvCSV
11 / 43

BUDA / WEBSITE DESIGN

Make Agent work visible

I designed the Hero motion and Mini UI, then implemented the frontend as a continuous, readable product story

Buda website Hero workflow showing a Coding Agent, messages, tool execution, and a browser result

Choreograph the timing

Stage input, execution and results as one readable story

Build with reusable components

Callbacks coordinate text, tools and preview components

12 / 43

Agent Content Library / Review & Launch

2026

Busabase

Busabase stores agent outputs and prompts for reuse. I designed the brand page and review UI, and produced the bilingual launch film

ROLE
Product Designer · Brand & Motion Delivery
SCOPE
Brand page · Logo Kit · Mobile app / tablet HyperFrames launch video · Product Hunt gallery
13 / 43

BUSABASE / MOBILE + DESKTOP

Approve on mobile, full diff on desktop

Review key changes on mobile; inspect the full diff and review history on desktop.

Mobile · Review key changes

Busabase mobile inbox on the Review tab, grouped Ready to merge, New and Earlier

Inbox

Busabase mobile change request detail with status, commit message and review history

Change request

Busabase mobile operation detail: the Changes list of proposed values and the commit message

Field changes

Desktop · Inspect the full diff

Busabase change detail in a desktop browser, with what will change, confidence, importance and the approve action

Full changes, description and review history

14 / 43

HYPERFRAMES / PRODUCT LAUNCH VIDEO

Product launch video:from story to frame-level QA

Busabase launch video in EN / ZH, with master and review cuts. AI supported HTML / GSAP; I owned narrative, continuity and frame QA

16
Video scenes
EN / ZH
Locales
HTML + GSAP
Build
MASTER + REVIEW
Delivery
AI storyboard concept: pass foreground agents to focus on the Busabase trusted source, with work contexts receding into the distance
AI storyboard concept: Data, Document, Skill and App unfold within one continuous workspace

Find the video issue

At 8.307s in the video, source and target overlap for about 101ms, making a transformation look like duplication

Specify the shot correction

Keep one identity-bearing icon; reveal the row shell first and hand over the icon at the landing coordinate

Define the video recheck

Check icon overlap, landing and both video timelines frame by frame. Keep review recommendations separate from verified fixes

15 / 43

Global Developer SaaS / Product & Launch

2025

Sandock

A cloud sandbox for AI code execution and MCP hosting. I designed onboarding, runtime states, recovery and billing, and helped build and launch the product

ROLE
Product Designer · Design Engineer
SCOPE
Lifecycle · Commercialization Frontend delivery · Global launch
16 / 43
DORIS YEUNGPRODUCT DESIGN ARCHIVE

OVERVIEW / INFORMATION ARCHITECTURE

Start integration and monitorruntime in one overview

Overview brings together integration guides, sandbox states, API keys, volumes, recent activity and monthly usage
  1. 01 / SETUPStart with setup

    Guides, API docs and examples sit on the first screen.

  2. 02 / OPERATESee what runs

    Sandbox states, volumes and API keys share one view.

  3. 03 / ACCOUNTUnderstand usage

    Usage, plan quota and billing sit in one place.

Refined native Sandock Overview showing setup, state, activity and usage; sample data
17 / 43
DORIS YEUNGPRODUCT DESIGN ARCHIVE

PRODUCT JOURNEY / SYSTEM LOGIC

Every state says what happened and what comes next

Runtime, storage and subscriptions have separate lifecycles and next actions. State feedback connects configuration, recovery and upgrades

FROM FIRST ENTRY TO SCALED USE

Activate

Reach the first useful run

Configure the environment

Environment, volumes, permissions

Run

Read state and execution feedback

Recover safely

Pause, retry, or delete

Scale

See quota and billing before upgrade

Beta infrastructureCommercial SaaS
STATE AND ACCESS REVIEW SCOPE
  • Runtime feedback + recovery
  • Volumes + permissions
  • Quota + billing
18 / 43
DORIS YEUNGPRODUCT DESIGN ARCHIVE

COMPETITOR ANALYSIS / COMMERCIAL PRICING

Competitor analysis to Sandock pricing

Compare billing models, choose charging dimensions, and define paid plans
Trade-off
Price by resource tier; keep executions within plan allowances, with no separate charge
SOURCE NOTE
Research informed the original pricing; Sandock plans/quotas and official competitor price snapshots compiled 2026-08-18 (historical prices)
19 / 43

Data Product / Enterprise SaaS

2019-2026

Vika

APITable

Vika uses fields, views and linked records over the same data. I joined early and helped design these core interactions

ROLE
Core Product Designer
SCOPE
Zero-to-one product · Information architecture Core workflows
20 / 43

PRODUCT EVIDENCE / DATA MODEL

Fields, views and relationsorganize the same data

Fields define data types, views offer different ways to read the same data, and relations connect records across tables
  • FIELDSColumns carry a type

    Give each column a type and options so similar data follows consistent input rules

  • VIEWSA view is not a copy

    Switch views over the same data without maintaining separate copies

  • RELATIONSTables link, not paste

    Link records across tables to reduce repeated data entry

# Feature iterationCan manage
NRM
ATitle☷Option⌕AttachmentLinked record
1Synthesize interview insightsPlanned⌕ Interview notesResearch repository
2Test field languageIn progress⌕ Naming matrixField taxonomy
3Multi-view navigationIn progress⌕ Flow mapView patterns
4Starter task templateDone⌕ TemplateTemplate library
5Map member permissionsPlanned⌕ Access matrixMember directory
6Validate linked fieldsIn progress⌕ Field listData model
7Publish template spaceDone⌕ Release notesRelease plan
8Review formula fieldsIn progress⌕ Test resultsQuality checks
9Archive delivery checklistDone⌕ Delivery listDelivery project
9 records
21 / 43
DORIS YEUNGPRODUCT DESIGN ARCHIVE

ONBOARDING / RETROSPECTIVE CONCEPT

Create first, personalize later

OriginalRegisterRequired surveySurvey drop-offFirst creationConceptRegisterFirst creationDefer collectionUse caseOptionalStart using
Original · Source reconstruction
22 / 43
DORIS YEUNGPRODUCT DESIGN ARCHIVE

PRODUCT EVIDENCE / AUTOMATION

Configure steps without losing context

Grouped entry points and files on the left for quick access. Kept the full flow in the center and step settings on the right, so configuration does not cover the canvas

Automation canvas showing the trigger and selected action on one vertical route.
01 / WHAT CAUSES WHAT

The whole flow stays visible

02

Keep field names and sources

Inserted variables retain their field names and identify the source step and record

03

Save and enable separately

Saving settings and enabling the flow are separate actions

23 / 43

VIKA / MULTI-DEVICE · MOBILE · TABLET

Mobile review, tablet setup

Mobile supports flow review and on/off controls; tablet places the canvas beside step settings. Both share design tokens and icons

MOBILE · FLOW → ACTION CONFIG
Vika mobile automation flow with a status bar, a title bar and vertically stacked trigger and action nodes
Vika mobile action config with the DingTalk action, webhook URL, message type and message content fields
TABLET · CANVAS BESIDE CONFIG
Vika tablet automation with the navigation rail and automation list, four flow nodes in the middle and the action configuration panel on the right
24 / 43

VIKA / MOBILE APP

Edit records on mobile,configure tables on desktop

Browse tables, edit records, view files, toggle automations

MOBILE DESIGN NOTES
  • Separate the toolbar and view tabs into two rows to preserve space for records
  • See fields and files on one page; tap a field and pick the new value from a bottom sheet
  • The automation list shows each rule's on/off state, recent runs and results, and why it is paused, with a toggle
THE TRADE-OFF

Table structure stays off the phone: field values change in place, while creation, field types and view setup stay on the desktop.

MOBILE · GRID → RECORD → AUTOMATION
Vika mobile datasheet with toolbar, view tabs and record rows
Vika mobile record detail: tapping Status opens a bottom sheet of options with the current value ticked, while fields and files stay visible above
Vika mobile automation list with running and paused automations
25 / 43

ONBOARDING / MOBILE ENTRY

Guide new users from setup to tables

First use moves from templates and help, through use-case and role questions, to the table list. Source and community questions are optional

WHAT THE FIRST FOUR STEPS ASK

Use case
Sets up the workspace
Role
Picks the templates shown
Source
Marked optional
Community invite
Skippable

Onboarding ends in a configured workspace where users can continue working with tables

  1. 01FIRST RUN

    Vika mobile first-run home with the usage guide card, use-case template entries and the help center

  2. 02SETUP WIZARD · STEP 1

    Vika mobile setup wizard step one asking how the workspace will be used

  3. 03LANDING

    Vika mobile datasheet list with the datasheets already in the space and the new-datasheet action
26 / 43

VIKA / TABLET DESIGN

View details alongside the list

Tablet keeps navigation, list and detail panes visible together. Opening a record retains the list while fields and comments appear on the right

GRID · THREE-PANE LAYOUT
Vika tablet datasheet with the navigation rail, the datasheet list, twelve records and the field columns all visible at once
RECORD · LIST BESIDE DETAIL
Vika tablet record detail keeping the list on the left while the side panel shows fields, comments and the comment box
27 / 43

DESIGN INFRASTRUCTURE / IN-HOUSE SYSTEM

2021

Design System

Vika

I led and published the Vika design system, bringing semantic tokens, product icons, components and interaction states into a shared resource for design and engineering

ROLE
Design System Lead
SCOPE
Foundations · Icons and components Engineering delivery
28 / 43
DORIS YEUNGPRODUCT DESIGN ARCHIVE

FOUNDATIONS / DESIGN LANGUAGE

Semantic tokens for design and code

Named colors by purpose so design and code share semantic tokens. Kept the same components and interaction states across light and dark themes

200+semantic color tokens
BRAND / PRIMARY 500#7B67EE
Primary textSYSTEM TYPE / 600

SEMANTIC NAMING

Text / Common / Primary
LIGHT THEMECanvas / #F0F2F5
Primary textSecondary text
Bg / Brand / Default#7B67EE
DARKCanvas / #0D0D0D
Primary textSecondary text
Bg / Brand / Default#907FF0
LIGHTDARK
29 / 43
DORIS YEUNGPRODUCT DESIGN ARCHIVE

ICON SYSTEM / CONSTRUCTION

Shared geometry, optical rules

A shared grid and optical rules guide the icons; Outline and Filled styles are checked for legibility at actual product sizes

300+Native product icons

16 × 16 · base canvas

GROUPED VARIANTS

Group styles of the same icon for switching and reuse

SELECTED STATE

Compare default and selected states on one grid

CORNER GEOMETRY

Corners and outlines retain their proportions when scaled

30 / 43
DORIS YEUNGPRODUCT DESIGN ARCHIVE

COMMUNITY / COLLABORATION / DELIVERY

Shared component rulesfrom design to release

Check interface styles, states and themes against the published library

  • BASIS

    Shared names and states for fields and actions

  • TRADE-OFF

    Reuse structure; keep field and navigation semantics

  • ARTIFACT REVIEW

    Check styles, states and themes against the library

Vika Design System component library published in Figma Community
31 / 43
DORIS YEUNGPRODUCT DESIGN ARCHIVE

SKILL SYSTEM / VIBE CODING DELIVERY MAP

Five Skills for video and product assets

Video & web motion

Mini UI & project illustration

  • Video Studio

    Manage topics, scripts, production, checks and publishing

    Films and channel assets

  • Feature Demo

    Sequence real interfaces into a feature demonstration

    Editable feature demo

  • Landing Vignette

    Animate key page actions and states as web code

    Web motion components

  • Mini UI

    Extract key objects, actions and states from real workflows

    Mini UI components and states

  • Project Illustration

    Translate product capabilities and relationships into illustration objects

    Illustrations and drawing rules

32 / 43

SKILL CASE STUDY / BUDA WEBSITE

Mini UI design for the Buda website

Real tasks frame the brief; AI supports implementation. I check artifact order, file details and review states against the component rules

Check each scene against these rules

  • Build & deploy

    Show the file, then mark it ready

  • Generate media

    Show the video name, duration and play control

  • Review changes

    Show added and deleted code line by line

Build & deploy

Generated files and their status

Generate media

Image input → video output

Review changes

Files and code changes

33 / 43

PERSONAL CONCEPT / RECORDER & APP

2026

Memento

Memento is a wearable recorder and companion app concept. I designed recording, sync and AI-assisted review, and built the website and interactive prototype

ROLE
Product design · Interactive prototyping
SCOPE
Device & app experience · Website · Interactive prototype
34 / 43

MEMENTO / PERSONAL CONCEPT · INTERACTION PROTOTYPE

Keep the moment.Come back to the voice.

Press to capture. Save on the device. Return to the original audio and review in the app.

  1. Press to record

    Capture with an intentional press

  2. Save on device

    Keep the original audio on M-01

  3. Listen, then confirm

    Review in the app before acting

M-01 · Capture
Memento M-01 press-to-record concept device
App review · Enlarged detail
Source-audio player visual exploration: waveform, progress and playback
Memento app visual prototype: original audio, summary and suggested follow-up items
35 / 43

MEMENTO / WEBSITE

The product,made clear

I structured the website around product recognition, use contexts and sound, then implemented the frontend.

Identify the product

A device close-up and one clear claim establish what the product is.

Show use contexts

Four placement studies make the idea of a wearable recorder concrete.

Explore a visual identity

A soft, asymmetric sound field connects the visual identity to the recorder.

Memento website in English: a coral and ice-blue fluid sound field, silver recorder and product use

WAYS TO USE

Multiple wearing modes

Clip it to a collar, chest or bag strap, or place it on a desk

Collar
Chest
Strap
Desk

VISUAL EXPLORATION

Sound, made tangible

Website design and interactive prototype

36 / 43

MEMENTO / TRANSCRIPT SEARCH

A small clue. The voice returns.

看展随记原话节选
展厅里的灯光是慢慢亮起来的，有一层柔和的紫色。
原声片段 · 示例朗读
0:050:11

Search the transcript · Locate the audio

命中原文11 秒

匹配到「灯光」· 来自录音原文

定位到 00:05—00:16
37 / 43

PERSONAL CONCEPT / AGENT-NATIVE PHONE OS

2026

AOS

Agent Phone OS

AOS is an agent-native phone OS concept. I designed cross-app tasks, permission checks and handoffs, then built its website and interactive web prototype

ROLE
Product design · Frontend prototyping
SCOPE
System interactions · Cross-app tasks · Website & web prototype
38 / 43
AOS / AGENT PHONE OS
AOS

An agent-native phone OS

Give tasks to AOS
Keep the decisions

Eight daily-use scenarios share one set of components, covering messages, choices and tasks that continue beyond the current screen

18 UI states across eight scenarios, in 6 columns and three rows
39 / 43

AOS / PRODUCT COMPARISON · INTERACTION PROTOTYPE

Compare products across sources

Cloud armchairA

My current product page

Wood arc armchairB

Lin KeShared by Lin Ke in WeChat

04

AOS comparison

Footprint / cm

A · 82×80B · 70×74

B12 cm narrower

Fabric

A
B

Bouclé / Linen blend

Price

A¥2,680
B¥1,980

B¥700 less

Full comparison

Complete AOS product comparison device: navigation, both products, aligned facts, differences and save actions
40 / 43

AOS / MESSAGE TO CALENDAR · INTERACTION PROTOTYPE

From a message to an event you approve

Read one message. Find a free time. Ask before adding.

01Start with this message

Lin Ke’s selected WeChat message with the review location and tomorrow afternoon

02One-time access only

One-time access to this message only, with no chat history
14:00–15:00 is busy; choose another time before review

03Choose a free time

Native time choice:16:00 is free; using it opens review and does not add the event automatically

04You give the final approval

Complete A-1406 final review before adding: Product review,16:00–17:00, location, Work calendar, Edit time and Add event
41 / 43

AOS / TASK CONTINUITY · INTERACTION PROTOTYPE

Pick up where you left off

Keep completed work. Return to the same task. Retry only what remains.

Waiting for youNo automatic retry

01Completed work stays

A-1042 preserved trip constraints and round-trip route, with2/3 steps completed

02Return from the lock screen

Complete A-1042 lock screen notice: opening returns to the same task, without automatically retrying
Actual A-1042 decision before retry: stay availability timed out; keep route and constraints, then take over or retry the stay only

03You choose how to continue

Actual A-1042 decision before retry: stay availability timed out; keep route and constraints, then take over or retry the stay only
42 / 43

DORIS YEUNG / AI PRODUCTS & AGENT EXPERIENCE DESIGN

Clarify complex workflowsand take design through to launch

AI products · enterprise tools · design and frontend delivery

PHONE
+86 185 6676 0593
BASE
Shenzhen / Remote
43 / 43