Application Design I - Project 2: UI/UX Design Document

22.10.25 - 21.11.25 (Week 5-9)

PAN RUINING (0378138)

APPLICATION DESIGN / Bachelor of Design (Honours) in Creative Media

Project 2: UI/UX Design Document

---

CONTENT LIST

· INSTRUCTION

· LECTURES

· TASK 2: UI/UX DESIGN DOCUMENT

· FINAL PROPOSAL SLIDES & FIGJAM

· FEEDBACK

· REFLECTION

---

INSTRUCTION

---

LECTURES

WEEK 4:  Introduction To User Experience Research: Navigating UX, UI, and Usability for Seamless Experiences

What is User Experience Research?

• The process of understanding use behaviors, needs, and attitudes through various observation and feedback collection methods.
• Effective UX research entails employing the appropriate methods at the right stages of product development.

Role of UX Design 

• Helps uncover users’ behaviors, goals, motivations, and needs.
• Shows how users interact with a product and highlights where they struggle.
• Emphasizes the importance of recognizing users’ emotions throughout the experience.
• Ensures the design process is rooted in real user insights, resulting in more effective and user-focused solutions.

Role of  UX Researches Duties 

• Developing coherent research methodologies.
• Selecting and recruiting targeted end-users for research endeavors.
• Conducting individual interviews with clients.
• Utilizing data analysis tools to enhance consumer products.
• Collaborating closely with the product team to steer future directions.

The Value of User Experience Research

User Benefits

• Uninfluenced by investors or company leaders, it maintains reliability.
• It acts as a bridge between users and the company, fostering improved understanding and communication.

Business Benefits

• Expediting product development.
• Minimizing redesign costs.
• Enhancing user satisfaction.

Product Benefits

• It provide insights into the end user, their usage patterns, and the core issues addressed by the product.
• It aids in decision-making regarding various design solutions.
• Direct customer feedback unveils preferred usage scenarios, pain points addressed by the product, and avenues for enhancing product design.

The 5 Steps of UX Research

1. Objectives
2. Hypothesis
3. Methods
4. Conduct
5. Synthesize

UI/UX Document

• Online survey
• Interview 
• User Persona 
• Card Sorting (See lecture 5)
• Information Architecture Map
• Flow Chart

UX Research METHOD: INTERVIEW

• Examines users’ thoughts, perceptions, and personal experiences with a product.
• Usually conducted one-on-one for about 30–60 minutes and can take place in person, over the phone, or via video call. (For our case, it’s recommended to keep it under 15 minutes.)
• Enables you to capture both what users say (verbal cues) and how they react physically, such as through gestures or facial expressions (nonverbal cues). These signals help you understand whether users feel positive (interest or excitement) or negative (uncertainty or discomfort) toward the product or service.

Process

Pros and Cons of Interview

Pros 

• Users provide detailed insights into their attitudes, desires, and experiences.
• Allows addressing and clarifying individual concerns and misunderstandings immediately.

Cons

• Interviews are time-consuming per participant.
• Requires preparation, conducting, analysis, and sometimes transcription.
• Limits sample size, which can be problematic.
• Data quality depends on the interviewer's skill.

UX Research Method: Online Survey

• A research method that uses structured questions to measure users’ preferences, attitudes, and opinions about a specific topic.
• Typically administered online and available in different formats and lengths, with responses automatically gathered and often processed by the survey platform.
• Useful for identifying users’ backgrounds, objectives, and the types of information they seek.
• Users might describe their behaviors or preferences differently from how they act in real situations, affecting the validity of the research findings.

Process

Pros and Cons of Online Survey

Pros 

• Conducted online, allows for rapid and inexpensive data collection.
• Anonymity often leads to more candid/honest responses.

Cons

• Ensuring a representative sample is challenging, particularly from social media or general forums.
• Poorly crafted or leading questions can bias responses.
• Lengthy surveys may discourage participation.

Usability testing

• Evaluating a product or service with representative users.
• Participants are tasked with completing specific actions while observers record notes.
• The primary aim is to detect usability issues, gather qualitative data, and assess overall user satisfaction.
• It doesn't yield large feedback samples like questionnaires.

WEEK 5:  Card Sorting Method

What is Card Sorting？

• A powerful method to understand how users group and categorize information.
• Helps determine an organizational scheme that aligns with the user's mental models.
• Informs the design of navigation menus, website or app architecture and content strategy.

Card sorting entails displaying users a collection of cards, each containing a piece of information like a page title, menu item, or product category.

Types of Card Sorting

1. Open

• Participants create their own categories.
• Ideal for understanding how users intuitively organize information.
• No predefined categories involved.

2. Closed

• Participants sort cards into predefined categories.
• Useful for testing specific grouping.
• Ideal when a basic structure is already in place.

3. Hybrid

• Hybrid card sorting blends open and closed card sorting.

4. Remote

• Participants sorts cards using online tools.
• Convenient for reaching a boarder, move diverse audience.

5. Moderated 

• Facilitator is present for study sessions. 
• For qualitative insights (15 samples)

6. Unmoderated

• Facilitator is not present. 
• For quantitative data collection (>50 samples)
• faster and less expensive

Pros and Cons of Card Sorting

Pros 

• Ease of Use and Cost-Effectiveness
• Efficiency in Gathering Data 
• Direct User Input

Cons

• Dependency on Participants
• Content-Centric Focus
• Time-Consuming Data Analysis

WEEK 6:  Introduction To User Experience Research

Purpose of User Personas

• Help understand real user needs for better problem statements.
• Guide design decisions by aligning designs with actual user behaviors.
• Prevent bias or assumptions by using real data.
• Improve adoption and retention by addressing user pain points.
• Support feature prioritization using persona–feature scoring matrices.

Qualities of an Effective Persona

• Use real data from surveys and interviews.
• Focus on present behaviors, not stereotypes.
• Context-specific information relevant to your app.
• Avoid biases in content, names, and images.

What to Include in a Persona

Answer questions like:

• Who are my users?
• What are their behaviors and trends?
• What do they need or want?
• What problems do they face?

Include:

• Personal characteristics
• Attitudes & values
• Motivations & goals
• Needs & pain points
• Scenarios & user quotes

Class Group Activity: Creating User Persona

During this class, we were split into group to make a user persona for a food delivery app. We choose to do customer persona.

WEEK 7: User Persona

What is User Journey Map?

• A user journey map shows the step-by-step path a user takes to reach a goal.
• It helps designers understand the user experience more clearly, build empathy for their emotions, and spot pain points or frustrations during the interaction.

Best practice for User Journey Map

• Ties back to each of the personas (either by name or intro)
• Clearly outlines each of the main steps
• functional & emotional (the user does x & feels/ thinks/ reacts y)
• References user & business objectives for the journey

6 Criteria for Creating User Journeys

1. Identify Who

Decide which persona you’re mapping.

2. Identify What

Choose the goal or task the journey will focus on.

3. Define Style

Decide the emotional and functional tone of the journey.

4. Define Steps

Sketch or write out the sequence of user actions.

5. Do It Digitally

Pick the best tool or platform to visualize it.

6. Identify Role

Clarify the user’s role or context within the journey.

Class Group Activity: Creating User Journey Map

In this week, we were back into our previous groups and need to make the user journey map for the customer persona.

WEEK 8: Site Map & User Flow Diagram

What is site map?

A footprint showing how each page relate to the web/app’s hierarchy. It guides the user's attention and organizes content meaningfully.

• Shows overall content organization
• Uses boxes (pages) and lines (relationships)
• Helps designers plan clear navigation
• Card-sorting results inform the final structure

What is User Flow?

The user’s path to finish a specific purpose. It includes each step, from the starting point to the endpoint.

• Visualizes all user interactions
• Focuses on task completion
• May include multiple paths depending on user choices
• Helps identify issues and improve usability

Why Use User Flow Diagrams?

1. Design Precision

User flows show the exact sequence of screens, helping designers create a clear, logical, and intuitive path for users.

2. Unified Team Vision

They act as a shared blueprint that everyone (designers, developers, and product managers) can easily understand.

3. Refine User Experience

User flows allow continuous improvement by revealing where the experience can be optimized.

4. Facilitate User Testing

They help create testing scenarios, letting users walk through tasks and give feedback on usability.

5. Proactive Issue Detection

Mapping the flow early helps identify potential pain points before real users encounter them.

How to Create a User Flow

1. Research Your Users

Understand who your users are—their needs, behaviors, and how they interact with your product.

2. Define the Purpose & Goals

Clarify what the user flow is for.

3. List All Possible Steps

Map out every action the user might take. Do this early to avoid missing important paths.

4. Create the User Flow

Use paper or digital tools to draw the path clearly.

5. Review & Update

Share the flow with your team, get feedback, and refine it.

Class Group Activity: User Flow Diagram

The class group activity of this week, we needed to make the User Flow Diagram of the customer ordering food from the food delivery app.

---

TASK 2: UI/UX DESIGN DOCUMENT

After locking down their App concept and idea, students are now ready to proceed to UX design. Students are required to produce a comprehensive UX design document which will provide better directions for them to design the app. Based on the information gathered in task 1, students will : 

• Determine and verify their target audiences
• Outline the content element of their app
• Exercise card sorting method to achieve optimum information architecture
• Listing the app features 
• Identifying the app’s MVP. 
• Create wireframes of the screens 
• Plan the user interaction and interactivity

---

Getting started: Research phase

For this task, I need to research the CHAGEE app’s potential users to help decide which features should be included in the redesign.

I categorized the features of the selected application and its competitors’ applications using cards.

Fig 1.1 Cart Sorting1

Interview & Survey

Next, I prepare the interview questions and survey questions.

The interviews aim to:

• Understand users’ drink preferences and the reasons behind their choices.
• Explore users’ consumption habits and usage contexts.
• Understand users’ decision-making process and points of confusion when choosing from a menu.
• Identify which menu elements attract users’ attention the most.
• Explore users’ interest in tea culture, stories, and origins.
• Identify opportunities to improve menu presentation and content design.

Fig 1.2 Interview Questions

I recorded and transcribed each interview, then summarised and organised the insights in FigJam.

Fig 1.3 Interview overview

Interview transcript link:

https://docs.google.com/document/d/1QHuWHt65XWKFm3IhKy8lSOWrFSmc5E4Tbg8E4SlHydU/edit?usp=sharing

Survey

For the survey, I wrote questions similar to those in the interviews and added some questions to gather more data from a wider audience.

Fig 1.4 Survey questions

Survey Link:

https://docs.google.com/forms/d/e/1FAIpQLSdatQSGSAS9VzIlg_iUjIg_x26CORlHLSDCm5hnYB_f7RI3jQ/viewform?usp=dialog

Survey Data Sheet:

https://docs.google.com/spreadsheets/d/1aeao1R7FRnGbJ-YRzJwYdqyjNeTw_rtpRjirwIAoxBE/edit?usp=sharing

Affinity Mapping

After the interviews, I extracted the key points from the conversations and conducted an Affinity Mapping to identify the interviewees’ needs and pain points.

Fig 1.5 Affinity mapping

Personas

I transformed the key insights and pain points from the Affinity Mapping into user personas, which allowed me to create personas that more accurately reflected the interview content.

Fig 1.6 Persona1 - Emotional Drinker

Fig 1.7 Persona2 - Group-Oriented Drinker

Fig 1.8 Persona3 - The Tea Cultural Enthusiast

User Journey Maps

I then created a User Journey Map for each persona and added three opportunities at every action point.

Fig 1.9 User journey map1 - Emotional Drinker

Fig 1.10 User journey map2 - Group-Oriented Drinker

Fig 1.11 User journey map3 - The Tea Cultural Enthusias

Card Sorting 2

The opportunities identified from the user journey map were organized into seven parts: Home & Drink Discovery, Tea Culture & Learning, Ordering & Customization, Rewards & Membership, Order Tracking & Pickup, Group Ordering & Social, and My Profile & My Tea List.

Fig 1.12 Cart sorting 2

Sitemap

After reviewing the card sorting board, I identified the key features and built my sitemap, which set the groundwork for the new app’s layout.

Fig 1.13 Sitemap

User Flow Chart

Fig 1.14 User flow chart

---

Final Proposal Slide & Figjam

---

FEEDBACK

WEEK 5: No feedback.

WEEK 6: Mr. Sylvain said that some of my interview questions were too detailed, which could limit the interviewees’ responses.

WEEK 7: Mr. Sylvain suggested that I ask more “why” questions in the interviews to draw out richer stories from the interviewee.

WEEK 8: No feedback.

WEEK 9: No feedback.

---

REFLECTION

Experience:

These past few weeks have been really interesting. I learned how to use interviews and surveys to uncover people’s pain points and insights, which helped me understand how different people can have completely different perspectives on the same thing. I also learned for the first time how to create personas, user journey maps, and user flow charts, as well as how to develop a sitemap based on them, all of which have been very rewarding experiences.

Observations:

I observed that when creating interview questions, because my own thinking tends to be quite limited, I should not try to anticipate how the interviewees will respond, as this can limit their imagination and the range of their answers.

Findings:

I found that when creating a sitemap, I shouldn’t include too much detail for each step because otherwise it stops being a sitemap and becomes a UI breakdown.