ASUS ANDROID MOBILE SETTINGS
Data Visualization in Mobile Phone: Battery & Mobile manager
2020 • ASUS UI/UX Designer • User Research / UX / UI / Prototyping
Intro
With Battery and Mobile Manager, users can easily control power consumption, release more memory, manage apps and data, clean unused apps, manage app permissions, scan privacy issues and optimize the system's overall performance.
It is easier for users to understand the complex system settings of their phone with data visualization. It can help make data more consumable and help users make decisions.
01. Introduction
The Problem: “How can we make resulting visual easy to compare data and use it to help users tracking and understand the performance of their phone?”
🏢 Project Background
ROG Phone series is known for amazing battery and is designed specifically for mobile gaming. ROG Phone 5(2021 March) has the longest battery life of any Android phone. In order to optimize user experience and enhance settings, we provide numerous controls for charging and performance that maximize battery life and lifespan.
🎯 Goal & Challenge
Communicate dense and complex information in graphical form in mobile view.
02. Process
We have data, users have questions, and they need an analytics that will help them make sense of their data and turn it into useful insights, while reducing uncertainty. What's next?
Define: We need to understand How What and Why of the product?
Why the users click this?
Where they can find detailed info?
How the new user and experienced one will interact with the UI?
Which identifier used for particular information, and also the look and feel of the product?
Design
A. Usage of forms depending on two things: the data we want to communicate, and what we want to convey about that data. (Google)
Change over time charts: Show data over a period of time, such as trends or comparisons across multiple categories.
Category comparison charts: Compare data between multiple distinct categories.
B. Turn insights from User Research and Firebase(Backend platform) wireframes and prototypes
The commonly used functions: X Mode is a special mode dedicated to gaming. When X Mode is turned on, it improves hardware efficiency and remove background apps to release memory, in order to optimize gaming experience.
The data and information that would influenced users making decisions: Apps consume the most data or storage
Test
User Testing: Our research process includes many direct and indirect partnerships with our users, including ASUS User Insight & Analysis Section to learn about their flow and how they want to use the data. All of this hands-on research helps ensure that we design meaningful experiences, with embedded support and guidance to help users succeed.
03. Key Design Outcomes
I. Battery charging
Line chart
Why line chart: To show trend data, or the comparison of data sets. I used it to show how battery charging status change over time.
Color: The most important that can help to ease everything is the colors, like red, yellow and green, which can be used anywhere over the number, text, graph etc to represent its conditions. The colors are also commonly used in the system to show mobile phone status. In order to maintain the system consistency, there is also a limitation of what colors I can use for the design. It is challenging to decide and think about whether to add more color options.
Swiping to see more information: I need to consider how users view the data due to the constrains of mobile phones and adjust the content accordingly. To avoid long scrolling, users are indicated to swipe to view the graphical representation of data.
How deep do we need to show? Different from business usage, our target users tend to get quick understanding of the data to make decision. Data visualization help them track their usage and understand the difference of various settings
II. System modes in ROG Armoury Crate (Gaming Center)
Radar chart
Why radar chart: To express larger variations in data, how individual data points relate to a whole, comparisons, and ranking. Like pie chart, it expresses portions of a whole, using arcs or angles within a circle. It's also commonly used in games and sports to chart strengths and weaknesses. We used it to represent system modes for different scenario as a gaming strategy.
Comparing data: Our users are looking for a tool that not only presents a static view, but one that also enables them to interact with that data in real time. Offering data visualizations that are flexible and change with the user’s thought process allows for true exploration.
05. Conclusion
Designing data visualization is not just about the visuals, but why those visuals matter in the data analysis process and how they can be of actual use for the user. Though now I only create a few of graphical representations of data into our functions. But I think it is a good start to work on designing a guided experience that helps users get to their answers and hope to apply it to more functions in mobile phones, like wallpaper, gallery, clocks, etc.
NOTE
Please contact me at cindyw1211@gmail.com if you are interested in more details of the project.