Application Design: Project 3

-

1/12/2024 - 10/1/2025 (Week 10 - Week 14) 

Lim Yu Xuen / 0359676 

Application Design 1 / Bachelors of Design (Hons) in Creative Media / Taylor's University

Project 3: Lo-Fi App Design Prototype

TABLE OF CONTENTS

INSTRUCTIONS

Find out other information about this module below

Module Information

LECTURES

Week 11 — Lecture
Wireframe, UI Kit & User Testing

This week, we were briefed with Project 3: Lo-Fi App Design Prototype. Our first task is to choose a UI Kit that includes our design's typography, color palette, and iconography. Once the UI Kit is finalized, we will begin creating the Low-Fidelity Prototype using black, grey, and white colors. We were tasked to create 3 scenarios for users to test and provide feedback, with compulsory recording. After receiving feedback from the users, we can analyze it and make further improvements to our lo-fi app design prototype. After we are done with the lo-fi app design prototype, we can proceed with the high-fidelity prototype. The deadline given will be extended to 10th January 2025.

Week 12 — Lecture
Design essentials for user interface

During this week, we learned the basics of UI design, focusing on how to effectively use colour and typography to create visually appealing and user-friendly designs. We also learned how to select a dominant colour, build a colour palette, and apply monochromatic, analogous, complementary or triadic schemes. The 60/30/10 rule was a handy guide to ensure colours are balanced and serve their purpose in a design. We also learnt that gradients can make designs more dynamic and engaging. 

Colour Matching Platform: Colour Shades Finder
References: Mobbin

PROJECT 3: LO-FI APP DESIGN PROTOTYPE

Task Requirements
  • Once the UX design process is completed, can now create a low fidelity prototype of the app. We needs to arrange all the screen wireframes, actions, visual feedback and link them up in Adobe XD/ Figma/ Invision Studio or any other prototype software’s.
  • We are then required to perform usability testing whereby they will invite guests to test out their low fidelity prototype and gather all the information, response, feedback, pain points observed from the test. 
  • We need to document this process with video and produce a document containing detail analysis of this task and the solutions to the problems faced by the testers.
Things to include for this task

1. Visual Design Concept
  • Develop a visual concept that aligns with the branding of your application. This concept should include color schemes, typography, and imagery that convey the desired look and feel of your application. 
2. Wireframes
  • Create wireframes of the screens for your mobile application. These wireframes should illustrate the layout and content of each screen, including the navigation and interaction elements. You should use tools such as Figma, or Adobe XD to create these wireframes.
3. Usability Testing
  • Conduct usability testing on your low-fidelity prototype to validate the user flow and user experience. You can recruit friends, family, or classmates to test your prototype and provide feedback. Make sure to document the feedback and use it to iterate on your design.
4. Deliverables
  • Submit a digital document that includes your low-fidelity prototype, wireframes, and visual design concept. Also, include a brief summary of your usability testing results and how you used them to refine your design in your e-portfolio
1. UI Kit
Before I start my lo-fidelity prototype, I developed a UI Kit that includes a color scheme, typography, iconography, and grid system on the first page. I have total of 3 pages, UI Kit, low-fidelity prototype, and final design (high-fidelity).

Figure 3.1 UI Kit

Figure 3.2 Pages

2. References

I downloaded several e-commerce apps and looked around online for reviews or remakes of the Temu app to start. Some of the apps i referenced for inspo are: Shopee, Lazada, Shein, Taobao, and Amazon. Each app has quite a similar layout but they have it's own special features that makes each app stands out. Attached below are the homescreen of each app for reference.

Figure 3.3 References


3. Design Process

After looking through e-commerce apps and getting used to the layout and functions I have to include for Temu. I had a rough idea on how the Temu app should be redesigned. With the help from the comments from my previous research for project 1 and 2, I was able to note down a few features and important functions and design criterias that users prefer for an e-commerce app.

Figure 3.4 Design Process


4. Low-fidelity prototype

Attached below includes all wireframes for my redesign of the Temu app. I have seperated them into different sections:
  • On boarding & Login Page
Figure 3.5 On boarding & Login Page

  • Homepage, Messages, Vouchers, Cart
Figure 3.6 Homepage, Messages, Vouchers, Cart

  • Product Page & Order Details
Figure 3.7 Product Page & Order Details

  • Wishlist, Free Gifts, & Credits
Figure 3.8 Wishlist, Free Gifts, & Credits

  • Profile
Figure 3.9 Profile

  • Search Bar & Filter
Figure 3.10 Search Bar & Filter

  • Checkout, Payment Methods, Placed Orders
Figure 3.11 Checkout, Payment Methods, Placed Orders

  • Prototype (Overall)
Figure 3.12 Prototype

After completing all 3 scenarios' prototype, I made sure to try it myself to double check if all the links and buttons are working before proceeding with user testing.


5. User Testing

To conduct usability testing, we need to have low-fidelity prototype ready with 3 user scenarios (Specific actions want the users to take, such as checkout account balance and transaction history). I provided written instructions for each scenario to help users understand it better. After that, I recruited 3 participants, and allow them to try out all 3 scenarios. I conducted the usability testing physically with my laptop with me, as it will fasten the process as I have all the files and links with me. I prepared a set of questions to ask the users to receive feedback, and collected them in a Google Doc for ease of access when needed.

Scenario / Flow 1

Figure 3.13 Scenario 1

- Browse, Purchase & Checkout

Imagine you need to buy a product through the Temu app.
  • From homepage, scroll through and click on any listings.
  • Browse listing details and add to cart.
  • Proceed to checkout and successfully placed an order.

Scenario / Flow 2

Figure 3.14 Scenario 2

- Claim voucher and checkout using voucher

Imagine you want to checkout a product with use of voucher.
  • Browse homepage to look for Vouchers
  • Claim Voucher & Use Now
  • Proceed to Checkout
  • Choose voucher to apply
  • Place order

Scenario / Flow 3

Figure 3.15 Scenario 3

- Track order & Leave Review

Imagine you bought a product and would like to track the order, you received the order and would like to place a review.
  • From My Orders page
  • Press track order to view tracker
  • Press order received or go to Completed tab
  • Press rate
  • Leave a review

Since I conducted the user testing physically, I allowed the users to try all 3 scenarios before questioning them for their feedback, this allows them to take their time and understand the prototype better, rather than rushing into completing it. 

Recordings:

Figure 3.16 Usability Testing - Recordings

User Feedback:

Figure 3.17 Usability Testing - User Feedback


Summary of feedback for Low-Fi Prototypes
  • More clickable buttons (group the text and button shape together), to allow easy clicking, with good amount of space.
  • Some buttons are not linked, need to fix on that.
  • The side scroll effect is not obvious for categories, maybe add an indicator that it is scrollable.
  • Since user testing was done on laptop, users are unable to tell if buttons and font sizes are good enough in terms of readability.

FINAL SUBMISSION

Demonstrating video:
  • Click HERE to watch the video
Figure 4.1 Lo-Fi App Design Demonstration Video


View on Figma:
  • Click HERE to view Project 3 File
Figure 4.2 Lo-Fi App Design File on Figma

View prototype (Scenarios):
  • Click HERE to view Prototype with 3 Scenarios
Figure 4.3 Lo-Fi App Design Prototype

REFLECTIONS


For this project, it was very difficult for me to start as I did not have the motivation to learn and try Figma. However, after going through a few tutorials, I was able to understand the basics. From then onwards, I tried redesigning the prototype multiple times until I liked the results. However, since I started late, I was not able to show to Mr Zeon my progress every week. But I did take note of every feedback he gave me as it guided me with making further adjustments to improve my redesign of the app Temu. 

Overall, the task that took the longest to complete was figuring out how Figma works and to start designing the UI of the app. I had multiple references for me to go through, and tried different shapes and sizes to make the app look put together. After completing this part, I made sure to show the progress to Mr Zeon, as well as a few friends who uses the app Temu. It helped me understand the user preferences better. After that, I did the user testing quite last minute on the same day during cheer practices, and asked many of my teammates to take a look at my prototype for any commendable feedback. In the end, I made some changes and made sure all links and icons are working in the prototype, before submitting and proceeding to my final project.

←                 ↑                   →
     project 2                                     top                                      final project