Rejuvenating OPPO ColorOS card visual system
In anticipation of the imminent launch of Android 14.0, OPPO has approached frog Design to collaborate on refining its card visual system (widgets) for the co-launch of its operating system; ColorOS 14.
OPPO aims to build upon the success of their distinctive ‘Aquamorphic’ design in ColourOS 13, with a renewed focus on embodying the essence of fluidity.
ROLE
Visual & Interaction Designer
CLIENT
OPPO
TIMELINE
Apr - Jun 2023
CHALLENGES
How might we push the boundaries to elevate OPPO’s distinctive ‘Aquamorphic’ design to deliver a cohesive, refreshed card visual system (widgets)?
OBJECTIVES
To develop a comprehensive card visual system, consisting of 32 widget sets (across 4 different sizes, in both light and dark themes) and a card visual system logo. This system aims to create a consistent and intuitive user experience, all aligned with the ‘Aquarmorphism’ design theme, within a eight-week timeline.
APPROACH
→ Research
To gain a valid and reliable understanding of what ‘Aquamorphic’ design entails, the team undertook the following activities
Conducted a kick-off meeting with the OPPO design team to explore the creative direction behind ColorOS 14 - ‘Aquamorphism 2.0’
Requested OPPO design team to provide several OPPO phones featuring the latest operating system version from China (The latest OS version is unavailable in Singapore)
Performed competitor analysis at several local telco stores
Conducted a thorough evaluation of the existing card visual system
With a deeper understanding of the latest operating system experience and insights from our competitor analysis, the design team proceeded to conceptualise and explore potential design directions. Our focus was on revitalising the theme of ‘Aquamorphism’ by infusing the symbolic values and qualities of water into our design, ultimately creating meaningful and intuitive interactions for users.
Research Snippets
→ Hiccups
Like any project, the design process wasn’t always smooth sailing. There were moments of miscommunication and misalignment in expectation with regards to the overral visual direction and concept, which required the team to put in the extra hours and reassess our approach. After several clarification sessions with the OPPO design team and further exploration, the client agreed to the revised concept, and we were finally back on track.
Proposed Concepts
Design Exploration
→ Design Concept
Tapping on the versatility and revitalising quality of water, ‘Aquamorphism 2.0’ aims to breathe new life into the user experience by blurring the boundaries between the physical and digital worlds. To achieve this, we are focusing on three key areas:
Design Concept
Renew: Colour Palette
Infusing life into colours, inspired by the natural world around us
Refresh: Personalised Widgets
Redesigned cards that reflects users’ personalities, preferences, and priorities
Rejuvenate: Micro-Interactions
Water-inspired transitions and interactions that bring dynamic energy to otherwise static displays
OUTCOMES
frog Design successfully delivered a cohesive card visual system for OPPO, featuring 32 widget sets available in four different sizes. This comprehensive system is designed to adapt seamlessly to both light and dark mobile themes, intelligently adjusting to the user’s phone status, time, and on-screen content.
Of these 32 sets, 18 were selected for animation, transforming static widgets into dynamic elements that capture the vitality and fluidity of the ‘Aquamorphism’ concept. This brings a more immersive and engaging experience to the user interface in ColorOS 14.
→ Renew, Refresh, Rejuvenate
→ Be Revitalised
In pursuit to establish a cohesive card visual system for OPPO, the team designed a card system logo that not only embodies the symbolic values and qualities of water but also offers the versatility to be seamlessly applied across third-party apps. This ensures its alignment with OPPO’s Pantanal ecosystem.
Card System Logo
REFLECTION
Collaborating with OPPO's China-based design team was a rewarding opportunity that not only provided valuable insights but also helped me enhance my Mandarin business communication skills.
Cultural differences can often lead to miscommunication within global teams. It’s essential to promptly clarify any uncertainties to ensure alignment and meet expectations effectively.
Designing an impactful widget is a complex task that requires a deep understanding of the application's functionality to create a strategic, concise, and intuitive design.
I developed a newfound appreciation for the meticulous effort and thoughtful design that goes into crafting the widgets we use daily.
Like what you see? Let's create something remarkable together.