Application Design/Project 2

/10/2025--19/11/2025 (W5-W9)

LIU YITONG (0370907)

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

INSTEUCTION

LECTURE & TUTORIAL

Week 5

CARD SORTING

What is Card Sorting: It is a foundational user research method used to understand how users mentally group and categorize information, which is essential for creating an intuitive Information Architecture (IA).

Purpose: The technique is used to design and inform the structure of navigation menus, website architectures, and content strategies that align with the user's mental model.

Types of Card Sorting:

Open Card Sort: Participants create their own category names for the cards.

Closed Card Sort: Participants sort cards into pre-defined categories.

Hybrid Card Sort: Combines the two, allowing participants to use existing categories or create new ones.

Implementation: Card sorting can be conducted physically (moderated) or remotely using digital tools like OptimalSort.

Benefits & Limitations: It is an economical and quick method that provides direct user input. However, its limitation is that it focuses on structure rather than task flow and can yield diverse, inconsistent results.

Week 6

Introduction To User Experience Research - Interview and Questionnaire

Value of UX Research: UX research is critical because a significant percentage of potential sales are lost when users cannot find needed information, and a positive user experience is more influential than strong advertising.

Definition of UX Research: It is the process of understanding user behaviors, needs, and attitudes through various observation and feedback collection methods.

Questionnaires (Surveys): Used to gather quantitative or qualitative data on user demographics, attitudes, and preferences from a large group, helping to set the direction for more in-depth research.

User Interviews: Essential for gaining a deep, qualitative understanding of user motivations, challenges, emotions, and the context of product use, helping designers build empathy.

Research Document Requirement: This research phase forms a core part of the UI/UX Design Document, providing analysis of surveys and interviews to inform the creation of User Personas and User Journey Maps.

Week 7

UI/UX Design Document - User Journey Map and Digital Card Sorting

User Journey Map (UJM) Definition: A UJM is a visual representation of the steps a user takes to achieve a goal, acting as a narrative of their experience with the product or service.

UJM Purpose: It encourages empathy within the design team by allowing them to relive the user's experience and, most importantly, helps to identify the user's "pain points" (frustrations and emotional lows) that need design solutions.

Map Components: A comprehensive map includes phases, actions, user thoughts, emotional feelings (peaks and valleys), and specific pain points at each step.

Digital Card Sorting: This section reinforces the use of card sorting, but specifically through digital tools, to organize content into a logical Information Architecture that reflects the user's mental model.

Design Document Integration: Both the User Journey Map and the Card Sorting outcomes are mandatory components of the UI/UX Design Document, serving to justify subsequent design and structural decisions.

Week 8

UI/UX Design Document - Site Map and User Flow Diagram

Site Map Definition: A site map is a visual, hierarchical representation of the application's content organization, showing how each page or content node relates to the overall structure.

Site Map Function: It provides a comprehensive, bird's-eye view of the app's structure, ensuring content is logically organized and that the hierarchy is clear, typically derived from card sorting insights.

User Flow Diagram Definition: A user flow diagram graphically illustrates the series of steps and paths a user takes to complete a specific task within the application.

Flow Diagram Symbols: Standard flowchart symbols are used, such as rectangles for a page or step, diamonds for decision points (where the path branches), and arrows to indicate the direction of the flow.

Role in IA: Both the Site Map and User Flow Diagram are crucial components of the Information Architecture section in the design document, describing both the static structure of the content and the dynamic paths a user takes through it.

TASK

The Problem Statement

Gamers need a clear and fully functional Steam mobile app for times when their computer is not available but they still want to browse Steam.

Market Research summary

To identify opportunities, we first looked at the competition. Our initial market research (from Assessment 1) provided vital insights into what the industry leaders are doing well:

PlayStation App: Excels with strong social tools and clear achievement visibility, which boosts user engagement.

Xbox App: Offers highly structured navigation and simple friend discovery, setting a benchmark for usability.

Nintendo Switch App: Shows the value of a clean interface and readable personal info, particularly for casual players.

Interview & Survey

Next step was to connect directly with the target audience. We designed surveys to gather quantitative data on user habits (e.g., how often they browse on mobile, what they buy), and in-depth interviews to understand the 'why' behind their frustrations.

Fig.1.0 Survey

Fig.1.1 Interview screenshot

Our goal was to uncover specific pain points related to browsing, purchasing, and managing their social life within a mobile game store.

Survey Questionnaires

When designing the interview and survey questions, I focused on two main goals:

1) Understanding the social experience in gaming

2) Understanding how users browse and evaluate game information

Fig.1.2 Survey Questionnaires Answers

Interview

We need to interview five users of this application and pose questions related to our final project to them. Here are the results of my interviews.

Interview Speech-to-text Link: Interview Speech-to-text - Google Docs

Fig.1.3 Interview Answers (transcripts)

Affinity Mapping

Figma Link：https://www.figma.com/board/Df4GHbZYSMJjNgiyBz6bvS/Card-sortings?node-id=0-1&t=pmmCt4qIxwtk7PUB-1

Fig.1.4 Interview Affinity Mapping

Personas (x3)

To ensure we design for real people, we synthesized the "I statements" into three distinct Personas. A Persona is a fictional, yet realistic, representation of our target users, summarizing their goals, motivations, and obstacles.

Figma Link：https://www.figma.com/design/9isRIvjDULakMW4B8vY8xX/APP-Design-Project-2?node-id=0-1&t=1HPQU5B8Ir8AQI6L-1

Fig.1.5 Persona 1

Fig.1.6 Persona 2

Fig.1.7 Persona 3

Who are they? (e.g., "Max the Hardcore Trader," "Sarah the Social Co-op Player")

What matters to them? (e.g., efficiency, communication, deep discounts)

What gets in their way? (e.g., slow load times, confusing settings, hidden friend lists)

Why do they need our help? (Their current mobile experience doesn't support their daily gaming habits.)

User Journey Maps (x3)

The User Journey Map visualizes my Personas completing a key task, mapping their actions, thoughts, and, most importantly, their emotional highs and lows along the way.

I mapped three separate journeys, ensuring all identified needs and pain points were represented. I meticulously documented the lowest points (pain points) in the journey to focus our design efforts.

Figma Link：https://www.figma.com/design/9isRIvjDULakMW4B8vY8xX/APP-Design-Project-2?node-id=0-1&t=1HPQU5B8Ir8AQI6L-1

Fig.1.8 User Journey Map 1

Fig.1.9 User Journey Map 2

Fig.1.10 User Journey Map 3

Card sorting 2

After having the functional ideas (design opportunities), we used card sorting 2 (through digital tools) to ultimately determine the information structure of the application Users grouped the new features we proposed with those of competitors, creating an organizational scheme that matched their mental model.

Figma Link：https://www.figma.com/board/Df4GHbZYSMJjNgiyBz6bvS/Card-sortings?node-id=0-1&t=pmmCt4qIxwtk7PUB-1