UI/UX INTERNSHIP · OPPO
ColorOS 17
Core UI Design
COMPANY
oppo/ColorOS
DURATION
Sep 2025 - Jan 2026
TEAM
Common Components
ROLE
UI/UX Designer
01 OVERVIEW
A NEW SYSTEM DESIGN LANGUAGE
Embedded in OPPO's ColorOS 17 Common Components team, I helped define and ship a translucent, light - driven design language across foundational system components — shaping the visual and interaction foundation for the next major OS release.
Embedded in OPPO's ColorOS 17 Common Components team, I helped define and ship a translucent, light - driven design language across foundational system components — shaping the visual and interaction foundation for the next major OS release.
THE CHALLENGE
ColorOS 17 demanded a new visual paradigm: semi-transparent materials with depth, light physics, and layered elevation — all implementable at OS-level fidelity without sacrificing performance.
MY CONTRIBUTION
From early material exploration through to engineering spec handoff, I owned key components of the system — building frameworks, defining rules, and calibrating rendered builds to achieve pixel-accurate results.
SCOPE
Navigation bars, tab bars, dialogs, title bars, quick actions, system elevation — the full stack of ColorOS 17 core common components.
02 ROLE & RESPONSIBILITIES
WHAT I OWNED
01
01
Visual Direction & Material Studies
Visual Direction & Material Studies
Early explorations into material behavior and light physics — studying how light-edge strokes, caustic-like bottom highlights, and diffused glow could define a coherent translucent language for the OS.
Early explorations into material behavior and light physics — studying how light-edge strokes, caustic-like bottom highlights, and diffused glow could define a coherent translucent language for the OS.
MATERIAL DESIGN
MATERIAL DESIGN
EXPLORATION
EXPLORATION
VISUAL DIRECTION
VISUAL DIRECTION
02
02
5-level shadow hierarchy system.
5-level shadow hierarchy system.
Defined and documented a structured 5-tier elevation and shadow system for semi-transparent UI — establishing consistent opacity, blur, stroke, and glow values per tier, enabling systematic application across all components.
Defined and documented a structured 5-tier elevation and shadow system for semi-transparent UI — establishing consistent opacity, blur, stroke, and glow values per tier, enabling systematic application across all components.
SYSTEMS DESIGN
SYSTEMS DESIGN
ELEVATION
ELEVATION
SHADOW
SHADOW
03
03
Interaction Design & Quick Actions
Interaction Design & Quick Actions
Redesigned interaction paradigms aligned with the new translucent paradigm — including press-and-hold Quick Action behaviors and comprehensive placement and reachability rules across device form factors.
Redesigned interaction paradigms aligned with the new translucent paradigm — including press-and-hold Quick Action behaviors and comprehensive placement and reachability rules across device form factors.
INTERACTION DESIGN
INTERACTION DESIGN
QUICK ACTIONS
QUICK ACTIONS
REACHABILITY
REACHABILITY
04
04
Engineering Collaboration & Build QA
Engineering Collaboration & Build QA
Partnered with engineers to translate complex rendering effects (light-edge strokes, diffused glow, blur layers, caustic-like bottom light) into precise implementable specs. Calibrated production builds to achieve high-fidelity matches to design intent.
Partnered with engineers to translate complex rendering effects (light-edge strokes, diffused glow, blur layers, caustic-like bottom light) into precise implementable specs. Calibrated production builds to achieve high-fidelity matches to design intent.
COLLABORATION
COLLABORATION
RENDERING EFFECTS
RENDERING EFFECTS
SPEC HANDOFF
SPEC HANDOFF
02 KEY DELIVERABLES
WHAT SHIPPED
01
System Design Language Doc
A full written + visual specification covering the translucent material grammar — light-edge stroke values, diffused glow parameters, blur radii, and caustic bottom light rules — ready for OS-wide adoption by other component teams.
02
Elevation Token Library
A structured Figma token set encoding all 5 elevation tiers: named shadow styles, opacity values, blur radii, and stroke weights — directly consumable by designers and referenced in engineering handoff.
03
Annotated Component Specs
Fully annotated Figma files for navigation bars, tab bars, system dialogs, and title bars — covering all states, edge cases, and rendering parameters needed for engineering implementation.
04
Quick Actions Guideline
A standalone interaction guideline doc covering trigger thresholds, animation curves, haptic timing, placement grids, and reachability zones — applicable across all ColorOS 17 device form factors.
05
Render Calibration Reports
Side-by-side design-vs-build comparison reports used across multiple QA rounds — documenting delta values and approved calibration targets for light effects implemented in production.
02 KEY DELIVERABLES
WHAT SHIPPED
01
System Design Language Doc
A full written + visual specification covering the translucent material grammar — light-edge stroke values, diffused glow parameters, blur radii, and caustic bottom light rules — ready for OS-wide adoption by other component teams.
02
Elevation Token Library
A structured Figma token set encoding all 5 elevation tiers: named shadow styles, opacity values, blur radii, and stroke weights — directly consumable by designers and referenced in engineering handoff.
03
Annotated Component Specs
Fully annotated Figma files for navigation bars, tab bars, system dialogs, and title bars — covering all states, edge cases, and rendering parameters needed for engineering implementation.
04
Quick Actions Guideline
A standalone interaction guideline doc covering trigger thresholds, animation curves, haptic timing, placement grids, and reachability zones — applicable across all ColorOS 17 device form factors.
05
Render Calibration Reports
Side-by-side design-vs-build comparison reports used across multiple QA rounds — documenting delta values and approved calibration targets for light effects implemented in production.