Project 3 / Lo-Fi App Design Prototype
Bachelor of Design (Honours) in Creative Media
Application Design DST 60504
Application Design I - Project 3
Overview
> Instructions
- UI Kits
- Wireframe Process
- User Testing
- Final Outcome
> Feedback
> Reflection
Instructions
After the UX design process is complete, students can create a low-fidelity prototype of the application. Students need to arrange all the screen wireframes, motion, visual feedback and link them in Adobe XD/ Figma/ Invision Studio or any other prototyping software. Students are then required to perform usability testing whereby they will invite guests to test out their low-fidelity prototype and gather all the information, responses, feedback, and pain points observed from the test. Students need to document this process with a video and produce a document containing a detailed analysis of this task and the solutions to the problems faced by the testers.
Requirement:
1. Visual Design Concept:
Develop a visual design concept
that aligns with the branding of your application. This concept should
include colour schemes, typography, and imagery that convey the
desired look and feel of your application.
Create wireframes of the screens for your mobile application. These wireframes should illustrate the layout and content of each screen, including the navigation and interaction elements. You should use tools such as Figma, or Adobe XD to create these wireframes.
4. Deliverables:
Submit a digital document that includes your low-fidelity prototype,
wireframes, and visual design concept. Also, include a brief summary of
your usability testing results and how you used them to refine your design
in your e-portfolio.
Mobile UI Design References:
Before starting to design the Lo-Fi Prototype, I explored lots of ride UI design references from Pinterest to build up a concept and inspiration for my redesigned app.
UI Kits:
I created a UI Kit at the beginning, which was for me to establish the colour scheme and typography of my redesigned app. Moreover, I explored the icon sets as well from the Figma community, and also I discovered a website where it provided various free illustrations, which I find it is very useful to use in the Hi-Fi prototype.
Lo-Fi Prototype Version 1.0
I start my Lo-Fi prototype design from the Home page and Book a Ride page first. After I showed these two pages to Mr Zeon, he said that they looked too standard, and that I should further improve the visual design to make it more attractive. He suggested me to look for more UI design references and learn from them.
|
| Home page & Menu bar |
|
|
|
Lo-Fi Prototype Version 2.0
|
|
|
|
|
|
|
| Book a Ride page - Driver Contact |
Additionally, I worked on designing the rest of the pages as well. After consulting with sir, I need to modify the top-up part layout on the Finance page. Also, there are some missing features on the Loyalty Program page like, the apply vouchers should be created out for the user to apply them, and the subscription status should be shown at somewhere after purchasing the ride plan.
|
| Profile page & Menu bar ver 2.0 |
|
| Schedule a Trip page |
|
| Recent Rides History page |
|
| Finance page |
|
| Loyalty Program page |
|
| Menu bar - Help Center, Safety Ride, Privacy Policy, About Kummute |
|
| Home page - Notification |
Lo-Fi Prototype Version 3.0
Missing features:
|
| Book a Ride page - traffic condition notifications |
|
| Apply vouchers feature |
Amendments:
|
| Finance page - top-up |
|
|
Profile page - subscription |
|
|
Login page |
|
| Onboarding page |
While completing the Lo-Fi prototype, we need to conduct user testing with 3 scenarios, where we must prepare a set of instructions as a task for users to complete. So, I invited 3 participants and gave them each a scenario. The user testing was conducted face to face, and I just recorded my laptop screen. After finishing the task, they were needed to fill out the questionnaire with a few questions regarding their experience while using the Lo-Fi prototype.
Lo-Fi Prototype Version 4.0
Based on the feedback collected from the user testing, although the layout design and navigation flow are clear and clean, there are some parts that need further improvements:
2. Missing driver detailed information, should included during the ride due to safety issues.
Amendments:
|
| Book a Ride page - driver information |
|
|
Menu bar ver 3.0 |
|
| Book a Ride page - cancelled ride animation |
|
| Purchased successful with a close button |
Click here to view the walkthrough video.
Click here to view the file.
Feedback
Specific
The prototype design looks standard, you should try to improve the visual
design, and find more UI design references.
- For the Book a Ride page, try to think about how to show the traffic condition notifications to user.
- Modify the top-up part layout on the Finance page.
- There are some missing features on the Loyalty Program page like, the apply vouchers should be created out for the user to apply them, and the subscription status should be shown at somewhere after purchasing the ride plan.
Reflection
Redesigning the Kummute app into a low-fidelity prototype in Figma was a challenging yet rewarding process that required constant iteration and improvement. This emphasis on thinking from the user's perspective has led me to prioritize usability, simplicity, and clarity in my designs. Although this process is time-consuming, each improvement brings the prototype closer to meeting user needs and expectations. This experience deepened my understanding of user-centered design principles and the importance of balancing functionality with intuitive navigation, ultimately shaping a prototype that meets real-world usability standards.
Comments
Post a Comment