Blossom Wallpaper
Background
Following the success of WellPaper within the Android community, I was entrusted with the opportunity to craft a new, data-driven dynamic wallpaper for OPPO, set to become one of the default wallpapers on ColorOS 13.
Collaborating closely with our partners at onformative and the OPPO software engineering teams, my objective was to elevate both the aesthetics and functionality of WellPaper in this project, while maintaining my commitment to respecting our users’ desire to understand and manage their digital habits.
Concept: a Data-driven, Personalized Dynamic Wallpaper
Blossom Wallpaper embodies a sophisticated leaf motif with a glassy finish, symbolizing daily screen time through the graceful growth of leaves from bud to a pair of twisted forms.
The wallpaper adopts a daily screen time limit, defaulting to 3 hours - just below the average OPPO user's screen time. This encourages users to view it as an attainable goal rather than a strict constraint, and they can modify this limit to suit their preferences.
Every day, leaves reset to bud status, mirroring the system’s screen time counter reset. As users approach their daily limit, leaf growth gradually slows, eventually ceasing altogether when the limit is reached. Beyond this point, the once-organic plant transforms into an inorganic, metallic structure, maintaining aesthetic appeal while gently urging users to take a break from their screens.
Blossom Wallpaper goes a step further by visualizing the app that consumed the most screen time in the past hour. Leaf colors align with the dominant app's icon, ensuring an ever-changing appearance. The combination of form and color transformations creates a distinctive, insightful wallpaper that subtly reminds users of their smartphone habits.
Case Study 1: Achieving Visual Harmony in a System Wallpaper
The Challenge
Designing a system-native wallpaper comes with its own set of unique challenges. It needs to represent ColorOS 13’s Aquamorphic Design Language while also having a global appeal, complementing the look and feel of other system wallpapers. Moreover, it should be functional: narrating a data story and gently serving as a screen time reminder without imparting negativity.
Design Journey
To rise to this challenge, the team conducted extensive visual explorations focused on key Aquamorphic Design terms like “Elegant,” “Transformative,” “Vibrant,” and “Fluid.” Leading the team through rounds of iterations and discussions, I landed on a leaf motif. Besides having the right amount of abstraction and being universally appealing, this design also perfectly embodied a leaf’s cycle of growth and decay, mirroring the two phases of a user’s screen time - accumulation and limit exceedance.
The Execution
I collaborated with onformative to produce a 6-second video optimized for both standard 60 FPS and high-refresh-rate 120 FPS screens. The wallpaper intelligently assesses how close users are to their preset screen time limit and updates the leaf growth in real-time. Once the daily limit is reached, the fully-grown leaves stay on the display for an extra 15 minutes, allowing for a moment of appreciation and reflection.
Case Study 2: Pursuing Space Efficiency and Universal Display Compatibility
The Challenge
Native OS features like Blossom Wallpaper face stricter storage and RAM constraints than standalone apps from the Play Store. While a typical .mp4 video-based wallpaper consumes 10-20MB of storage, Blossom Wallpaper's dual-stage design and color-shifting features could multiply this need. Considering a diverse range of OPPO and OnePlus devices, from flagship to mid-range models, two primary challenges emerged:
Simplify the dynamic dispatch logic to conserve RAM and storage.
Ensure flawless wallpaper display across all devices, minimizing distortion, flicker, noise, or ripples.
The Solution
I developed a procedure for the adaptive color transformation. It dissects an app's icon to identify its most prominent color, breaking it down into [H, S, B] values. Saturation [S] is evaluated first to identify monochromatic color mapping, and then hue [H] is employed to map the prominent color to one of 12 predefined colors. However, storing 12 different videos for these colors wasn't viable due to storage constraints.
Instead, the team utilized LUT masks, altering the color of a single neutral base video through codes in real-time. While this solved the space issue, it introduced new challenges—HEVC .mp4 video compression, when combined with LUT color shifting, led to quality degradation. Leaves colored in red, orange, and purple suffered from noise and background distortion.
The breakthrough came after extensive experimentations. I devised a 'sandwich structure' for the wallpaper, consisting of three layers: the top layer using LUT masks, a middle layer with two base videos, each supporting 6 colors, and two static backgrounds similar to a green screen. This innovative solution resolved the display quality issues while keeping the wallpaper package size under 40M, 83% smaller than a traditional video solution.
Recognition
The Blossom Wallpaper was featured on the ColorOS 13 global launch event and its promotional videos. Excitingly, it's set to continue its journey into ColorOS 14, catering to OPPO and OnePlus users' digital well-being needs in an innovative and aesthetically appealing way.