MyASUS in UEFI
UI/UX Design
This project redesigned the interface of MyASUS in UEFI, modified information architecture and redefined the design system for keyboard behaviour. This improvement helps to make the BIOS for all ASUS computers more intuitive and user-friendly.
Project Brief
Project Duration
Project Type
Contributor
My Contribution
Jul. 2021- Oct. 2021
UI/UX Design
Information Architecture
Software Planner
UI/UX Redesign
BIOS RD
UI System Modification
Design Director
Multilingual UI
Ren Huang
Designer
Hsiao-Han Chou
Workflow Optimisation
Project Background
What is MyASUS in UEFI
MyASUS in UEFI provides ASUS Notebook users with the new interface in UEFI (Unified Extensible Firmware Interface). The screen design of MyASUS in UEFI allows users to get rid of the old blue and white screen BIOS operation experience. Instead, it uses rich pictures and colours to offer users a comparable user experience to the OS in the UEFI environment. As a result, it gives the general user, who may not have a technical background, a comfortable and inclusive operation environment.
The Challenge
The redesign of BIOS faces two main challenges – technical limitations and the development process.
Technical limitations pose challenges in BIOS development. Unlike OS apps and web pages, the BIOS development environment is full of restrictions, making it difficult to create a visually appealing user interface. Additionally, the file size constraint requires the team to be mindful of the file size of images. Also, the UI cannot be defined responsively according to the length of the string for multi-language versions, so it's essential to consider the flexibility in advance to eliminate unnecessary programming tasks.
The development process is another issue. In the past, only computer technicians would access the BIOS environment, which resulted in limited resources invested in its design. Programmers used to directly write code to add new functions, leading to inconsistent operation logic and unreasonable functions. Before I joined the team, the programmers and PM were unfamiliar with the design process and lacked understanding of the importance of information architecture and user flow. This led to friction in project cooperation.
Despite these limitations and challenges, the team remains determined to provide a user-friendly graphical user interface that is similar to the OS operating experience for the BIOS. It enhances the overall user experience and makes the ASUS brand ecosystem more comprehensive and complete.
My Approach
Current State Analysis
Specification & Function Intro
User Flow
At the beginning of design work, I always carefully evaluate the objectives and scope of the project. In the case of UEFI, I began by studying the existing structures and functions to gain a thorough understanding of its current state. It was challenging as my available resources were a PDF document with specs and screenshots, along with a laptop that had a roughly designed prototype of UEFI.
In spite of the limited resources, I attempted to organize the current user flow and identify potential problems. After listing the key pain points that currently exist, I clarified issues and gained alignment with stakeholders on project goals at an early stage.
Once the goals were established, I prioritized design tasks in order to meet the development schedule. This allowed me to ensure that the project stayed on track while meeting its objectives.
Design Process
Information Architecture
Wireframe
UI Mockup
-
Information Architecture
Several mistakes in the existing UI were spotted during the process. We fixed the problems, restructured the information, determined the hierarchy to ensure an intuitive user experience, and made it easier for users to locate and comprehend the information.
-
Wireframe
To ensure that everyone involved in the project is on the same page, we created wireframes to provide a visual representation of the product's layout, structure, and relationships between its different elements. We used wireframes to iterate the design, test early ideas, get feedback and help identify potential usability issues.
-
UI Mockup
I use Figma to create mockups as a visualisation of the user interface, which involves adding colour, typography, icons, images, and other design elements to bring the product to life and give stakeholders an idea of how the final product will look.
.png)
-
Design Research
After applying the new design style, the user behaviour was affected due to the altered information architecture and layout compared to the old version. During the design process, it was necessary to communicate effectively and thoroughly with the development team. I used various design methodologies to compare the pros and cons among the original version, the programmer's intuitive approach, and my proposal. This helped the team understand why it was necessary to modify the structure rather than simply replace the graphics to achieve the desired outcome.
Interactive Prototype
Password Input
Keyboard Behaviour
-
Interactive Prototype
I optimised the user flow with prototyping tools to visualise the steps users will take to accomplish their goals. It defines the way users interact with a product and their journey through it.
Define Design Template & Rules for Development
Design Template
Function Behaviour
-
Design Template
There is a lot of information in the Advanced Settings section, and the detailed items may vary from different models. As a result, instead of creating design drafts for each content, I defined templates to let developers apply the appropriate layout according to the information hierarchy. By implementing this approach, the development process was significantly accelerated.
Design Outcome
I. Redesign the interface and user experience
II. Align with MyASUS 3 style
III. Define the UI guideline for better keyboard experiences
.png)
IV. Increase development efficiency
Build Component Library
Define Naming Rule
.png)
Optimize Workflow
-
Build the component library
Before I joined the team, there was no shared design component library in the department, which often led to problems such as incomplete handover of source files and duplicated drawings of components. So after I joined the team, I established the design component library, systematically organizing and categorizing components so that designers could share and reuse existing resources to improve design efficiency.
-
Define the naming rule
The structure of UEFI is very complex, and many features are developed by different RD teams. Initially, there were no standardized naming principles within the team, so when developers received design files from designers, they would rename them based on their own naming preferences. As a result, there were many shared components with different names across different folders. This would cause file duplication, waste of storage space, as well as overlapping and duplication of work. To improve these issues, we took into account project names, component types, information, interaction status, and version management numbers to define a unified naming principle and ensure that file names can be clear and easy to understand.
-
Optimize the workflow
Due to a lack of adequate development processes, development teams had poor collaboration experiences, causing engineers to doubt the necessity of new tasks and worry about doing unnecessary work. If the information architecture is not reasonable in the initial stages, future repetitive revisions will be not only time-consuming but also encounter significant limitations. After adding the role of the designer to the team, the development process and division of responsibilities were redefined, enabling the team to gather consensus around goals and increase the efficiency of cooperation.
Reflection
I am glad to have the opportunity to work on the new interface in UEFI for all ASUS laptops, and it was an exciting challenge. Not only did I have to clarify the project's current status and goals, but I also had to redesign the structure and the firmware interface, which is unfamiliar to non-computer technicians, within a short period of time. Throughout the process, I realized the significance of cross-departmental communication and learned how to ensure the accuracy of information transmission and promote effective collaboration in a large team with a vertical organizational structure. Eventually, I delivered a design that far exceeded the initial requirements. Moreover, the team came to appreciate the importance of the design process and project management. These lessons learned will definitely help future projects to proceed more efficiently.