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

21 May 2025 - 2 July 2025 | ( Week 5 - Week 11 )

Chan Xiang Lam | 0358400 

Application Design I | Bachelor of Design (Honours) in Creative Media 

Project 2 | UI/UX Design Document

---

TABLE CONTENT   

    1. Instructions

    2. Project 2 | UI/UX Design Document   

    3. Feedbacks

    4. Reflections

    5. Submission

---

INSTRUCTIONS

---

PROJECT 2

Project 2 | UI/UX Design Document

INSTRUCTION:

Following the completion of Task 1, where we defined our app concept and goals, we now move into the UX design phase. This stage focuses on transforming user research into actionable design strategies, ensuring that the app is user-centered, functional, and engaging.

The objective of this phase is to develop a comprehensive UX design document that outlines the foundation for our app’s design direction. This includes:

• Defining our target users
• Gathering insights through qualitative research (e.g., interviews)
• Prioritizing core features based on user needs
• Designing intuitive user flows and low-fidelity wireframes

By grounding our design process in authentic user data, we aim to address user needs, pain points, and preferences, ultimately creating a mobile experience that supports language learning in a flexible and effective way.

Research Objective

To explore how users interact with fashion shopping apps (including MANGO), uncover pain points in the current experience, and discover what features could enhance convenience, engagement, and personal expression.

Interview Questions Structure

• Section A: Warm-Up & Context
• Section B: Shopping Preferences
• Section C: App Usage (MANGO or Competitors)
• Section D: Final Thoughts

Fig.2.1 Interview Questions

Target Interviewees

Young adults aged 20–27, consisting of university students, interns, creative freelancers, and office workers. Most are regular online shoppers who use fashion apps such as MANGO, ZALORA, SHEIN, and UNIQLO. Their shopping is typically mobile-first, style-driven, and influenced by price, visuals, and local payment convenience.

Fig.2.2 Interview Transcripts

Key Insights from Interviews

• Many users get lost in navigation and prefer clear text with icons.
• Outfit inspiration is highly sought after — users want help matching items.
• Some feel overwhelmed by long product pages with no quick-return button.
• There is strong interest in a wardrobe-like feature to track owned/saved items.
• Payment limitations (especially for local users) lead to abandoned carts.

User Personas & User Journey Map

To better understand the needs and goals of fashion shoppers, I created three user personas derived from interview insights. These personas help guide the redesign decisions by highlighting distinct behaviors and frustrations.

    My 3 User Personas:

      1. Amanda Liu – Office worker needing polished daily outfits without hassle

Fig.2.3 Amanda Liu's user persona

Fig.2.4 Amanda Liu's user journey map

      2. Farah Ismail – Fashion-forward student exploring expressive trends

Fig.2.5 Farah Ismail's user persona

Fig.2.6 Farah Ismail's user journey map

      3. Kevin Chong – Freelance photographer looking for smart outfit pairings

Fig.2.7 Kevin Chong's user persona

Fig.2.8 Kevin Chong's user journey map

Each persona is supported by a User Journey Map to visualize their shopping experience through key stages: Trigger, Explore, Evaluate, Decision, and Outcome.

Key Redesign Goals

• Simplify navigation with labeled icons, better structure, and scroll-to-top.
• Enable style-based shopping through AI outfit suggestions.
• Introduce a My Wardrobe (Closet) feature for saved or purchased items.
• Improve search filters (occasion, aesthetic) and browsing.
• Support local checkout options like GrabPay or online banking.

MVP Features Identified

1. AI-Powered Outfit Suggestions – Daily look recommendations based on style history.
2. My Closet – A visual wardrobe to manage and remix purchased/saved items.
3. Improved Navigation UI – Text labels, scroll-to-top, clearer structure.

User Flow Chart

A full user flow chart was developed in Figma to map out user interaction across key app areas:

Fig.2.9 user flow chart

Wireframes

Low-fidelity wireframes illustrate the main user journey from browsing products to completing a purchase.  This includes key screens such as the Home, Product Pages, Checkout, and Order Confirmation.

Fig.2.10 Wireframes  – Product Purchase Journey

Submission

Canva Slides

Click HERE to view my Task 2 |  UI/UX Design Document on Canva Slides :

Fig.2.11  Task 2 |  UI/UX Design Document

FigJam

Click HERE to view my FigJam board :

Fig.2.12  Task 2 | FigJam board

---

REFLECTION

Through Task 2, I gained a deeper understanding of the UX design process—especially how to translate user research into practical design decisions. By conducting interviews, I was able to uncover real frustrations and expectations from users, which helped guide my redesign priorities. Creating user personas and journey maps allowed me to empathize with different user needs and plan meaningful improvements. Building the wireframes helped me focus on layout clarity, feature placement, and user flow. This task strengthened my ability to balance user goals with business needs, and it has prepared me to move forward confidently into high-fidelity design in the next stage.