Application Design I Project 3 & Final Project
Melvin Yung Khun Yew | 0357241 | Bachelor of Design (Hons) in Creative
Media
DST 60504 | Application Design I
Week 10 — Week 15
Lo-Fi App Design Prototype and Completed Mobile App Design Prototype
After finishing up the detailed analysis of the mobile application's user feedback to target what to be considered in the final app design prototype, I immediately started to complete what I'd started at the start of the semester by drafting out the app design prototype in low fidelity first and later in high fidelity with usability testing on my design for further improvements.
|
|
App Prototype Design using Figma |
These are the jump links to each part of this portfolio
Instructions
Mr Zeon Wong, my module coordinator and lecturer for this semester, provided us with the necessary files including the module information, and reading elements to give us a headstart on this module.
MIB - Module Information Booklet
Project 3 & Final Project - Lo-Fi App Design Prototype & Completed App Design
Project 3 is combined with the final project which is to complete the
app design prototype, starting by making wireframes of the app to
determine the app layout design, and further down to a high-fidelity app
design prototype where users can interact.
Deadline: Week 15
Submission:
- Project file (Figma)
- A video walkthrough of the prototype
- Online blog posts as reflective studies
Learning goals:
-
Technical and Digital Media Competencies – Demonstrate creative
use of software, and effective use of digital media
skills to promote or communicate design concepts or
solutions
- Appraising and Valuing Competencies – Use information and communication technology to reflect on individual performances for self-improvement.
Work Process
Project Overview
After submitting the second project, Mr Zeon provided us with
materials such as design examples and principles to consider before we
started our final design project. I'd done some design research to
gain some inspiration on how the industrial experts manipulate the
UI/UX designs carefully on Behance.
|
|
Crypto Wallet case study by Ruben Aleksanyan on Behance |
I carefully investigated how the designers made their case studies before moving on to their final UI/UX app design.
I also made some observational studies on the popular e-wallet app
platforms for example: Touch n' Go, PayPal and other apps in search of
ideas and references, where I learned a lot about what information to
include in a proper e-wallet app.
Lo-Fi app design prototype
Before fully committing to a design style, I first made out the
wireframes of my new S Pay Global app design, by placing and
determining the positions of graphics and buttons presented on the
screen.
|
| Wireframes of loading and sign-in pages |
Before I finished up my lo-fi app design prototype, I went on to consult with Mr Zeon, who has been encouraging us to approach him for feedback on our work progress. Indeed, I've gained some design feedback from him which is very useful in helping me to better visualize the final design outcomes by pointing out the design weak points in my low-fidelity app prototype. The constructive feedback is crucial for me to make adjustments to my lo-fi design before I conduct the first round of usability testing.
Significant changes on the app dashboard, where new features and
content are added!
If you're wondering about the hornbills on the dashboard, I initially planned to add more personality to my app to signify the origin of the app, which is Sarawak. I made the flat-coloured hornbills illustration by hand to keep the simplicity using Adobe Illustrator.
After everything was ready where I've prepared a series of
scenarios for the 3 participants to test and the interview
questions to ask for feedback and suggestions on the design, I
went on to conduct the usability testing which was recorded in a
Zoom meeting where the video recordings on their interactions are
compiled and posted on YouTube as testing evidence and
documentation .
For more summarized feedback I've collected, check out my Canva
presentation slides which are included at the end of the work
progress section here.
Lo-Fi app design prototype Usability Testing (29 minutes
total)
Lo-Fi app design improvements
After the usability testing sessions, I received mostly positive
feedback on my designs where all of the participants claimed my
layout to be clear and straightforward. However, they still
suggest some things to consider in my final designs, where I
will be looking forward to adjusting for a better experience.
Based on the suggestions, I quickly made some changes to my
lo-fi app designs to adhere to the comments I got. Before I
concluded my lo-fi app design, I sought feedback from Mr Zeon
once again on my overall lo-fi app design prototype before I
moved on to finish my completed hi-fi design.
This is where Mr Zeon once again suggested some design
considerations for my prototype to make it more visually
pleasing and comprehensible.
Certain features are also added based on the suggestions:
|
| Voucher-type filter system |
|
| Account verification features |
Hi-Fi app design prototype
After finalizing my lo-fi app design, I proceed to add colours
and graphics on my lo-fi app design to further complete it. I kept
the original colour scheme of the S Pay Global app, which is a
major orange colour in my new app design.
I also obtained some graphics in my design from the Storyset
website which was suggested by Mr Zeon previously, which
definitely helped me in completing my completed app design in a
short period. Thanks, Mr Zeon and Storyset here again!
|
| Story set websites for free illustrations |
Hi-Fi app design usability testing & improvements
As the deadline approached quickly, I immediately started on my Hi-Fi app design testing after I completed the final design. Here I received positive feedback from the previous 3 lo-fi participants, where some of them have no further feedback on the current final design. Here again, I'm thankful for them to make time out of their busy schedule to help me with the usability testing throughout the project. Not only listening in praise, I also gathered the final round of feedback from them to completely identify and solve the issues in my design. One of them suggested the addition of gradient colour on each navigation header to be more distinguishable from the rest of the content on the screen.The fun thing is, all of them mentioned the app design is very much like the Shopee app with the colour choice, which reminds me that brand identity is very important in terms of colour too! XD
App navigation headers
The third tester mentioned the text hierarchy issues in the
loyalty rewards section on the app dashboard, which I immediately
focused on to determine and balance out the visual
hierarchy.
|
| Font resize on the points text |
The user interaction video on my Hi-Fi app design prototype is also posted on YouTube for documentation purposes.
Hi-Fi app design prototype usability test (2-4 Jan 2025)
Final Work
Thus, here ends my project on redesigning the S Pay Global app,
where I'm trying to solve the prevalent UI/UX design issues from
the app's current design.
More of my progress is recorded and documented in a slide I made,
with:
- Lo-Fi and Hi-Fi app design prototype screenshots
- Usability Testing summarized feedback
- Design improvements
Here is my documentation:
Or access my documentation separately:
Video walkthrough app design prototype:
Figma file (Lo-Fi & Hi-Fi app design prototype)
My reflections
Looking back at the start of the final project, it is tiring yet
rewarding at the same time. I got to complete one of my goals back
then redesigning the app when I was with my family where they
mentioned the issues they faced when using the S Pay Global app.
In this assignment, my perfectionism kept kicking in, making me
almost lose focus on the main content of the app while I kept
making the small details and features into my app which may not be
apparent enough during the testing phase. In the end, I'm glad
that I was able to pull myself together to complete this project,
and appreciation goes to my friends and my lecturer for supporting
my project along the way.
Comments
Post a Comment