Application Design 1 - Final Project: High Fidelity App Design Prototype
APPLICATION DESIGN DST 60504
WEEK 10 - WEEK 14 (18.11.2024 - 12.01.2025)
NAME: Chin Tze Wei
I.D: 0357423
COURSE: Advanced Interactive Design / Bachelor of Design (Honors) in Creative Media
GROUP: Class 01 Sec 01
Application Design 1 - Final Project: High Fidelity App Design Prototype
- LIST -
TABLE OF CONTENT
1.
Instruction
2.2
Design Process
2.4
User Feedback
2.5
Improvement Made
2.6
Final Outcome
3.
Feedback
1. INSTRUCTION
Module Information Booklet
Module Information Booklet
To-Do List:
- To create a high-fidelity prototype for our chosen mobile application.
- Should showcase the finak visual design, interactions, and functionality of the application.
Requirement:
- Visual Design
- interactions and Transitions
- Functionality and Navigation
- Content Integration
- Usability Testing
2. FINAL PROJECT: HIGH FIDELITY APP DESIGN PROTOTYPE
2.1 Colour Theme and Typography
Colour Theme
After gathering feedback from the respondents regardging their comments
on the app colour in Project 02: UI/UX documents, it became apparent that the use of the brand colours (Black and White)
throughout the entire app interface made users feel boring and their felt
that the colours are to common which other apps such as ZARA also using
the same colour theme. In response to this feedback, I have maded a huge
decision to adjust the colour scheme of the application.
For the new colour scheme, I opted to primarily use Pink and Beige for
the app interface. The brand colours would be reserved for specific
elements such as buttons, icons, and Page colour.
Figure 2.1 Colour Theme
Typography
For the fonts, I decided to choose Crimson Text and Inter for the application. Crimson Text is for the heading and Inter for
the overall content in the app. One of the reason using Crimson Text is
because the fonts are similar to the Original Padini App's Logo Font,
therefore I tried to use this font. Moreover, the font, Inter is one of
the popular fots recomended by designers for use in application
interfaces. According to some research, the font Inter's lowercase letters
have aa tall x-height, which aids the readability of sentences with
mixed-cased texts. This characteristic makes Inter well-suited for
application interfaces, allowing information to be read quickly, with ease
and clarity.
2.2 Design Proccess
For becoming a complete High Fidelity Prototype, there is still missing
elements such as colours and image. At first I though that the completion
process for this high fidelityprototype would be faster compared to the low
fidelity stage. However, things didn't go as planned. I soon found out that
finding images also took me quite a lot of time.
Below are the images that I found to be well-suited and create a harmonious
look for the Home Page in the app:
Figure 2.2 Working Process - Home Page and Product Listing Page
Figure 2.3 Working Process - Loading Page and Log In Page
Figure 2.4 Working Process - Applying colours and images to each
frame
Figure 2.5 Working Process - User Flow of each frame
2.3 Usability Testing
Moving to the next phase, which is usability testing, which we need to
show three scenarios with detailed descriptioins that required userd to
perform specific actions within the application.
Task Given:
Scenario 1: Login into the Padini App and search a product
As a user, imagine you've login into the Padini App, after login, try to
search one product in the search page which the product named "Harry
Potter".
Scenario 2: Add a product to cart
Now, imagine you are planning to add a product to cart. Your task is to
click on a product in the Catalog Page and then choose the product named
"Harry Potter" and select the S size, Black colour and the number of
product, and then click the "Add to Cart" button.
Scenario 3: Checkout a product
In this scenario, imagine you are planning to checkout the product from
your cart. Now click on the Cart button and then choose the product you're
gonna checkout. After that, it will navigate to th checkout
progress.
2.4 User Feedback
For the usability testing, I have interview 3 person who have been used and
not been used the Padini App before to give me feedback. I conducted the
usability test through Face-to-Face and also through video call, where I
shared the screen of my High Fidelity Prototype in Figma and gave my
interviewee control of the screen.
The recording videos were uploaded into the Google Drive.
Click
HERE
to access to the recording video in Google Drive.
PADINI MOBILE APPLICATION - High Fidelity Usability Testing
Summary of feedback based on user feedback:
- The prototype looks trendy than the original Padini Mobile App.
- The colours of the protoypes look interesting and new.
- The layout and interface of the prototype are clear and smooth.
2.5 Improvement Made
Based on the user feedback, I noticed that their review are quite good then I
stop to made improvements.
2.6 Final Outcome
Click HERE to access to prototype in Figma.
3. FEEDBACK
No feedback given from Mr Zeon.
QUICK LINK
Project
Google Drive Link: Click HERE