Back Portfolio
Sinespace desktop concept
Sinespace multi-device concept

UI/UX Case Study

From Screen to Experience: Building a scenario-first immersive design system for Sinewave

Lead UX designer, responsible for the PC redesign and the app experience from 0 to 1.

Sinespace by Sine Wave is a cross-platform virtual social world that supports VR and PC. Users can create content, trade virtual goods, and socialize with others through avatars.

To strengthen the brand's immersive identity, I rebuilt the information architecture, simplified critical flows, and unified the interaction language to connect the desktop and app experience into one cohesive product system.

UI/UX YUHAN MAO

Design Goals

This project rebuilt the information structure, simplified the core flow, and established a unified design language to create an immersive and efficient cross-platform experience.

  • Consistency: establish one coherent interaction language across desktop and mobile.
  • Scenario-driven structure: organize content and functions around use cases rather than product parameters.
  • Brand expression: convey Sinewave's immersive and premium tone through a clean professional interface.

Problem Analysis

Outfit flow is cumbersome

The task path was too long and caused user drop-off.

A single avatar edit required jumping across multiple tabs and hidden steps, making first-time setup and outfit customization costly to learn.

Left-right work zones are fragmented

Information architecture confusion reduced exploration efficiency.

Core work areas such as editing and shopping were split across both sides of the interface, so users had to repeatedly scan the screen and switch focus.

Some item buttons are duplicated

Inconsistent controls weakened the product's professional feel.

Buttons, icons, and panel treatments lacked visual consistency, which increased uncertainty and interrupted the immersive feeling of the product.

Original interface analysis
Original interface

User Research And Insight

Through large-scale audience segmentation, I identified three core creator profiles with the highest strategic value and used them to define the redesign priorities.

Social creator persona

Social Creators | High-value core users

29.7M users

Mature users aged 25-44 who care deeply about creation and trade, and rely on online interaction as a primary social activity.

Core need: support the full loop of creating, showcasing, and monetizing identity-driven virtual goods.

Product ecosystem builders persona

Product Ecosystem Builders

22.79M users

Mid-core players with entrepreneurial drive, strong social adaptability, and a broad interest in tools, accessories, weapons, and outfits.

Core need: a platform that supports complex UGC workflows and efficient transactions for diverse virtual goods.

Stylish social singles persona

Stylish Social Singles

30.29M users

The youngest group, active in online social interaction, highly sensitive to visual style, and especially interested in identity expression through avatars.

Core need: present personal style through silhouettes, accessories, and spatial identity to strengthen social recognition.

Summary

The research confirmed that creator-led segments account for a smaller share of users but a much larger share of potential value. The redesign therefore prioritizes creation, trade, and rich self-expression while keeping the interface approachable for younger social users.

Design Strategy

I restructured the avatar editing experience around three clear usage scenarios to make exploration faster, customization deeper, and the creator workflow more focused.

  1. Quick switch mode for stylish social users and general users.
  2. Advanced customization mode for social creators and game creators.
  3. Professional workbench mode for core creators.
Design strategy interface

Solution Plan

Plan 1 Fixed Functional Editing Zone

By anchoring the key editing workspace, the design removes left-right confusion, lowers cognitive load, and helps users focus on creation.

Plan 2 Dual-mode Editing For Different Depths

A simplified mode supports fast changes for social display, while an advanced mode preserves fine controls for creators with professional needs.

Plan 3 Integrated Workflow With Better Immersion

The end-to-end flow connects identity setup, styling, and trading so users stay immersed instead of feeling like they are moving between disconnected tools.

Plan 4 Expand Creative Dimensions And Empower The Creator Ecosystem

New advanced features such as avatar face sculpting, makeup changes, and body proportion editing establish a complete professional avatar creation scenario. This directly serves the core need for high-freedom creation from social creators and game creators, and lays the groundwork for the virtual goods economy.

Project Phases

Pre-design Research

Page analysis Competitor analysis

User Experience

User analysis User personas Legacy interface pain points User interviews User testing and behavior analysis

Design Framework

Build the product information architecture Define the product's visual direction Build the design component library

Design And Interaction Delivery

Produce high-fidelity designs Create interaction and transition details Developer handoff Design QA

Information Architecture

Information architecture diagram

Final Interface Showcase