Application Design I | Project 3 : Lo-Fi App Design Prototype
2 July 2025 - 16 July 2025 (Week 11 - Week 13)
Chan Xiang Lam | 0358400
Application Design I | Bachelor of Design (Honours) in Creative Media
Project 3 | Lo-Fi App Design Prototype
TABLE CONTENT
1. Instructions
2. Project 3 | Lo-Fi App Design
Prototype
3. Reflections
INSTRUCTIONS
PROJECT 3
Project 3 | Lo-Fi App Design Prototype
INSTRUCTION:
After finalizing the UX design,begin developing a low-fidelity prototype of the app. Arrange all
screen wireframes, define interactions, and apply basic visual
feedback using a prototyping tool such as Figma, Adobe XD, or
InVision Studio.
Proceed with usability testing by inviting users to interact
with the prototype. Observe their behavior, gather feedback,
and identify pain points or confusion during the process.
Document the entire testing session with video, and create a
detailed analysis that outlines the findings, issues
encountered, and proposed solutions to improve the user
experience.
1. Visual References
To begin the lo-fi prototype process, I collected visual
references from Pinterest, focusing on fashion shopping
apps. These references helped define the overall layout
direction, navigation structure, and styling elements. They
served as inspiration before moving into the sketching
phase.
Fig.3.1 Visual references collected from Pinterest
2. Sketches
I created initial sketches of the key app screens. These
sketches helped structure the basic wireframe layout and
prioritize the core features before starting the digital
prototype.
Fig.3.2 Sketches
3. Design Process
After organizing the layout ideas through sketches, I used
Figma to create the low-fidelity wireframes of the MANGO
fashion app. This prototype focuses on key functions without
any visual styling — just structure and interaction.
- Onboarding & Account Setup
Fig.3.3 Onboarding & Account Setup page
- Home Screen & AI Stylist & Closet
Fig.3.4 Home Screen & AI Stylist & Closet Pages
- Search & Filters & Product Detail & Checkout & Cart
The Search page allows users to explore products by
keywords or browse curated sections such as "Trending" and
"New Arrival." Filter options like category and occasion
help users narrow down results quickly.
In the Product List and Product Detail pages, users can
view product images, prices, sizes, and available colors.
The product page also includes recommendations and a
wishlist button for future reference.
The Checkout Process starts once a product is added to the
cart. Users are guided through selecting delivery options,
entering promo codes, and choosing a payment method such
as credit card, wallet, or cash on delivery. A
confirmation screen appears after payment, and the cart is
updated accordingly.
This flow is designed to be smooth, minimal, and
user-friendly — allowing users to shop efficiently from
search to payment.
Fig.3.5 Search & Filters & Product Detail &
Checkout Pages
- Category & Wishlist & Profile
The Category page displays product sections such as
Women, Men, Kids, and Accessories in a clean, scrollable
layout. Users can tap on a category to explore related
items or use the search bar at the top for quick access
to specific products.
The Wishlist page presents a grid of favorited items,
allowing users to easily revisit and purchase saved
products. A search function is included to help filter
and manage wishlisted content efficiently.
The Profile page acts as a central hub for managing
personal preferences and account activity. It includes
access to features such as order history, saved outfits,
payment methods, app settings, and customer
support—giving users full control over their shopping
experience.
Fig.3.6 Category & Wishlist & Profile Pages
4. Completed Low-Fidelity App
Design Prototype
Below are the full-screen captures of the finalized low-fidelity
prototype flow overview created in Figma.
Fig.3.7 Low-Fi Prototype User Flow Overview
5. User Testing
User 1 - Kelly
Kelly found browsing generally okay but mentioned that filter and sorting options were not immediately obvious. She suggested making important features more visible and product images larger for better detail viewing. Rated the app 3.5/5, noting the clean layout but small usability issues.
Fig.3.8 User Testing # 1
User 2 - Yik Kah
Yik Kah said browsing was fine but almost missed the filter button because it blended into the interface. Suggested making main action buttons more prominent and increasing price text size for better visibility. Rated the app 3/5, describing the experience as pleasant overall.
Sophia experienced smooth browsing but had to scroll back a lot to find previously viewed products. She suggested adding a “recently viewed” section and increasing price text size. Rated the app 4/5, appreciating its clean and simple design.
Fig.3.10 User Testing # 3
FINAL OUTCOME
Video Walkthrough:
Fig.3.11 Video Walkthrough - MANGO
Figma Link:
Fig.3.12 Figma File- Low-Fidelity Prototype
Prototype Link:
Fig.3.13 Low-Fidelity Prototype
REFLECTION
Working on the low-fidelity prototype was a turning point where I began to truly understand how structure, layout, and user flow shape the overall user experience. By focusing on functionality over visuals, I was able to translate user needs into meaningful wireframes that addressed core problems in a clear and practical way.
This process helped me improve my design thinking, especially in areas like user journey mapping and flow logic. I also learned the importance of keeping components consistent, which I applied using a simple UI Kit.
Overall, this stage gave me a strong foundation for future high-fidelity design work and reinforced the idea that great design starts with solving the right problems — not just making things look good.
.jpg)
Comments
Post a Comment