Application Design 1 - Project 03: Low 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 - Project 03: Low-Fi App Design Prototype
- LIST -
TABLE OF CONTENT
1.
Instruction
2.4
User Feedback
2.5
Improvement Made
2.7
Final Outcome
3.
Feedback
1. INSTRUCTION
Module Information Booklet
Module Information Booklet
To-Do List:
- To create a low-fidelity prototype for our chosen mobile application.
- Should include wireframes and visual design concept aligned with the branding of the application.
Requirement:
- Visual Design Concept
- Wireframes
- Usability Testing
- E-Portfolio (A digital document that includes low-fidelity prototype, wireframs, and visual design concept, include a brief summary of your usability testing results and how you used them to refine your design)
2. PROJECT 03: LOW-FI APP DESIGN PROTOTYPE
2.1 Wireframe
After completed the previous task, which include preparing the UI/UX
document, I then proceeded to develop a low-fidelity prototype for the
Padini Mobile Application. To start, I first study the competitors app's
design and layout. These apps provides me a valuable references for
application to the Padini App redesigned project. Then, I tried to draw a
basic draft of wireframe which I hope my redesign app should have.
2.2 Process of Designing in Figma
Moreover, I then start to explore the features in Figma. Before conducting
this class, I have learned the basic of the Figma software but there still
something I don't used to familiar with, which is the component and the
"linking" thing (joining the frame and make the prototype works). Hopefully,
I found out that my friends are quite familiar with this software and they
can teach me, the process of developing the prototype in Figma turned out to
be smoother and easier than I thought. The only aspect that consumed most of
my time was designing the app's overall interface, especially the Home Page
and the Product Page, because from the previous task, respondents reponse
that the layout of the original Padini Mobile Applications is very outdated
and not trendy.
To begin, I
set the frame size exactly
same as my phone model and applied them a layout grid with 4 columns, 30 for
margins, and 20 for gutters. With the guidance of the layout grid, designing
the app's interface becomes more handleable for me.
Figure 2.1 Working Process - Log In and Sign Up Page
For iconography, I decided
to use a plugin-free template in Figma, which really saved my time as I
didn't need to find the whole set of icon myself.
Figure 2.2 Working Progress - Iconography
Next, for Home Page, there will have a lot of content, so I decideed to have added horizontal scrolling for specific sections, such as promotion banners. Other than that, there will be a vertical scrolling for the entire Home Page to make the interface appear more organized.
Figure 2.3 Working Process - Home Page
And then the next step is to proceed with designing each of the pages.
Figure 2.4 Working Process - Designinig each page of the
app
Figure 2.5 Working Process - Designed Interface 1
Figure 2.6 Working Process - Designed Interface 2
Figure 2.7 Working Process - Designed Interface 3
After completing the design of the interface with a total of 63 frames, I proceeded to link all of them together and create the prototype and ensure they work smoothly.
Figure 2.8 Working Process - All designed pages
Figure 2.9 Working Process - User Flow Interaction
Figma Board (Low Fidelity)
Click
HERE
to access to prototype in Figma.
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: Longgin 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
I collected feedback from three participants through online Zoom meeting. I apologize for not being aware that I forgor to record the process of user testing of Low Fidelity Prototype; I only realized this after starting to do the High Fidelity Prototype phase. However, I have note the feedback of my users.
PADINI MOBILE APPLICATION - Low Fidelity Usability Testing
Summary of feedback based on user feedback:
- Consider making the button more bigger.
- Consider making the text of the content more visible.
- Try to add on more component to have more interactive features inside the app.
2.5 Improvement Made
Based on user feedback, I have made some minor changes to some pages
and deleted some unwanted pages.
Figure 2.10 Improvement on the button and text
2.6 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.11 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.7 Final Outcome
Click HERE to access to prototype in Figma.
3. FEEDBACK
24.11.2023 - Week 12 (Low Fidelity Prototype)
- For Log-In page, the buttons can be more slightly bigger.
- Can use component to create a basic animation for the Loading Page.
QUICK LINK
Project
Google Drive Link: Click HERE
