Application Design: Final Project

-

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

Final Project: High-Fidelity App Design Prototype

TABLE OF CONTENTS



INSTRUCTIONS

Find out other information about this module below

Module Information

FINAL PROJECT: HIGH-FI APP DESIGN PROTOTYPE

Task Requirements
  • In this final project, we are assigned to create a high-fidelity prototype for our mobile application. This prototype should showcase the final visual design, interactions, and functionality of the application. The high-fidelity prototype will serve as a realistic representation of our application, enabling users to experience and provide feedback on the final design. It should demonstrate a polished and refined user interface that aligns with the branding and usability principles established throughout the design process.
Things to include for this task

1. Visual Design
  • Implement the finalized visual design concept you created in the previous tasks. This includes color schemes, typography, icons, and any other visual elements that contribute to the overall look and feel of the application. Pay attention to details and ensure consistency across all screens.
2. Interactions and Transitions
  • Bring your application to life by incorporating interactive elements and seamless transitions between screens. Use appropriate animations and transitions to enhance the user experience and create a natural flow within the application.
3. Functionality and Navigation
  • Implement the core functionality and navigation of your application. Ensure that all interactive elements are fully functional and behave as expected. This includes buttons, forms, menus, and any other interactive components specific to your application.
4. Content Integration
  • Populate the prototype with realistic content to demonstrate how the application will look and feel with actual data. Use representative content and consider different scenarios to showcase various features and interactions within the application.
5. Usability Testing
  • Conduct usability testing on your high-fidelity prototype to validate the design and gather user feedback. Recruit participants who match your target audience and observe their interactions and feedback. Make note of any usability issues or areas for improvement. Minimum 3 participants for the testing.


    1. UI Kit

    Before I start my high-fidelity prototype, I finalised the colour palette I will be using for my app by making a few final changes. I proceeded with the colour palette that was approved when completing project 3.

    Figure 3.1 UI Kit

    Since I wanted to maintain the same orange tone from the original design of Temu, I decided to go with that orange and a good shade of blue that compliments it. 

    UI Kit for Final Project

    Figure 3.2 Final UI Kit

    2. Design Process

    With the lo-fi prototype, I copy pasted the wireframes into a new page for my App Design. I first started changing the colours of the buttons and icons to the dedicated colour palette. After that, I double check with the sizes of the buttons and the readabiility of each text to make sure the high-fi prototype or so called final app design will be at it's greatest version. During this part, I also made sure each link is working and that its easy to click (by making the buttons bigger).

    Figure 3.3 Design Process

    I also created a splash screen animation to further enhance the user experience.

    Figure 3.4 Splash Screen


    3. High-Fidelity Prototype

    Attached below includes all wireframes for my redesign of the Temu app. I have seperated them into different sections:
    • Splash Screen
    Figure 3.5 Splash Screen

    • Log In & Register
    Figure 3.6 Log In & Register

    • Homepage, Messages, Vouchers, Cart
    Figure 3.7 Homepage, Messages, Vouchers, Cart

    • Product Page & Order Details
    Figure 3.8 Product Page, Order Details

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

    • Profile
    Figure 3.10 Profile

    • Search Bar & Filter
    Figure 3.11 Search Bar & Filter

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

    • Prototype (Overall)
    Figure 3.13 Prototype (Overall)



    4. User Testing

    Moving to the next phase, which is usability testing, similar to task 3, I have created 3 scenarios with detailed descriptions and require users to perform each specific action within the application. 


    Scenario 1: Purchasing a Potato Couch

    Imagine you would like to purchase a potato couch on the Temu app.

    Steps:

    1. from the loading page, log in or sign up.
    2. navigate through the homepage to look for the potato couch listing.
    3. add potato couch into cart.
    4. proceed to checkout and choose a payment method.
    5. pay now to confirm the successful order.

    Figure 3.14 Scenario 1

    Scenario 2: Purchasing a Potato Couch with Free Shipping Voucher

    Imagine you would like to purchase a potato couch on the Temu app, and you would like to save on shipping.

    Steps:

    1. from the homepage, look for the vouchers icon.
    2. claim free shipping voucher and use now.
    3. proceed to checkout.
    4. press on apply button and select a voucher to apply.
    5. proceed to checkout with applied voucher.
    6. successfully placed an order.

    Figure 3.15 Scenario 2

    Scenario 3: Track order and leave a review

    Imagine you want to track your order, you have received the parcel, and would like to leave a review.

    Steps:

    1. from My Orders page, click on track order to check the tracker.
    2. go back and press order received.
    3. press rate and submit a review.
    Figure 3.16 Scenario 3

    Given the time limit, sadly I was not able to record the user testing interviews, as my phone was running out of storage. But I did take note of users' feedback and written them in a document to summarise.

    Summary of feedback for High-fidelity prototype:
    • Colour palette is very attractive, easy to understand the layout and clickable buttons
    • Could make the listing photos bigger
    • The sizes of the text are just nice, but maybe bold some of the texts that is supposed to be more important.

    FINAL SUBMISSION

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


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

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

    REFLECTIONS


    For this project,  I managed to finish up in time as I put in alot of effort into the previous task which is my lo-fidelity prototype. From then, I just had to adjust the colours, the sizing of texts and buttons, relinking a few buttons as I had to group them together for a better white space of clicking onto it. Besides that, I had to do some adjustments after receiving feedback from user testimonials. Thanks to them, I was able to look from a different perspective on how other users would view my app design.

    A special thanks to Mr Zeon for being so kind and considerate, always being patient with me. Even though my efforts are slow but I am thankful it is commendable. Overall, I had a great experience completing this module.

     ↑               →
          top                             project 1