ROG Vision

Second Display Panel of ROG 5 Phone

2021 • ASUS UI/UX Designer • UX / UI / Prototyping

Banner.png

Intro

ROG Vision is a pioneering rear matrix display that's never been seen on any phone until now and features with a series of different animations that gamers can use to turn ROG Phone 5 in to a truly unique phone. It also supports a creative editor for customizing animations to show off the style.



My Role

I worked as a Lead Designer from scoping product structure and specification to final launching.
The function was launched in March 2021 and became a sensation after its release, receiving acclaim worldwide.

What I Did

  1. Used business requirements and market research to assist in developing use cases, high-level requirements

  2. Designed the UI architecture, interface, and interaction flow and developed wireframes, visual mockups, and prototypes

  3. Presented design work to the user experience team, product team, and executives for review and feedback

  4. Led creative direction and managed outsourcing visual plans

Introduction.png

01. Introduction

The Challenge: “How can we increase the awareness of ROG phone series and brand loyalty?"

💡 My Approach

  • Gain alignments on goals and purposes with teams and stakeholders at early stage

  • Think big and work the small details with attention and care

  • Collect and analyze feedbacks on a regular basis— always question is the product fulfilling its promise to users

😫 Current State

Today, when the gaming phone moved to the maturity stage, "brand loyalty and user engagement" became the priority of our product plan.

Workshop_3.png
Test.png

02. Process

The product developing can be divided into 3 stages, first stage- Make it work, second stage- Make it work well, last stage- Make the team work well, together!

  1. The early stage: I brought the idea of design sprint for creating this brand new feature and adjusted it in order to fit our developing process. I also ran design exercise, like crazy eights for quick divergent thinking as part of it. It can be divided into five main points to help the team validate ideas and solve big challenges:

    • Understand- Map out the problem and pick an important area to focus.

    • Ideate- Sketch out competing solutions on paper.

    • Decide- Make decisions and turn ideas into a testable hypothesis.

    • Prototype- Hack together a realistic prototype.

    • Test- Get feedback from internal users.

  2. The second stage: The product development started the moment when we had solid product structure and goal. The process comprised 6 distinct phases, empathize, define, ideate, prototype, test, and implement, each phase was meant to be iterative and cyclical.

  3. The last stage: Once the product has “survived” the initial launch and early improvements stages, it is necessary to understand how the product holds up in the real world and establish team norms to help support long-term, sustainable productivity.

User Research.png

03. RESEARCH

Qualitative Research

I worked with User Researchers to deeply understand people who currently and who might use the product so the team can make decisions that benefit both users and the business. During the interview sessions, we set up goals, target users, timeline, and questionnaires to get insights before we dig into the whole ROG 5 mobile phone.

Possibilities

“How might we attract users through creating strong interests, powerful stories and delightful design style? “
After multiple rounds of interviews, we achieved better insight into new functions, which included ROG Vision, an upgraded back panel inspired by Aura light with G14 customized style from the famous ROG laptop series.

Design Direction.png

04. DESIGN DIRECTION

With the support from ASUS Design Center, we use 2021-2022 Design Trend Report which was released after six months of trend research as a source to define ROG 5 product direction and to design visually pleasing and effective digital products.

05. Key Design Outcomes

Main Page.png
Mainpage.gif
Mode.gif

I. A variety of animation schemes

Features

  • Various pre-configured animations for each of six different system events
    ROG Phone 5 constantly monitors events and plays the chosen animation, so everyone knows when a gamer is calling, chilling, or winning!

Editor.png

II. Intuitive Editor to support novice users

Features

  • Quick and easy access to key features
    In order to simplify the interface, I made the most important and most frequently used functions quick and easy for users to access.

  • Working with familiar frameworks
    To simplify the learning process for novice users, I worked with familiar frameworks. One of the ways I did this was by introducing an “artboard” panel to help users easily locate essential editing tools including filters, fonts and details. These features were previously collapsed and spread throughout the gallery app on our current products causing users to feel unsure which categories to go to find the tools they needed.

  • Making previewing easier
    Through our testing and research, we uncovered that the primary behavior is previewing animations. Thus, it was important that we made it as easy as possible for users to preview their animations once they’re done editing.

06. Conclusion

It was a challenging yet fun project. Not only I have to structure design direction from the ground in a short time(half year) but I need to solve the situation- the team and the supplier involve the hardware panel in product development for the first time ever. During the process I learned the importance of how to communicate and coordinate with other teams and working together for hardware testing and system operation. Under a limited condition, I came up desirable solution, made the product feasible, and arranged functions according to priority in the roadmap. My goal is to ensure that it is viable in the future.

NOTE
Please contact me at cindyw1211@gmail.com if you are interested in more details of the project.