ASUS ROG/ZenFone Design System

Helped a team of 10+ designers work 2X faster with developing teams

2020 • ASUS UI/UX Designer • UI / Prototyping / Design Guidelines

ASUS Design System Cover

Summary

The Design System is what all delivery teams could refer to and maintain Design Consistency across our mobile phones and platforms. It’s allowed designers to design faster, and it’s become a single source of truth for delivery teams. We’re continuing to gain more awareness in the organization and gaining resources to maintain the design system.

My Role

The project was about 6 months. During the process, I defined the visual direction of our digital products based on our Brand Guidelines, spearheaded the planning and Design System project progress tracking, and guided a team of 10 designers to complete producing reusable components and component document.

Problem and Frustration.png

01. Introduction

The Problem: Lack of alignment led to low productivity.
“When a team of 10+ designers work in a fast phased environment, with more than 100 in-house or outsource developers, consistency is a big issue.

😫 Current State

Before I joined the team, the design guideline was created with PDF. Whenever the design changed or new functions were developed, designers had to refer to the document and search for the exact discipline page by page. It caused the problem of low efficiency and poor version control.

Another challenge was with the bulky and outdated document, a small change might make huge impact, e.g., all designers needed to modify their design files and update with engineering team.

Seven-generation ZenFone series and third-generation ROG series was launched, but ancient elements were still used from the previous lineup. It is important to be aware of the upcoming design trends and android updates and keep everything up-to-date.

🏢 Project Background

Increase the consistency of using design components and build a reference source which delivery teams could all refer to.

Work Flow 1.png

02. Process

Insight.png
Discover.png
ASUS Res Prototype.gif

  • Usability exploration

    1. User testing: We conducted internal testing with our members through current phones, and collected feedbacks and datas. We discovered and define current design, including the frequently misused elements or the components that were not consistent. Based on the spreadsheet, designers were assigned to produce the reusable components on Sketch library and Zeplin.

    2. We also captured insights from internal products and external competitors to maintain consistency and adhere to standards.

  • Prototype
    We partnered with the engineering team to develop an APK called ASUS Res for the design library to effectively put design iterations and user testings in practice. Engineering team also use it as a reference for developing.

Old and New Document.png

03. Key Design Outcomes

ROG & ZenFone Difference.png

I. Different phone series and markets

Dark Mode & Light Mode.png

II. Support Light Mode and Dark Mode

Illustration & Image.png

Ⅲ. Delightful Illustration & Micro-Interactions

Elements.png

IV. Organized elements and components

Feedbacks.png

04. CONCLUSION

The design system imperative to protect a brand, elevate the end-user experience, align teams and increase the speed of the product development. It offers us a common language to communicate and definitely increase the efficiency of cooperation as our products evolve.