06/10/2023 - 20/10/2023 (Week 09 - Week 12)
Wong Khye Qing / 0361000
Application Design 1/ Bachelor of Design (Hons) in Creative Media
Task 3: Low-Fidelity Prototype
Wong Khye Qing / 0361000
Application Design 1/ Bachelor of Design (Hons) in Creative Media
Task 3: Low-Fidelity Prototype
Links:
Instructions
Task 3: Low-Fidelity Prototype
After the previous proposal of mobile application for redesign, a Low-Fidelity (Lo-Fi) Prototype would need to be created for user testing. Concepts and wireframes were required for the formation of the prototype. Upon finishing the Lo-Fi prototype, user testing would be required to gather insights and feedbacks for the improvements of the redesign for better user experience while using the app.
Visual Design Concept
Concepts and colors
Fig 1.0 The concepts and inspiration for the app
The overall style for the application was to have a clean interface with enough white space for better readability. A clean with adequate white space and good visual hierarchy is important to create an app that is not overwhelming and confusing.
Fig 1.1 Colours for the application
The colours that would be used for the mobile application are mainly the corporate colour of Kumpool, which are Purple, Yellow, Light Blue and Red colours. This will ensure that the brand identity of the company would be presented to the users and public. Different colours would be used for different sections in the app. I also needed to keep in mind to not use too many colours in a page to prevent any overwhelming or busy interface.
On the other hand, shades of Black were used for the texts and some contents in the app. I also avoid using true black (#000000) to not overwhelming the interface and reading experience. Different shades of black were used to display better visual hierarchy to avoid any flat display interface.
Sketching
Fig 1.2 Sketching of main features for the app
One of the Minimum viable product (MVP) of the app were the booking and schedule rides. In the sketching, there were pop up dialogs would be shown to confirm the user's actions. Furthermore, the pages of the sketches were labeled to be understood easier.
Fig 1.3 Sketching of other features for the app
These sketches featured the other features in the app, as the app would not be too friendly without other features available for users causing inconveniences. These were some essential features that were able to fulfill the needs of users using this app for their ride booking experiences.
Wireframe
Fig 2.0 Complete wireframe of Lo-Fi prototype, Figma
This complete Lo-Fi prototype wireframe contained a few features from the app and the overall flow of the prototype was created according to the User Flow from the previous assignment. A total of 20 interface pages were created with 8 pop up dialogs. All of the pages were connected with each other according to the user flow. Users would just needed to go through less than 5 pages to complete a tasks that they were onto, this could save their time from going unnecessary pages.
Fig 2.1 Booking a Ride interfaces, Figma
Book a Ride
This is the main feature of the ride hailing app, which enables users to book a ride to from their location to the destination. It would be able to allow users to customize on the pick-up and drop-off location as well as paying the ride fare. Upon the payment, users would be able to see the overall trip progress and updates on their pick-up time.
If the user changed their mind, they could cancel off the ride before the rides arrive. After arriving at the destination, users could also rate or leave their feedbacks for the driver.
Fig 2.2 Schedule a Ride interfaces, Figma
Schedule a Ride
This feature is similar to the booking ride feature that allows users to schedule and book their rides upfront in order to save their time to book rides during peak hours. Users would need to pick available time slots to check their availability before able to select locations for the ride. Upon picking the locations of the pick-up and drop-off, users would needed to pay upfront to secure their schedule ride.
Cancellation from the user’s end would result in refunding a portion of the fare and cancellation from the driver’s end would result in full refund. After the payment, users could review their overall scheduled ride flow.
Fig 2.3 Finance and Kumpool Wallet interfaces, Figma
Finance and Kumpool Wallet
The finance page would allow users to review on their Kumpool wallet and any saved credit/debit cards. Users get to review on their wallet balance is not enough, users could reload their Kumpool wallet using various reload methods available. In the event if the wallet balance is not enough during booking session, uses could option to use their credit card or reload their Kumpool wallet on the spot to continue their ride payment.
Fig 2.4 My Rewards and Ride History interfaces, Figma
My Rewards and Ride History
These two features were able to be accessed from the Main page and the Profile page. My rewards allow users to review on the points that they have collected from booking rides. Any points added would be registered in this page and the Point history section to indicate that points were added from which ride.
Apart from that, the Ride history page allows users to review on the rides that they have taken, as well as allowing them to check on their date, time and locations for their previous rides. Aside from that, users are also able to print the invoice of the rides for the personal usage.
Fig 2.5 Notification and Profile interfaces, Figma
Notification and Profile
The notification page shows the overall activities that were done by the user. For instance, upon any successful ride booking, this page will record that this action has happened. It serves as a history and activity page for user reference.
The Profile pages shows some of the user information recorded in the app as well as some buttons to redirect to My Rewards, My address, Ride history and Settings. It is a small user information library to ease user identification for the driver and system during ride booking.
Usability Testing
Fig 3.0 Usability Testing Responses
Usability testing were done towards 5 participants in order to gather their insights and feedbacks towards the Lo-Fi prototype. There were several tasks distributed online to the participants to complete and the feedbacks were noted down on the Google Docs.
Testing tasks
Task 1: Sign in and Log in
Users are required to Sign in to the app before they could Log in. As a new user, they will need to create an account before they could Log in with that created account towards the Main Page.
Task 2: Book a Ride
Given it is the main feature of the app, users would needed to Book a Ride by picking their pick-up and drop-off location and the passenger amount. Then, they would be shown the preview of the entire ride flow before paying the ride fare with various paying methods to choose from. Upon payment they would be shown the overall journey on the map as will as waiting for the pick-up. They could choose to cancel the ride or continue the journey till the drop off.
Task 3: Schedule a Ride
This feature is of similar to booking a ride. Users would just needed to choose the option to schedule ride in the main page. Then, they needed to check for the time slots availability to be able to choose their pick-up and drop-off locations. After that, they could just needed to oversee their overall trip and pay their ride fare. Upon payment they would be led to the booking successful page, showing that they have secured the booking and the ride would be able to reach on their scheduled time.
User feedbacks
- I observed that the majority of buttons and features operated as anticipated, contributing to an overall intuitive navigation experience. Nonetheless, there were a few instances where, upon selecting a payment type, the display did not reflect the chosen option as expected; instead, nothing appeared.
- The text is clear and easy to read, contributing to a positive user experience. However, the visual hierarchy could be emphasized or organized more effectively to guide users seamlessly through the interface.
- However, including a search engine on the landing page could streamline the process of directly searching for destinations, making it more user-friendly.
- The visual hierarchy appears well-structured, ensuring consistency throughout the app. However, some individuals with visual impairments might encounter difficulty due to font size in some areas.
- The only place to improve will be to have a proper user guide tour to show on how to navigate via the app.
- Gap of the camera and headline of the page is narrow, notification for the same activity can be included in one instead of multiple notifications.
Summary of suggestions
- Additional review schedule features page for future editing of ride. Display the date in the flow to confirm the scheduled ride.
- Implementing a security feature for emergency call to contact police.
- Improve on the overall aesthetic of the icons inside the app.
- Enhance order history section, provide more details such as the pricing information, and possibly adding a re-book or reorder function for convenience.
- Add Interactive graphics (mesh gradient, illustrations, gradient)
Future actions (Improvements)
The next action would be to add images and adding the app colors into the app. The were certain features that would need improvements and amendments to increase the user experience. Visual hierarchy of the app is also one of the priority in the presentation of the app. The Schedule feature and the history page would need some amendments to be able to complete the prototype feature. Other than that, some additional icons would also needed to be added into the interface to increase the visuals of the interface and save the user time.
Reflections
In this assignment, the pursuit of perfection has lengthen my progress in the production of a Lo-Fi prototype. I kept worrying about some features in this prototype that might not be enough for this stage, turns out I was wrong, a lot of time has been chipped in making this prototype instead of focusing in the next High-Fidelity (Hi-Fi) prototype.
Apart from that, one of the few things that I was proud about this assignment was that I was able to learn more about Figma as well as the Auto-layout feature in the Figma, which took quite some time in understanding and tweaking. The fruits of labor for understanding of the Auto-layout for was worth it, I was able to apply them to make an adjustable and clean interface with more customization opportunities. Moving forward, I would need to speed up the progress for Hi-Fi prototype and able to deliver a good prototype with good user experience that ease the users.
Apart from that, one of the few things that I was proud about this assignment was that I was able to learn more about Figma as well as the Auto-layout feature in the Figma, which took quite some time in understanding and tweaking. The fruits of labor for understanding of the Auto-layout for was worth it, I was able to apply them to make an adjustable and clean interface with more customization opportunities. Moving forward, I would need to speed up the progress for Hi-Fi prototype and able to deliver a good prototype with good user experience that ease the users.