Labels

Application Design 1 / Project 3: Low-Fi App Design Prototype

2024.12.02 - 2025.01.10 Week 11 - Week 15

Teh Ming En/0364908

Application Design 1-Bachelor of Design (Honours) in Creative Media--Taylors University

Project 3: Low-Fi App Design Prototype

Instructions


Project 3: Low-Fi App Design Prototype

For this task, we are required to create a low-fidelity prototype of our chosen mobile application using Figma. This prototype will include wireframes and a visual design concept consistent with the app's branding. The goal is to test and validate the user flow and experience before going to high-fidelity prototypes. After completing the prototype, we need to conduct usability testing to collect the feedback and suggestions for the prototype.

UI Kit & Plug-in Tools

I have downloaded a set icon design for the prototype from the Figma community. After that, I created the UI kit for the prototype which includes typography, color scheme,  and icon design. Besides that, I also used plug-in tools such as ColorZilla and WhatFont to identify the color and font from the brand.
Fig 1.1 UI Kit

Fog 1.2 Using ColorZilla

Reference

I have downloaded other shopping apps when started doing project one. I have selected a few examples that I think can be used as references, such as Shopee and Banggood. Mr. Zeon suggested me can go to Behance's website to find more references and inspiration.

Fig 1.3 Reference

Process


Fig 2.1 Starting & Register Pages

After choosing the screen size and setting the margins, I started working on the start page and the signup page.

Fig 2.2 Version 1 UI Design

Initially, I designed the app to be more generic, to look like a traditional shopping app. Not too different from the original.

Fig 2.3 Version 2 UI Design

After Mr. Zeon's suggestion, I looked for more inspiration and references on the Internet. I tried to make this app simple but not lose its modern feel.


Fig 2.4 Drawing Icons / Buttons
In addition to the icons in the UI kit, I also drew some icons or buttons in illustrator and imported them into figma for use in the application.

Fig 2.5 Prototype Flow in Figma

After designing the layout of everything, I started to design the interaction between each page.

Low-Fi Prototype

Fig 3.1 Onboarding Pages

Fig 3.2 Loading, Register, Log In & Verification Pages

Fig 3.3 Home & Search Pages

Fig 3.4 Filter Pages
Fig 3.5 Product Details & Selection Pages

Fig 3.6 Cart Pages 

Fig 3.7 Vouchers & Category Pages

Fig 3.8 Checkout Process Pages - A

Fig 3.9 Checkout Process Pages - B

Fig 3.10 S-Coin Center Pages

Fig 3.11 Notification Pages

Fig 3.12 Profile, Tracking & Setting Pages

Fig 3.13 Overall Low-Fi Prototype


User Testing

We need to conduct usability testing using a low-fidelity prototype with three user scenarios. Each participant will be assigned one scenario and provided with written instructions. The testing will involve participants interacting with the prototype on my computer while screen recordings capture their sessions. The feedback will be collected through guided questions and used to refine the wireframes. I have conducted this test offline, with users used my computer to test the prototype and I recorded the screen to complete the test.

Fig 4.1 Low-Fi User Testing Video

Low-Fi Youtube Link: https://youtu.be/tefC66L1Kk0

User One: Yi Shim
Scenario:
You are a new user. Imagine you have just downloaded the app, you have to register as a Senheng app user. Then proceed with a normal shopping process. Your tasks include:

  • Claiming a voucher,
  • Applying the filter function when searching products,
  • Adding a product to the cart,
  • Applying the voucher at the checkout page,
  • Selecting a payment method and place the order.

User Two: Rachel
Scenario:
You are a loyal Senheng app user. Imagine you plan to redeem free items using your accumulated S-Coins today. Your tasks include:

  • Log in to the app and go to the S-Coin Centre,
  • Go to the products searching page and search,
  • In the products details page, redeem the product directly,
  • Go to checkout and select a payment method.
  • Place the order.

User Three: Joanna
Scenario:
You are a Senheng app user. Imagine you have already placed an order through the app. Today, you are doing the daily routine on the Senheng app. You can explore the app then complete the task. Your tasks include:
  • Log in to the app,
  • Complete the daily check-in, 
  • Check messages in the notification center, 
  • Check your order status in the app.
User Feedback

Fig 4.2 Feedback For Each User Scenario

After refining the prototype based on the user feedback, I came up with the final outcome.

Final Outcome

Fig 5.1 Low-Fi Prototype Demonstrating Video


Figma File:
Fig 5.2 Low-Fi App Design


Prototype:
Fig 5.3 Low-Fi App Design Prototype


Feedback

Week 11:
  • You can find more inspiration or references online using the Behance website.
  • I was suggested to add the onboarding page before entering the main page.

Week 12: 
  • Adjust curved details in each page.
  • Determine what the user needs to do in the scene.

Reflections

In Project 3, I should say the process was enlightening and challenging. Initially, I felt excited as this project allowed me to bring ideas to life in a structured way. However, as I delved deeper into the process, I quickly realized that it was not as simple as I thought. Every decision about layout, user flow, and functionality required a lot of thought and refinement. While each adjustment needs a time, but it brought the design closer to a better and user-friendly structure.

Despite the difficulties, the process offered valuable lessons. I gained deeper insights into user-centered design principles and the importance of feedback. Although the final low-fidelity prototype may not be perfect, it represents an important step in my learning journey.


Labels:

Comments

Post a Comment