APPLICATION DESIGN I / PROJECT 2 / DST60504

20/10/2025 - 21/11/2025 / (Week 5 - Week 9)

Aricia Man Yi Xuan / 0375026

Application Design I / Project 2 / UI/UX Design Document / DST60504

Bachelor of Design (Hons) in Creative Media

TABLE OF CONTENT

This week, Mr. Sylvain introduced us to the topic "Introduction to User Experience Research". Later on, we were assigned to start working on our project 2. We created 10 questions based on our project and have a small demo live interview with our partners in class. We also have a group discussion of card sorting the features of a travel app.

For next week, we have to prepared:

Card sorting for >50 features of our apps (using FigJam/Miro) based on existing app, competitors, left field, common features.

Fig.1.1.1 Selfies of group discussion / (Week 5, 22/10/2025)

Fig.1.1.2 Card sorting activity / (Week 5, 22/10/2025)

- KEY NOTES -

User Research is the process of understanding user behaviors, needs, and attitudes through observation & feedback collection methods.

The 5 Steps of UX Research

1. Objectives (What areas of knowledge require further exploration & understanding?)

2. Hypotheses (What assumptions?)

3. Methods (Considering time & manpower)

4. Conduct (Implement the methods)

5. Synthesize (Identify design opportunities)

UI/UX Documents

Online Survey (Anonymous)
Interview
User Persona
Card Sorting
Information Architecture
Flow Chart

Qualitative vs Quantitative Research

Qualitative - User Group / Moderated card sort (e.g., interviews, observations)
[Why? How?]
Quantitative - Unmoderated cart sort / Web & App analytics (e.g., surveys, data)
[How much? How many?]

UX Research Methods

Interviews - Explore user attitude, beliefs, and experiences (< 15mins)
Surveys - Gather user demographics, goals, and information needs
Usability Testing - Ask people to try the app

*Avoid leading question, ask neutral question (neg-/pos+/facts)

WEEK 6 / 29/10/2025

This week, Mr. Sylvain explained how are we gonna do our live interview & online survey questions, affinity mapping, and personas correctly. Then, we distribute into groups and do a simple user personas activity. We need to completed Live interview and Affinity Mapping before next week.

Fig.1.1.3 Personas Group Activity / (Week 6, 29/10/2025)

- KEY NOTES -

Live Interview (User problems) x5
- AI transcript
- Extract main points
*DON'T ASK "How often do you exercise?" → ASK "What would motivate you to exercise?"
*NOT talking about "products, app, features"
*TALK about "feelings, problems"
Online Survey (Supplementary Data) 10-20

Affinity Mapping (1 statements "I want...)

Fig.1.1.4 Affinity Mapping / (Week 6, 29/10/2025)

- Splitting Notes
- Controlled chaos (1 color per user) *Add user 6 for own notes
- Split / merge groupings (3-4 notes per group)
- Putting names on things (Name your groupings)

User Personas (Profile - Different problems & needs) x3 (Main x1, secondary x2)
- Make an impression on others
- Tools to create empathy (imagination + interpretation)
- Make them normal, local, give them problems (Different gender, age)

WEEK 7 / 5/11/2025

This week, we were introduced to the topic: "UI/UX Design Document - User Persona". He explained to us on how to do a user persona. Next week, we have to prepare THREE personas & ONE journey map per persona.

Fig.1.1.5 User persona / (Week 7, 5/11/2025)

- KEY NOTES -

Purpose:
- Understanding user needs in crafting problem statement
- The role of persona in design decision-making

How do it influence product decisions?
- Increased adoption
- Increased user retention
- Better prioritization

What makes a persona?
- Name & face
- Goals
- Needs
- Pain Points
- Social anchors
- Relevant anchors
What is a Journey Map?
-Type: before vs after
- ONE journey map for each persona
- Provide at least 3 points for each ideas

Fig.1.1.5 Journey Map Example #1 / (Week 7, 5/11/2025)

Fig.1.1.6 Journey Map Example #2 / (Week 7, 5/11/2025)

WEEK 8 / 12/11/2025

This week, we do an user flow exercise in group activity (Fig.1.1.7). We need to do our UI/UX Document. It include:

Market Research Summary

Interview & Survey questions

Transcripts + Affinity Map

Persona (x3)

User Journey Map

User Flowchart (x1)

Card Sorting (Features)

Sitemap (include link to Figma)

Summary/Action Plan

Fig.1.1.7 User Flow Group Activity / (Week 8,12/11/2025)

- KEY NOTES -

What is User Flow?
- Visualization Tool (Horizontal)
- To design efficient task completion
- Design precision, identify issues, optimize user experience

Fig.1.1.8 User Flow Example / (Week 8,12/11/2025)

How to create a user flow for UX design?
1. Research on customers
2. List the purpose and goal
3. List the possible steps
4. Create the user flow
5. Review and update
What is Site Map?
- A footprint showing how each page relate to the web's hierarchy.
- Organized features based on navigation.
- Revised cart sorting based on journey map (opportunities).
- Bold the main features

Fig.1.1.9 Site Map Example / (Week 8,12/11/2025)

WEEK 9 / 19/11/2025

This week, we did a 1 seconds & crazy 8s sketching activities using pen and paper (Fig.1.1.10). Then, we sketched our own app and the wireframes (6 frames) as well (Fig.1.1.11).

Things to do:
- Sketches
- Create references (Pinterest.com / Mobbin.com Folder)
- Create Wireframes (min 6)

Fig.1.1.10 One second drawing / (Week 9, 19/11/2025)

Fig.1.1.11 Crazy 8s & 6 wireframes / (Week 9, 19/11/2025)

- KEY NOTES -

Wireframes
- Linked Sketches
- Colour for Interaction
- As little text as possible
- Add notes
References:
- Pinterest
- Mobbin
- Product hunt
- Dribble
- Behance

TAP ME BACK TO TOP

INSTRUCTIONS

Fig.2.1.1 Module Information Booklet

TAP ME BACK TO TOP

PROJECT 2: UI/UX DESIGN DOCUMENT

Description:

In Project 2, we were conducting user research to better understand the users needs, behaviors, and real-life experiences for our app.

Requirements:

1. Card sorting - features

Collect all features from:
- Current app you're working own
- Competitors apps
- Left field
*Create post-it notes with the features, 1 post it per feature, for easier grouping.
*Features can be essential to your service (select clothes) or boring but has to be there (account creation).

2. Live interview questions

Every interview should be max 15 minutes
3-5 interviews. Use AI transcripts to write down the audio summary
*Try to identify open questions that will give you rich, surprising answers.
*The aim is to get lived experience and insights we don't expect.
Some example of questions cover:
- extremes, like best or worst experience
- first and latest experience (and the gap in between)
- feelings and impressions

3. Online Survey

Max 10 questions
20+ participants
*Find insights, not get averages and statistics!
*Think about the questions you can't ask live, or would make people uncomfortable to answer on camera.
*What are the insights we can get from a group of anonymous users rather than individuals?

*Remember that all questions are about finding more about the potential users of your new app!

What is useful for us to know? What do we assume? What are we missing? How can the users surprise us with their answer?

Live Interview Questions Demo
- Week 5 (22/10/2025) -

Demo Live Interview Questions (in class with partners) / Week 5:

1. Which food delivery or restaurant apps do you normally use?

Grab; Food Panda

2. Why do you choose to order using an online delivery app instead of going physically?

It's more convenient; traffic hour; the store is far away

3. What do you find convenient or enjoyable about the apps you use?

It has multiple options; provide vouchers; show eta time

4. What usually makes you stop or cancel an order before completing it?

The orders delay

5. If Subway Malaysia had its own official app, would you consider using it? Why or why not?

Yes, as we no need to queue

6. How would you feel about a feature that lets you preview your sandwich in 3D or AR before ordering?

It's much easier to choose; we can know the ingredients

9. When you customize a Subway sandwich, do you prefer choosing in-store (where you can see the ingredients physically), or would you find it helpful if an app showed you the sandwich visually in AR before ordering? Why?

Depends, if I use delivery app then I prefer AR, if I'm in-store, then I choose in-store.

I prefer AR if I wanted to try new ingredients.

Card Sorting

- Week 5 -

View in FigJam: [click here]

Fig.3.1.1 Card Sorting / (Week 5, 23/10/2025)

For the card sorting, I used FigJam to organize and prioritize potential features. I began by collecting features from three sources: the current version of my app (Subway MY), competitor apps, and “left field”.

Live Interview Questions

- Week 6 -

Fig.3.1.2 Interview Questions / (Week 6, 30/10/2025)

Before conducting the interviews, I first identified what I needed to learn from users, not just what they do, but how they feel, what problems they face, and what motivates their choices when ordering food.

Since Mr. Sylvain advised not to ask directly about “Subway” or “apps”, so I designed open-ended, story-based questions to explore users’ natural food-ordering habits.

Type of questions I prepared:

Real experience
Feelings & Behavior
Food choice & patterns
Problem & frustrations
AR technology suggestions

Fig.3.1.3 Interviewee / (Week 6, 2/11/2025)

Click here to access Interview File: [click here]

I interviewed 5 people, basically most of them are my friends, 3 males and 2 females. The interview lasted about 10-15 minutes, and was done by face-to-face. I recorded the audio and above is the audio transcript (Fig.3.1.3). After all interviews, I reviewed the transcripts and pulled short insight statements. Each one was written as one post-it note for affinity mapping.

Fig.3.1.4 Affinity Mapping / (Week 6, 2/11/2025)

Categories:

Convenience & Speed
Food quality & Expectations
Customization & Choice
Decision factors & Ordering behaviors
Frustrations
AR technology trust
Promotion
Payment preferences & Issues

Online Survey

- Week 6 -

Fig.3.1.5 Online Survey / (Week 6, 31/10/2025)

To understand user behaviors and expectations for food ordering apps, I created an online survey question through Google Form. My goal was to gather insights about how people interact with these apps, what frustrations they face, and how new features, especially an AR preview feature, could improve their experience.

How I created my questions?

I designed them based on three areas I wanted to explore:

1. User Demographics
To understand who my users are and whether age, lifestyle, or gender might influence their digital habits.

2. Current Food Ordering Behavior
To learn which apps they use, how they order food, what factors influence their choices, and what pain points they commonly face.

3. User Expectations & Openness to New Features ( AR)
To explore how users feel about AR in food apps, whether they find customization confusing, and whether an AR preview could help.

Fig.3.1.6 Responses collected / (Week 7, 5/11/2025)

User Persona & Journey Map

- Week 7 -

Fig.3.1.7 User Personas / (Week 7, 6/11/2025)

After gather all the data, I need to understand the target users’ behavior, needs, frustrations, and goals when using the Subway app. A user persona should included:

- Name & face
- Goals
- Needs
- Pain Points
- Social anchors
- Relevant anchors

Then, I moved on to create THREE persona (x1 primary, x2 secondary):

1. Jun Hui (Primary)

- University student balancing classes and part-time work; values fast service and convenience.

2. Jing Yee (Secondary)

- Busy accountant; prioritizes quality, freshness, and premium experience.

3. Rajesh (Secondary)

- College student on a budget; looks for deals and transparency when ordering food.

Fig.3.1.8 User Journey Map / (Week 7, 8/11/2025)

After developing the user personas, I created a journey map for each one to visualize their experience and interaction with the food ordering process.

Revised Cart Sorting & User Flow & Site Map

- Week 8 -

Fig.3.1.9 Revised Cart Sorting (Red Notes) / (Week 8, 12/11/2025)

I revised the original card sorting of the Subway app features based on the user persona’s needs and the identified opportunities for improvement. In the new version, I added some new features, which is the red notes (Fig.3.1.7).

New features added:

Menu photos & Short Descriptions
Calorie Count
Rating & Review Page
Save favorite meal
Store Pickup Instruction
Estimated Delivery Time Display
Order Progress & Pickup Status
Transparent Price
Personalized Deals / Suggested Meals

Fig.3.1.10 User Flow Process / (Week 8, 12/11/2025)

Click here to access FigJam file: [here]

After revised cart sorting, I started to work on the user flow of ordering Subway MY App. The user flow begin from opening the app and choosing to log in or continue as a guest, followed by selecting service type (pickup or delivery) and identifying the nearest store. Users then decide what meal they want, choose between preset suggestions or customization, and optionally preview their sandwich in AR before selecting bread, meat, cheese, toppings, and sauces. After adding items and extras to the cart, the user proceeds to checkout where they can apply vouchers, select payment methods, and confirm their order. The flow ends with real-time order tracking for both pickup and delivery, and a final step where users can leave a review and save their favourite order before returning to the homepage.

Fig.3.1.11 User Flow Process / (Week 8, 13/11/2025)

After that, I continued working on Site Map, where I organized the features based on navigation. Compared to the original Subway Trinidad App, the new Subway MY App included new features:

Preview their sandwich in AR before adding it to the cart.
Helps users visualize ingredients, size, and customization in a realistic way.
More detailed order tracking & Estimated time.
Save favourite order feature.
Review & Rating feature.

Figma File

Click [here] to access FigJam File

Presentation Slides

- Week 9 -

AD1-task2

Click [here] to access to Canva

Fig.3.1.12 UI/UX Document - PDF / (Week 9, 20/11/2025)

TAP ME BACK TO TOP

FEEDBACK

Week 6 / (29/10/2025)

Specific Feedback: Try not to ask them about "Subway" and an "App", change it to "sandwich" instead, avoid leading the user toward Subway or app-based assumptions. You can ask them about real past experiences, motivations, and preferences, which is good. Try to start with broad lifestyle or food-choice questions.

TAP ME BACK TO TOP

REFLECTION

Experiences:

Throughout this project, I learned the importance of doing proper research before starting any redesign. In the beginning, I thought redesigning a prototype was mainly about visual improvements, but I realized that understanding user needs is the most important part. I also gained experience in creating survey questions such as learning what to ask, what to avoid, and how to make the questions meaningful and useful for my design direction. During in-class activities, working in groups helped me understand the process better because I could hear different perspectives and discuss ideas with my classmates. Overall, the experience made the learning process more practical and clear.

Observation:

I observed that the design process becomes much easier when the foundation is strong. When we did research, created personas, and studied user behaviors, it helped me see the further directions of what should I do in the next steps. I also noticed that collaborating with others in class activities helped me identify blind spots and think more critically.

Findings:

From this project, I think that a good application needs to improve its usability, clarity, and the overall experience. I learned that research, survey planning, persona creation, and journey mapping all work together to guide design decisions. I also realized that designing a prototype requires attention to details, and strong reasoning behind every feature. This project helped me understand the full UX process more clearly and made me more clearly of what to do in future UI/UX design prototype.

TAP ME BACK TO TOP

Thanks for reading me~

Aricia Man Yi Xuan (0375026)

Search This Blog