Application Design I - Task 3: Lo-Fi Prototype Testing
19/11/25 - 12/12/25 / Week 9 - Week 11
Brendan Fedya / 0376283
Application Design I / Bachelor of Design
(Hons) in Creative Media / Taylor's University
Task 3: Lo-Fi
Prototype Testing
TABLE OF CONTENTS
I. Lectures
II. Tasks
III. Feedbacks
IV. Reflections
I. LECTURES
➼ Lecture 10: Navigation and Decision Making Process
Where you put your product in a site map, so people won't get lost?
For navigation, we should:
1. Know where we are (Global, local, contextual, faceted, supplemental.)
2. Where can we go
3. What will happen there
4. What do I need to know first
Anchoring is useful to guide people in creating decisions.
Paradox of choices: less choices enables people to make decisions easily, to
avoid people getting difficult in differentiating between options.
Create choices according to priority.
Hook the users, try to think how we can make the people use more of our own
products. Hook them the first time they use it
➼ Lecture 11: Usability Testing
Usability testing helps to identify bottlenecks. Firstly, create intended
declarative statements with specific objectives and see whether the tested
users can complete that in time.
➼ Lecture 12: Usability Heuristics
Visibility of system status, for example information of the battery's
current state, confirmation and error messages, progress bar, and navigation
cues. This contributes to better decision making from the users.
Match between system and real world, create similar visual
metaphors with the same thing, usage of similar words.
User control and freedom, allow user to cancel, close from a page,
an go back from a step, even if that is an intended step to take.
Consistency, could be helped by creating a UI kit.
Error prevention, making users know what will happen if they
perform a significant action.
Recognition rather than recall, remembering orders, noting
user preferences, etc.
Flexibility and efficiency of use, how an app could cater to
different types of audiences, could be through customization, shortcuts,
etc.
Consistency, could be helped by creating a UI kit.
Aesthetic and minimalist design, currently we need to be
careful with this, as maximalism is coming back to the current styles to
bring back identity. For minimalistic designs, we must balance contrast,
also consider the negative spaces on the app.
Help users recognize, diagnose, and recover from errors, currently we need to be careful with this, as maximalism is coming
back to the current styles to bring back identity. For minimalistic
designs, we must balance contrast, also consider the negative spaces on
the app.
Help and documentation, currently we need to be careful with
this, as maximalism is coming back to the current styles to bring back
identity. For minimalistic designs, we must balance contrast, also
consider the negative spaces on the app.
➼ Lecture 13: Visual Design
a design is when thinking is translated into visuals.
Consider design principles when designing something.
Consistency is an extremely important factor when designing
interfaces, same color palette, same spacing, same shape
characteristics.
Consider optical weight when designing, something that the machine
can't do. If it appears offset, then try to make it
center-aligned.
Ergonomics is also one aspect, consider where people will click.
User control and freedom, allow user to cancel, close from
a page, an go back from a step, even if that is an intended step to
take.
Consistency, could be helped by creating a UI kit.
Error prevention, making users know what will happen if
they perform a significant action.
Recognition rather than recall, remembering orders,
noting user preferences, etc.
Flexibility and efficiency of use, how an app could
cater to different types of audiences, could be through
customization, shortcuts, etc.
Consistency, could be helped by creating a UI kit.
Aesthetic and minimalist design, currently we need to be
careful with this, as maximalism is coming back to the current
styles to bring back identity. For minimalistic designs, we must
balance contrast, also consider the negative spaces on the app.
Help users recognize, diagnose, and recover from errors, currently we need to be careful with this, as maximalism is
coming back to the current styles to bring back identity. For
minimalistic designs, we must balance contrast, also consider the
negative spaces on the app.
Help and documentation, currently we need to be careful
with this, as maximalism is coming back to the current styles to bring
back identity. For minimalistic designs, we must balance contrast,
also consider the negative spaces on the app.
Additional notes:
- Use text below icons is an option to make it clear.
- Give onboarding walkthrough of prototype
- Increase line-spacing for text, so it's easier to scan. App should be scannable, not aiming for readable.
- Element should be 44x44px minimum.
- Lower half of the screen is the hot zone for navigation, but not extremely low.
- Avoid multi-column grid.
- Drop-down can only be used if the options does not occupy the whole page, its better to go for a separate page if that's the case.
- Radiobutton — used for selection, more important compared to drop-down.
- Utilize Figma's autolayout.
- Gradients and pathfinders are best to be done in other applications, not Figma. Figma is only good if I want it quick.
II. TASKS
➼ Class Exercise: Usability Testing Plan
For our prototype testing, we are required to create a test plan to
conduct testing with real users later on (non-designers).
|
| Figure 2.1: Different types of navigation |
➼ Lo-Fi Prototype
Firstly I began creating sketches and wireframes for my intended
design, so that I would have a clearer image on how the later versions
will look like.
|
| Figure 2.2: Sketches and wireframes |
To start the digital version, I put frames along with grids for my
prototype screen, and then proceed to add the elements according to my
wireframes I created. It is not exactly the same — but at least I got
a hint of what I'm going to do.
Figure 2.3: Arranging elements
Next, creating the navigation bar. I made sure to keep it look simple to
cater to MUJI's simple characteristic.
I figured that the guides I made are not enough to give accurate spacings to
the elements, so I added grids to support the column guides.
|
| Figure 2.4: Creating navigation bar |
|
| Figure 2.5: Added more guides. |
Then I started rearranging the elements by considering the feedback given by
Sir Sylvain, I tried my best to maintain the space consistency.
I added some overlay pages for a 'feedback' touch after users have completed
certain actions.
Figure 2.6: Additional consistency fixes.
|
|
Figure 2.7: Overlay pages.
|
|
| Figure 2.8: Designing interactions. |
Added more pages so that it could have a flow of usage:
The happy path flow includes the user to search the intended products, choosing the designated variations, and
eventually purchasing the product.
Additional features that could encourage this process is the AR try-on feature
and detailed review checking
to ensure product accuracy, and also parcel tracking
to know the whereabouts of the product.
|
| Figure 2.9: More pages. |
After finishing the whole lo-fi prototype, I began doing user-testing. Users outside of the design field is encouraged in order to spot problems easier for my current prototype. The results will then be used to refine my lo-fi prototype before proceeding to high-fidelity design.
My user-testing is determined through 3 tasks that I assigned to them in the
app:
|
| Figure 2.10: User-testing tasks. |
➼ Results!
Details of user-testing results, lo-fi prototype, and the rest of the
information could be found in the slides inside the link below:
III. FEEDBACKS
‣ Week 11
- Cannot do specific tasks for testing goals that requires heavy coding.
- After testing, product 'order' button is commonly misinterpreted as product page.
- After testing, search bar is often used to search products.
- After testing, navigation bar is unintuitive — it needs feedback to let users know where they are at.
- Font size is too small.
- Consistency could be fixed.
‣ Week 13
- Spacings on main page could be separated more clearly to differentiate between groups.
Comments
Post a Comment