Application Design 1 / Final Project: High-Fi App Design Prototype
Teh Ming En/0364908
Application Design 1-Bachelor of Design (Honours) in Creative Media--Taylors University
Final Project: High-Fi App Design Prototype
Instructions
Final Project: High-Fi App Design Prototype
For the final project, we will develop a high-fidelity prototype of our mobile application. This prototype will show the final visual design, interactions, and functionality. It will provide a realistic representation of the app. It will showcase a polished user interface aligned with the branding and usability principles established during the design process, allowing users to experience and give feedback on the final design.
UI Kit
|
| Fig 1.1 UI Kit |
|
| Fig 1.2 Grid Systems |
For the UI Kit, I chose to use the same one as the low-fi prototype. In
terms of color tones, I chose to stick with the main colors of the Senheng
app, which are red, white, and green. Additionally, I used dark yellow,
light yellow, and light green as the secondary colors. I used the ColorZilla
plugin to identify the colors on the Senheng website.
|
| Fig 1.2 Senheng Icon |
Process
|
| Fig 2.1 Editing Elements |
When I first started, I was looking for suitable materials on Canva to be used as part of my onboarding page design. After finding suitable materials, I edited their colors to mainly red, white, green, and yellow, and added Senheng's unique ‘S’ logo.
|
| Fig 2.2 Onboarding Pages Design |
Fg 2.3 Loading Sign
|
| Fig 2,4 Creating Loading Sign |
After that, I created the loading sign for part of the pages that were needed
such as the Start page, and Order Placed page.
|
| Fig 2.5 Creating Banner Ads |
I also created some auto-play banner ads for the main page and S-Coin center page. In here, I used components in Figma to create them.
|
|
Fig 2.6 Designing Prototype |
|
| Fig 2.7 Product Details Pages |
Fig 2.8 Creating Interaction on the Photo
On the Product Details page, I set the product photos can be interactive
with the user. Users can view more photos of the product by dragging the photo
to the left.
Fig 2.9 Button Interactions
Additionally, I also created interactions on the buttons. For example, after
claiming the voucher, the button will change from green to gray.
Fig 2.10 Category Page
On the category page, I also made interactions for each icon. I used
components to make it so that when the mouse is on the icon, it will appear in
color, and when the mouse leaves, the color will disappear.
|
|
Fig 2.11 Member Card Design |
|
| Fig 2.12 Overall Design |
User Testing
For user testing, similar to Project 3, I have already created three user
scenarios, but I modified them slightly.
Fig 3.1 High-Fi User Testing Video
High-Fi Youtube Link: https://youtu.be/SSyjTXFWc-0
User One: Huey Yee
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 Two: 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:
- Register as a Senheng app user,
- Navigate to the Category page, explore the page briefly, and exit back to the main interface,
- Claim a voucher,
- Apply the filter function when searching for products,
- Add a product to the cart,
- Apply the voucher at the checkout page,
- Select a payment method and 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 performing your daily routine on the Senheng app.
Explore the app briefly and complete the following tasks:
- Log in to the app,
- Click on your Member Card to view its details, then exit back to the main interface,
- Complete the daily check-in,
- Check messages in the notification center,
- Check your order status in the app.
User Feedback
Fig 3.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 4.1 High-Fi Prototype Demonstrating Video
Youtube Link: https://youtu.be/46-XVIxwPqs
Figma File:
Fig 4.2 High-Fi App Design
Prototype:
Fig 4.3 High-Fi App Design Prototype
Feedback
Week 13:
- Change the cyan voucher to a lighter tone.
- The category is better to have a clickable page.
Reflection
Working on the high-fidelity prototype for the Final Project was a fulfilling and enjoyable experience. From the beginning, I felt interested and curious, particularly in exploring the features of Figma. The process began with transforming the low-fidelity into a polished, interactive prototype. This transition was both exciting and challenging. Exploring Figma’s features was like uncovering the treasure. Each discovery makes me feel like a small victory, and I get the opportunity to learn the knowledge and interactivity.
One of the most engaging aspects was designing the interactions. I found this process incredibly fun and interesting, as it allowed me to visualize and test user experiences in real-time. At the same time, I have gained knowledge about interaction design, and my understanding of how these elements contribute to an engaging user experience.
Comments
Post a Comment