Application Design/Project 3

26 /11/2025--12/12/2025 (W10-W12)

LIU YITONG (0370907)

Application Design / Bachelor of Design (Hons) in Creative Media / Taylor's University

INSTEUCTION

LECTURE & TUTORIAL

Week 11

Usability Testing & UI Kit

Usability Testing: It is a method of evaluating a product or service by representative users, with the main purpose of identifying usability issues, collecting qualitative data, and assessing user satisfaction.

Testing process: A low-fidelity prototype needs to be prepared, user scenarios and written instructions need to be formulated, a small number of participants (for example, 3) need to be recruited for the test, and feedback collected for improving the wireframes.

UI Kit (User Interface Toolkit) Content: It includes standard elements used to maintain design consistency, such as typography (Typography), iconography (Iconography), layouts and grids (Layouts and grids), color palettes (Color palette), and components (Components), such as buttons, input boxes, and navigation bars.

Week 12

Usability Heuristics

Definition: Usability heuristics are general principles or guidelines that designers use to assess and enhance the user-friendliness of products such as websites and applications.

Core Principles (10 Heuristics by Jakob Nielsen):

System Status Visibility: Provide timely feedback to users, informing them of the current status of the system.

System and Real World Matching (Match Between System & Real World): Utilize language and concepts familiar to users.

User Control and Freedom: Allows users to undo or redo operations, providing flexibility for going back and canceling.

Consistency and Standards: Maintain the uniformity and predictability of design elements, patterns, and behaviors throughout the entire interface.

Error Prevention: During the design process, reduce the likelihood of users making mistakes (for example: clear instructions, confirmation prompts).

User Interface Visual Elements

Definition: Usability heuristics are general principles or guidelines that designers use to assess and enhance the user-friendliness of products such as websites and applications.

Core Principles (10 Heuristics by Jakob Nielsen):

System Status Visibility: Provide timely feedback to users, informing them of the current status of the system.

System and Real World Matching (Match Between System & Real World): Utilize language and concepts familiar to users.

Consistency and Standards: Maintain the uniformity and predictability of design elements, patterns, and behaviors throughout the entire interface.

Error Prevention: During the design process, reduce the likelihood of users making mistakes (for example: clear instructions, confirmation prompts).

Recognition Rather Than Recall: Facilitates users' ability to identify options rather than relying on memory.

Flexibility and Efficiency of Use: Satisfy the needs of both novice and experienced users (e.g. provide shortcuts).

Aesthetics and Minimalist Design: Focused on simplicity, clarity and visual appeal, eliminating unnecessary elements.

TASK

Intro Slice (Summary of Task 2 research)

During the Task 2 research phase, I conducted a thorough analysis of the existing Steam mobile applications. Through market research, user questionnaires, interviews, and card categorization, I clearly identified the core problems encountered by users in their usage. The core pain points I discovered were concentrated in two aspects:

1. Disorganized information: The current application layout is overly crowded and complex, making it difficult for users to quickly find key content.

2. Inadequate social connectivity: The chat function is separated from the main application, seriously undermining the convenience of communicating with friends and teaming up on the mobile platform.

My design goals are based on four core user needs:

Clarity

I decided to simplify the navigation and layout to ensure that core functions such as the store and game library are easily accessible.

Simplicity

I will optimize the page layout, remove redundant information, and create a cleaner mobile experience.

Social

I plan to reintegrate the chat function into the main application and improve the friend system. Additionally, I will add a "People Nearby Playing This Game" system.

Sketches

At this stage, I first explore and conceive new interface layouts and interaction processes through rapid hand-drawn sketches.

Fig.2.1 Sketch attempt

Then select the favorite layout and transfer it to Procreate to carry out detailed drawing.

Fig.2.2 Sketches

I made adjustments to the homepage layout. I focused on optimizing the information hierarchy, making the discounts, recommendations, and personal exploration queue more distinct.

Additionally, I added a chat function. I explored the possibility of placing the friend list and group chats directly at the bottom navigation bar of the main application.

Reference

My design inspiration and functional references mainly come from the analysis of other mainstream game platform mobile applications (PlayStation App, Xbox App), the reference to the Steam app itself, and the borrowing from social software.

Fig.2.3 Reference board

Wireframes

The wireframe stage transforms the concepts in the sketches into a more structured form.

First, I reviewed the flow chart created in Project 2 to help me better create the wire frame.

Fig.2.4 Flow chart in project 2

During this stage, I mainly focused on the page structure, element placement, and information flow.

Fig.2.5 Wireframes

After referring to the wireframe, I began to try creating a prototype in Figma.

Fig.2.6 Wireframe design in Figma (version 1)

Lo-Fi Prototype

The low-fidelity prototype is an interactive version based on wireframes, used for preliminary user testing. I added more pages, such as the "cart". Then I also improved more derived interfaces for the chat function.

Fig.2.7 Landing page

Fig.2.8 Store Page and Burger Menu

Fig.2.9 Notice Page, Library Page, Wishlist and Profile Page

Fig.2.10 Cart Page

Fig.2.11 Chat Page

Fig.2.12 Overview

Fig.2.13 Prototype Scenario

User Testing

Fig.2.14 User 1

Fig.2.15 User 2

Fig.2.15 User 3

User Testing Video Link：

https://drive.google.com/file/d/1Mtd-SNx1vM_gGRkzH9PLY_h3oPdkGLuS/view?usp=drive_link

https://drive.google.com/file/d/1NKKye1YTsI4ey7EsSbOz1HDexnc55lko/view?usp=drive_link

Feedback Form：

Analysis & Changes

Analysis

Overall, the feedback from the three users was positive.

All participants found the app clean, simple, and easier to use compared to the original version.

Users appreciated the smooth purchasing process, clear chat and group chat functions, and helpful game categorization, which made it easier to find suitable games. The “nearby players playing this game” feature was also seen as valuable in creating a sense of community.

Fig.2.16 Bottom navigation bar

However, two users mentioned that the bottom navigation bar is unclear because it uses icons without text labels, causing confusion during first-time use. One user also felt that the game detail page is overly simplified, lacking information such as events, updates, or similar games. Some users expected more visible friend activity to enhance social interaction.

Overall satisfaction ranged from moderate to very high.

Changes

The user testing shows that simplifying the layout and integrating social features is effective, but over-simplification affects clarity and discoverability.

Planned improvements include: