OnePlus 8T Data Wallpaper Case Study
Overview
- This wallpaper is created for the OnePlus 8T with the OxygenOS 11’s launch. It’s an interactable live wallpaper; the wallpaper will change according to users’ usage data and behavior.
- The most challenging part is figuring out a good connection between the data meaning, wallpaper artwork, and the story we want to tell.
- Time means a lot to people; applying sunlight color on the glass lenses looks very beautiful, and their connections are strong. We care about digital wellbeing, show the sunlight color when users wake up the device makes it noticeable, and it also tells a good story of how time is slipping by silently. Plus, we let the lenses spinning according to the swipe direct and the speed to make the wallpaper also playable and joyful.
- This wallpaper turned out to be the most successful data wallpaper in OnePlus, having good reviews on media, getting a good score from our users (4.2 out of 5), inspiring several hero features of OxygenOS 11; we also applied a patent for the algorithm behind.
- In this project, base on the predefined visual approach, I explored the data to connect with and the story to tell, Work with the design studio — Onformative on the interaction creation, and follow up with our in-house developer on the implementation detail.
The birth of the concept
Starting from the OnePlus 8, We explored a new wallpaper approach; the live wallpaper will animate base on the data change. OnePlus 8’s data wallpaper is not as successful as expected. Most users only find it beautiful but didn’t realize the color tone may be slightly different base on the current temperature and the weather condition. So the key guidance that was given when I started working on the data wallpaper for the OnePlus 8T is Recognizable and Meaningful.
Exploration — I first started exploring what data on the device we have that the wallpaper can connect with. There are have meaningful data like Weather, Step counts, App usage time, etc. There is also raw data like how long users scroll on the touch panel, how many times users click a hardware button, etc. The first challenge I faced was how to connect a data change to the abstract artwork.
Fails — I tried to make the interaction connection straightforward. Step counts are related to the speed, so the more steps users walked today, the faster the lens on the wallpaper will spin. The usage of the apps is reflecting how lively users’ life is. The more apps are used, the more lenses will be added to harmony with the colorful lifestyle. My proposals got an amount of “No” even I felt I had tried all kinds of data I can ever imagine. When Step counts connect to the Lens spinning, how can users know how many steps they have walked today? Connecting app usage to the number of lenses to encourage users to use apps more seems not to be politically correct for digital wellbeing. I was new to the company; I have to admit I am frustrated.
Breakthrough — I didn’t stop discussing with people. With rounds of discussion, we narrowed it down to a simple connection that the colors of the lenses will change according to the daylight color tone of the day. The link is straightforward, and the visual is beautiful. However, the color changes may not be very recognizable. One day I caught up with a saying that can we show the change right in front of the users in another discussion. I felt I found the missing piece. The lenses’ color will not be shown in the current daylight color tone directly. It will animate the color change in front of the users when users unlock the device, so it’s recognizable. Furthermore, we make the color animation starts from the color that users last unlocked the device, it then tells a good story that the animation can remind users of how the time is slipping by silently.
Make it even better — And we took the lenses spinning concept to connect with users swiping interaction to make the wallpaper playable. The group of lenses on top will rotate counter-clockwise, with the bottom group will rotate clockwise when users swipe right on the desktop, vice versa.
Execution
Now that the wallpaper interaction is more than Recognizable and Meaningful, it’s also Playful. We need to build up the wallpaper in OpenGL to make it interactable in real-time with Onformative.
Deal with the agreement — Our initial agreement with Onformative is to connect the wallpaper to one data set. But I feel to add both the time (daylight color) and the swipe interaction will increase the product’s success more than double. I pitched them with the story we want to present, and we all have experienced the struggling period of making a good story. We decided to make it happen together!
Thanks to the beauty of making artworks in code, we defined the color of three keyframes for Dawn, Noon, and Evening. Then the color of other frames at any time of the day can be made by the interpolation method.
Make the movement more organic — We added a pattern of the coefficient of friction to make the stop of the spinning feel more organic. To make the connection of the color change and the time flying more recognizable, we make the level of the color change in an exponential relation with the period between two unlock events.
We also connected the wallpaper to the weather data to work in different areas, whether the daylight of the area is long or short.
Looking back…
- Starts from a story-telling aspect may not bring you the answer directly, but it can make sure you’re in the correct product direction when you come out with an idea.
- We seem to fail a lot when exploring, but the fail explorations end up being the seed of success. Moreover, those explorations also inspired the projects we created later, ex. Insight AOD.
