Application Design I | Final Project : High Fidelity App Design Prototype

23 July 2025 - 6 August 2025 (Week 14 - Week 16)

Chan Xiang Lam | 0358400 

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

Final Project |  High Fidelity App Design Prototype

---

TABLE CONTENT   

    1. Instructions

    2. Final Project | Completed Mobile Application Design Prototype

    3. Reflections

---

INSTRUCTIONS

---

FINAL PROJECT

Final Project | Completed Mobile Application Design Prototype

INSTRUCTION:

• Finalize and polish your mobile app design using work from Task 1–3.
• Create a high-fidelity, interactive prototype with full user flow.
• Refine all visual elements (colors, fonts, icons, layout).
• Ensure it works smoothly and is ready to present/demo.

Problem Statement

This project focuses on redesigning the MANGO app to solve key user experience issues, including confusing navigation, basic search functions, and lack of local payment options. The goal is to create a more intuitive, efficient, and personalized shopping experience tailored to the needs of modern mobile fashion shoppers.

Hi-fi App Design Prototype Progress

I began with low-fidelity wireframes in Figma, focusing on structure, layout, and functionality without visual distractions. I conducted quick usability testing with peers, which revealed issues such as unclear category navigation and missing search filters. These were addressed before moving to the high-fidelity stage. 

    1. UI Kit

Before designing the hi-fi prototype, I created a UI Kit in Figma to maintain consistency across screens.

• Typography: Montserrat – clean, modern, and easy to read
• Color Palette: Neutral tones with subtle accents, inspired by MANGO’s brand identity
• Iconography: Minimalist line icons for a sleek look

This kit served as the visual foundation for all screens.

Fig.4.1 MANGO logo

Fig.4.2 ColorPalette

Fig.4.3 Typography

Fig.4.4 Iconography

    2. High-Fidelity Prototype

Using the UI Kit, I redesigned pages with improved visual hierarchy, spacing, and interactions. The hi-fi prototype included:

• Onboarding & Account Setup

Users begin by creating an account and customizing their experience through a short onboarding process, selecting style preferences, item types, and occasions. This allows the app to offer personalized recommendations right from the start.

Fig.4.5 Onboarding & Account Setup

• Home & AI Stylist 

The Home screen showcases new arrivals, trending picks, and seasonal collections. The AI Stylist generates complete outfit suggestions based on the user’s selected occasion, style, and source (Closet or New).

Fig.4.6 Home & AI Stylist 

• Product & Filter

Filtering options allow users to refine results by category, color, price range, and occasion, while product listings display clear images, names, prices, and ratings for quick decision-making. Users can view detailed product info, select size and color, and add items to the cart. 

Fig.4.7 Product & Filter

• Cart & Checkout

The checkout flow is smooth with multiple payment options, ending in a confirmation screen and purchase summary.

Fig.4.8 Product Detail & Cart & Checkout

• Closet & Feed

The Closet organizes items into My Clothes and My Outfits with tools for adding, archiving, or creating looks. The Feed offers outfit inspiration in Trending and Latest categories.

Fig.4.9 Closet & Feed

• Search & Category & Wishlist & Profile

The search and category features help users find products efficiently with filters like color, price, and occasion. Items can be saved to the Wishlist for later. The Profile section provides account access, order tracking, and app settings, offering a fully personalized user experience.

Fig.4.10 Search & Category & Wishlist & Profile

    

    3. Usability Testing

User 1 - Kelly

Kelly found browsing smooth and straightforward, with no difficulty locating products on the homepage. She described the layout as clear, well-structured, and easy to navigate. Rated the app 4/5 for delivering a pleasant and intuitive experience, with no further improvement suggestions.

Fig.4.11  User Testing # 1

User 2 - Sophia

Sophia said browsing was very easy and particularly liked the “Recently Viewed” section for quick access to previously checked products. She felt navigation was more efficient than before. Rated the app 4.7/5, calling it a big improvement in usability and convenience, and had no suggestions for changes.

Fig.4.12  User Testing # 2

User 3 - Vivien

Vivien described the app as very easy to use, even for first-time users, with a clear and well-organized homepage layout. She found products quickly, and the category structure simplified browsing. Rated the app 4.5/5 for being user-friendly and visually appealing, with no improvement suggestions.

Fig.4.13  User Testing # 3

    4. Monetization Method

The app follows a freemium model. The Free Tier offers browsing, AI Stylist, Closet, and Wishlist access with local payment options and occasional ads. The Premium Plan removes ads, unlocks exclusive outfits, offers early access to drops, includes a Weekly Outfit Planner, and provides member discounts and perks.

    5. Completed Hi-fi App Design Prototype
Below are the final high-fidelity screens created in Figma for the redesigned MANGO fashion shopping app.

Fig.4. Full Hi-Fi Prototype in Figma

Fig.4. Overall Prototype Flow

FINAL OUTCOME

Video Walkthrough:

Fig.4.  Video Walkthrough - MANGO 

Figma Link: 

Fig.4.  Figma File- High-Fidelity Prototype 

Prototype Link: 

Fig.4.  High-Fidelity Prototype 

---

REFLECTION

Developing the high-fidelity prototype for the MANGO app redesign allowed me to translate earlier research findings and Lo-Fi feedback into a refined, visually cohesive, and user-friendly interface. The process involved integrating brand-aligned visual elements from the UI Kit, enhancing navigation clarity, and introducing key features such as the “Recently Viewed” section to improve user convenience. Usability testing for the Hi-Fi version yielded highly positive results, with participants praising the streamlined navigation, clean layout, and improved feature visibility. Compared to the Lo-Fi stage, the redesign successfully addressed issues related to filter accessibility, text size, and action button prominence. This project strengthened my skills in user-centered design, iterative prototyping, and applying usability feedback to create a functional, engaging shopping experience. It also highlighted the value of continuous testing and refinement in delivering a product that meets both business goals and user needs.