top of page
ASUS Linux
 

Introduction

The company's laptops currently require purchasing and installing OS systems from other vendors before shipment. ASUS attempts to develop and research its own Linux system to save costs in the future. In this project, I planned Asus's Linux system from scratch, including defining information architecture, proposing design styles, designing related Apps, integrating ASUS software services, and so on.

Project Brief

​

Project Duration

Project Type

Contributor

My Contribution

Sep. 2021- Dec. 2021

UI/UX Design

Information Architecture

BIOS RD

User Flow

Design Director

UI Mockup

Ren Huang

Interactive prototype

Designer

Hsiao-Han Chou

Project Background
What is Linux?

Linux is a free and open-source operating system (OS). One of the key features of Linux is its open-source nature, which means that the source code is available for anyone to view, modify, and distribute. This has led to a large community of developers and users who contribute to the development and improvement of the operating system. 

Design Goal

  • Deliver ASUS Linux system with clear and consistent information architecture.

  • Align with the MyASUS design style.

  • Develop and integrate related Apps: customization, MyASUS, etc.

 
Design Process
Project Scope
Design Infographics
Roadmap

Phase I. Replace GNOME look'n feel in ASUS Style 
Exchange GNOME UI skin in ASUS style


Phase II. Create new App in ASUS UX pattern
Implement new ASUS App in GNOME with ASUS style


Phase III. ASUS system in Linux base
Clear and consist the system app and settings UI in ASUS Linux


Phase IV. ASUS Linux UI system complete
Follow UI/UX design guideline for further new apps implement

Information Architecture
Design Research of Current System
GNOME Home/Desktop/Launcher design
GNOME UI System

Based on GNOME (GNU Network Object Model Environment), one of the most famous desktop environments for Linux, we began the research by listing all GNOME system user interfaces and figuring out all structure inconsistencies.

​

The common component library could also be organized from the process, such as the general button, radio button, check box, list, input box, pop-up menu, drop-down menu, etc. We tried to keep it aligned with the ASUS PC style.

Design Style Research
1. Define Target User 

Who will use Asus Linux?

  • Software Engineers 

  • Programmers

  • PC DIY users

2. 4-quadrant Competitive Analysis Matrix

In order to understand the UI design trend of the operating system, we collected all relevant images from all over the market. Then, I used the cross-analysis method for classification, observing and understanding the elements that cause differences in style. Based on this, we summarized the effects we hope to present. It can be seen that the latest Windows 11 and Mac are both leaning towards modern style, using geometric abstract elements and more intense colour schemes.

​

In the second round of cross-analysis, we selected several styles that are representative and in line with current trends from a massive number of styles. Then, we reanalysed them based on the colour axis to project the atmosphere differences on colour dimensions. And captured the corresponding keywords to converge on the design elements, setting the direction towards a technology-oriented, dark style. Next, based on these findings, we continued with MyASUS 3, retaining its characteristics and adjusting them to emphasize the distinctiveness of the Asus Linux system.

3. The UI Style​ Design Direction for Asus Linux
Design Theme Based on MyASUS 3 Style

Based on the current UI style of MyASUS 3, I chose its dark mode and used the following three approaches to shape the sense of stability, trust, and technological style that ASUS Linux wants to present:

​

a. Remove figurative elements.
The style of MyASUS is friendlier and more welcoming, which is different from the design direction of ASUS Linux. Therefore, we will reduce complex graphics and figurative illustrations while retaining geometric, abstract, and technological features.

​

b. Decrease the corner radius of UI elements.
Adjust the edge sharpness, including decreasing the corners of the cards and buttons, to make the interface simple and legible.

​

c. Replace the round icon style with the sharp one.

Sharp icon style gives a crisp, modern look that pairs nicely with rectangular design details and is suitable for more professional Apps. The clean and polished features echo the stability, trust, and technological sense.

Design Outcome
Mockup
Mockup A
Mockup B

Mockup is mainly used to validate the design approach and direction.

  • Firstly, the background desktop continues the geometric illustration style of MyASUS 3, which has been redrawn to bring out a sense of technology.

  • Next, we can see the launchpad part, where I optimized the usability and visual appeal of the original Linux interface.

  • The layout is redesigned to display more app icons than the original design. I adjusted the spacing, made the layout concise and clean, and reduced the squeezed feeling.

  • In addition, the background is blurred and deepened to avoid visual interference from the background pattern on the icon content.

  • The folder part has also been rearranged, and more folders can be displayed compared to the original Linux.

  • Mockup B directly applied ASUS's background material image, and you can see the effect presented in different backgrounds.

Conclusion

While this project is experimental and has not yet been implemented in an actual product, it is vital for the company to explore new directions to maintain innovation and flexibility. I am thankful to have gained experience planning new projects from the ground up through my participation in this project. Additionally, I have learned how to define project scope properly and create design plans.

 
bottom of page