01HOME↗
08Social
SOCIAL / COMMERCESUUVO — A social experience with momentum
A visual direction for a social product spanning home, following, live shopping and chat while keeping the experience editorial and focused.
PRODUCT / EXPERIENCESELECTED CASE STUDY
01Approved product mockup / presentation visualScroll to explore ↓
INTERFACE STUDY
SUUVO interface system
The approved editorial direction is shown through the real Home, Following and Live Shop states at phone-safe proportions.
02FOLLOWING↗
03LIVE SHOP↗
THE CONTEXT
Start with the why.
The supplied SUUVO material covers four core moments: Home, Following, Live Shop and Chat. The visual direction uses a dark editorial surface, restrained labels, soft glow and focused content presentation.
01 / DISCOVERY
What the experience revealed.
Before shaping the interface, the work is framed around the user's mental model, moments of friction and the opportunities that can change the journey.
KEY OBSERVATIONS
01
Content needs to remain the visual hero.
02
Mode changes should feel distinct without looking like separate products.
03
Live and chat states need stronger interaction affordances than passive feed content.
PAIN POINTS
×
Competing content priorities
×
Mode switching can feel abrupt
×
OPPORTUNITIESCommerce and conversation can overwhelm the content layer
↗
Use editorial hierarchy to control attention
↗
Create a shared visual language across modes
↗
Give live and chat actions clear but restrained prominence
02 / INFORMATION ARCHITECTURE
Structure before surface.
The interface follows a clear information hierarchy so visual polish supports the product model rather than hiding it.
01Home→
02Following→
03Live Shop→
04Chat→
05Profile / detail
THE PROBLEM
Social and commerce experiences can become visually noisy when feeds, live content, shopping actions and conversation all compete for attention.
DESIGN HYPOTHESIS
If each mode has a clear visual role while sharing one underlying design language, users can move between discovery, live commerce and conversation without losing context.
WHO IT SERVESUsers discovering social content, following people or topics, joining live shopping moments and continuing conversations.
03 / USER JOURNEYFrom first intent
From first intent
to useful outcome.
The journey is intentionally expressed as a sequence of decisions, not a list of screens. This keeps the case study about behavior and product thinking.
01Discover contententry
02Choose a deeper contextdecision
03Join live or open a conversationdecision
04Interact or shopdecision
05Return to the broader feedoutcome
04 / PROCESS
How the work moved forward.
01
01 — Define modes
Separate the product into the moments that need different interaction intensity while keeping the visual system shared.
Mode mapContent hierarchyNavigation model
02
02 — Focus
Build an editorial rhythm that lets the primary content dominate while secondary actions remain discoverable.
Feed structureType scaleAction hierarchy
03
03 — Connect
Design live and chat as natural extensions of the content experience instead of isolated utilities.
Live patternsChat statesTransition logic
04
04 — Polish
Use dark surfaces, soft glow and restrained labels to create a premium, immersive visual layer.
Visual languageMotion directionInteraction polish
05 / DESIGN DECISIONS
Small choices create the experience.
These are the decisions that make the final interface feel coherent rather than merely polished.
01
Let content carry the visual weight.
02
Keep labels restrained and consistent.
03
Use glow and motion as orientation cues rather than decoration.
04
Preserve context when moving from feed to live or chat.
06 / UI SYSTEM
A visual language that scales.
Instead of designing each screen independently, repeated behavior becomes a system. That gives future screens the same rhythm and makes implementation more predictable.
COMPONENTS
01Content cards↗
02Live states↗
03Chat states↗
04Navigation patterns↗
05Editorial labels↗
Designed around the decision.
07 / OUTCOME
A visual and interaction direction that gives a multi-mode social product a stronger sense of identity while keeping the experience readable.
Narrative is based on the supplied SUUVO screens and approved visual direction; no product-performance metrics are claimed.