24/11/2023 - 08/12/2023 (Week 12 - Week 15)
Wong Khye Qing / 0361000
Application Design 1/ Bachelor of Design (Hons) in Creative Media
Task 4: Hi-Fidelity Prototype
Wong Khye Qing / 0361000
Application Design 1/ Bachelor of Design (Hons) in Creative Media
Task 4: Hi-Fidelity Prototype
Links:
Instructions
Task 4: Hi-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 Overall Colour Scheme
The colors that were used still remained the same as proposed previously, which were Purple, Yellow, Light Blue and Red colors. Additionally, there were lighter shades of colors being added and used for the interface to compliment with the previous proposed colors. They were able to create a light tone of the initial colors in the interface, making it look more harmony with the other colors.
Different colors would be used for different sections in the app. I also needed to keep in mind to not use too many colors in a page to prevent any overwhelming or busy interface. One of the most used color for the app was the Blue color.
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 overwhelm the interface and reading experience. Different shades of black were used to display better visual hierarchy to avoid any flat display interface.
Fig 1.1 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.
Sketch
Fig 1.2 Overall Colour Scheme
Sketch were done for the entire interface. It featured the main feature of the app for Booking a ride as well as Scheduling a ride. Meanwhile other sub pages were also sketched in order to give me a better idea of how the interface might look like and make necessary adjustments to it
Typeface
Fig 1.3 Typeface used, Anderson Grotesk
The typeface that I have chosen was the Anderson Grotesk, which is a Sans Serif font that is modern and simple, it would be compatible with the proposed modern and clean interface. This typeface came in different font weights which has enabled me to have a variety of customization towards the fonts on the interface.
Overall Icons
Fig 1.4 Overall Icons used
I have also used an Icon pack that has a wide range of icons to choose from, I was able to find icons that were not too bold and bulky for the app. They are thin icons that have a distinctive look to it and possessed a simple and modern appearance which would also compliment with the Sans Serif font used in the app.
Interactions and Transitions
Fig 2.0 Slide out to Navigate to Other Pages, Figma
Navigate to Pages interaction has been added to buttons so that it would redirect users to the next page for the next process. Slide out animation with Ease Out 300ms was the perfect default animation timing that able to enable sliding animation to the next page.
Overlay After Delay
Fig 2.1 After Delay for Overlay, Figma
The After Delay interaction was an interesting interaction that enable the delay of the display of an overlay. In some situations I was able to delay an overlay to be displayed for about 3000ms which is 3 seconds in the ETA Page, this after delay served as a mockup for showing that the user has reached their destination. Customizations could also be made for the After Delay interaction to open an Overlay, Navigate to pages, Swap Overlay and many more. The animation was set to the default Ease Out of 300ms for smooth transition.
Open Overlay
Fig 2.2 Open Overlay for Confirmation, Figma
This interaction has enabled dialogs to be overlaid on the current page. I have placed Alert Dialogs and Button Dialogs into different pages in order to alert or make confirmations with the user. Customizations could be made towards the Overlay Settings to open the Overlay in the center, side or below. There were also customization to close the overlay upon clicking outside and also to add a background behind it. This feature has been a good help to open dialogs instead of directing user to different pages to open an overlay.
Change To
Fig 2.3 Change To different Variant, Figma
This interaction allow the a current state to change to another variant state upon clicking on it. It was able to allow the Variant 1 to change to Variant 5 upon pressing an element within a component. There would also be animation customizations to allow smooth transitions. This interaction was mostly used in component buttons for complicate transitions and changing of state.
Functionality and Navigation
Components
Fig 3.0 Overall Components, Figma
A few components were made for this prototype in order to simplify the process of customization for later as well as ease the workflow of prototyping of using pasting a component instead of countless duplicating of a button. It was also a good way to compile all the components in a different page to have easy access browsing through them and make customizations when needed.
Fig 3.1 Number Amount Update and Ratings, Figma
Multiple Components have used the Change To interaction to change to different state. For instance, the passenger amount button allow users to tap on the amount of passengers for a ride, it also act as a Counter button and change to the different state after I have pressed on the button. Same went to the Rating button in which when user pressed on the the gray stars, it would change to different ratings. For example, if the user pressed on the forth gray star, it would be able to change to the state with four yellow star.
Fig 3.2 Multiple Choices Selection, Figma
Another component that have used the Change To interaction would be the Available Time selector as well as the Payment method selector. Both of them acted as a Radio Button that would only allow the button selected to be highlighted when pressed. For instance, once the Cash method was selected, it would be highlighted with a different background, meanwhile if Touch 'N Go method was tapped the highlighted background would be changed.
Fig 3.3 Dropdown Selection, Figma
The dropdown selection has also used a more complicated Change To interaction which would allow the drop down menu to change to any selected selection. For example, if I have selected Subang Jaya, then my selection would be reflected on the button of the dropdown menu.
Fig 3.4 Hidden Content Reveal, Figma
The card details was also able to be hidden and revealed by pressing the eye button which would have used the Change To interaction to switch to Reveal variant from the Hidden Variant.
Fig 3.5 Few Amendments for the Ride History Button, Figma
One of buttons that have went through a few amendments and versions was the Schedule Ride timeslots and the Ride History section. Some decisions were made in order to remove and remain some of the information in those buttons. The Ride History has went through quite a lot of change, considered that a lot of information was in the initial design, the latest design has simplify the pick-up and drop-off locations as well as the time and date, with the additional book now button.
Navigation
Fig 3.6 Taskbar Navigation, Figma
The taskbar was one of the feature that made navigation more convenient for the user. Navigation to different feature pages could be done by pressing on the buttons in the taskbar. Each of the buttons were connected well with each other to ensure a smooth navigation to other pages.
Fig 3.7 Side Menu, Figma
The Side Menu was also one of the feature that enable quick access to some features in the app. It is compact and easy to access by the user, it could be compress upon usage and revealed upon needed. The Side Menu has used the Open Overlay interaction to overlay on the side of the page.
Fig 3.8 Overlays and Dialogs, Figma
There were quite a number of overlays used in the prototype, mostly were overlays that would be overlaid in the center and the menu would be overlaid on the side. Overlays were quite convenient and friendly as they would act as alerts or confirmation to some user actions. The side overlay would be friendly to assist in overlaying and exhibiting the animation of hiding and revealing the side menu.
Overall App Flow
Fig 4.0 Hi-Fi Prototype Wireframe, Figma
Fig 4.1 Log In and Sign Up, Figma
Before gaining the access to use the app, the user would need to Sign Up to create an account in order to Log In with an existing account. Overlays would be shown to confirm on the status of account creation or login attempt.
Fig 4.2 Book a Ride Flow, Figma
Then, users would be guided to Main Page upon success login attempt. User could choose to Book or Schedule a ride, visit the pages on the taskbar (Finance, Notification and Profile) or check on their rewards and Ride history.
After selecting to Book a Ride, user would need to pick on the pick-up and drop-off location as well the number of passengers boarding the ride. A progress bar would showed that they were at the Location stage and progressing. Then, user could preview their ride with estimated waiting and drop-off time with the ride fare preview, users could choose different payment method as well as key in promo code.
After confirming and paying for the ride, the ride progress with map showing the driver and car information with their current location would be shown. The progress bar would showed that they were at the Confirm stage and progressing to the drop-off. During this stage, users could choose to cancel ride and guided to the feedback page. Upon arriving at the destination, users could choose to rate the driver or return to main page.
Fig 4.3 Schedule a Ride Flow, Figma
The Schedule ride feature was almost similar to booking a ride. It would be started by allowing user to choose the available time slots for booking, users would need to check the ride availability before able to proceed. Upon confirming, users could choose on their pick-up and drop-off location before proceeding to preview their schedule ride and ride fare.
Users could view their scheduled ride after paying as well as cancelling their ride and giving feedbacks to their cancellation. The difference between scheduling and booking was that the users would need to check for ride availability before scheduling and rides would arrive later at scheduled time.
Fig 4.4 Task Bar Menu Flow and Side Menu, Figma
The taskbars were able to redirect the users to the Home, Finance, Notification or Profile page. The taskbar acted as a quick access toward some features in the app. It would be available in the Main page, Finance, Notification and Profile page. The Side Menu would also able to let user access the Home page, Edit their profile, Check their Rewards, Change their Address, Check their Ride history and Settings Page. The Side menu would be overlaid on the side of the page and could be access by the pages with taskbar.
Fig 4.5 Payment Method Flow, Figma
The Payment Method page could be access through the Payment page during booking or scheduling of a ride. Users get to choose on different types of payment method such as Kumpool Wallet, Mastercard/Visa, Cash and so on.
Fig 4.6 Miscellaneous Flow, Figma
There were also some miscellaneous features in the app, such as the My Rewards page which could be access through the Main Page, Side menu and the Profile Page. It allows users to check on the point balance and the points collection history.
The payment method could be access by reloading the Kumpool wallet. Meanwhile the Ride History Page could also be access through the Main Page, Side menu and the Profile Page. It enables the users to check on the ride histories as well as allowing them to book the same ride journey again.
Fig 5.0 Integration of Images for Buttons, Figma
Images were added to the buttons in main page for the My Rewards and Ride History, it served as the contrast for the contents in the overall prototype which were vectors. A little trails of images in an interface might sometimes make the overall look better and less flat.
Fig 5.1 Integration of Map Images, Figma
Map Customization at: https://snazzymaps.com/
Image of the map was integrated to the preview of the pick-up, drop-off and overall trip progress to give a better visualization of the locations and duration of the trip visually. The map was modified online instead of directly taken from the Google Maps as there were some unnecessary information on the map for the preview of the map.
Fig 5.2 Integration of Existing Logos, Figma
Existing logos of some companies of E-wallet as well as credit cards were integrated into the app. This is to enable the users to recognize their familiar payment methods visually and improve user navigation.
Fig 5.3 Integration of Profile Image Figma
Profile Images were also added to the information of the user in order to show that more details about the user and additional visualization of how the user would look like.
Fig 5.4 Integration of Kumpool Logo, Figma
The integration of the Kumpool logo was a must, as this the Kumpool App prototype. They were put in the Log In, Sign Up page and the Side Menu in order to show the brand identity of the company.
Fig 5.5 Integration of Data, Figma
Some data such as locations and arrival time were added to the functions and features in order to increase the immersion of the user for the prototype. Some users might even recognize the location listed and relate to it as well.
Usability Testing
Fig 6.0 Usability Testing Responses, Google Doc
Usability Testing were done towards 5 participants in order to gather their feedbacks and inputs on the Hi-Fidelity Prototype. Their insights would be good for the improvements of the app and affirmation towards some good features in the prototype. The Usability Testing was distributed and done by the participants online by using Google Docs.
Scenario
You are using the Kumpool app to book a ride to Sunway Pyramid Lobby-A, you are paying for the ride using the in-app wallet.
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
- The text is clear, legible, and appropriately sized, contributing to an easy reading experience. The visual hierarchy effectively guides my attention to key elements, ensuring a logical and intuitive flow throughout the app.
- I appreciate the simplicity of navigation, but white space could be better utilized. Some areas feel overly airy, perhaps due to color choices or layout. Balancing spacing could elevate aesthetics and engagement.
- Overall, this app looks clean and straightforward. However, the colour of the frame can be improved by incorporating the colour of the Kumpool app.
- The only place to improve will be to incorporate a user-guide tour to show how to navigate through the app. This will help to improve new user’s experience.
- The only place to improve will be the overall aesthetic looks of the icons inside the app, enhancement in having working minor buttons and features. Finally, the visual hierarchy of the app can still be improved to provide quick glance and easy access to provide better user journey while using the app.
- I find the design a bit too minimalistic. I wish it included more design elements, but I do appreciate the easy-to-understand and simple icons.
- I believe the app could be improved by including driver pictures and an emergency contact feature for safety purposes.
- Some button issues such as cannot press and require second touch. When logging in the because the log in button is same colour as the blue CTA button and expected to have text to pop up on the text field so jumping back and forth on that two screen.
- The icons could be better by enlarging it.
- It would be better if the log out function can be placed under the slide out menu instead of user profile page.
- Add in the driver's photo in the booking ride page. This feature will well inform user to verify whether the driver is the right driver.
Suggestions Summary
- White space could be adjusted as the app might seemed to empty, more design elements could be added. Balancing spacing could elevate aesthetics and engagement.
- The visual hierarchy of the app can be improved by provide quick glance and easy access for better user flow and navigation.
- The driver image could be included and an emergency contact feature for safety purposes.
- Adjust the size of the icons for better visualization.
- The Log out function can be placed under the slide out menu.
Final Amended Hi-Fidelity Prototype
Minor Amendments
Fig 7.0 Minor Amendments towards the Image and Icons, Figma
Based on the suggestions from the Usability Testing, I have made some minor amendments towards the Driver's Profile image in order to show on how the driver looks like. Besides that, I have also changed adjusted the icons size bigger as well as added the Log Out button in the Side Menu.
Final Hi-Fidelity Prototype
Fig 7.0 Final Hi-Fidelity Prototype Wireframe, Figma
Fig 7.1 Final Hi-Fidelity Prototype, Figma
Feedbacks
Week 16
I’m very happy with the prototype design. Excellent work KQ!
Reflections
This assignment has taught me a lot about the procedures of prototype, the process became more crucial nearing the end of end of the prototype towards the Hi-Fidelity Prototype, as more contents and features would be featured in it. Feedbacks and insights from the user were important in order to make amendments and changes towards the prototype as well as learning on the flaws and shortcomings of the prototype. Learning from the shortcomings could improve on the understanding the user behaviors as well as the user preferences. Besides that, I have also learned a lot about the capabilities of Figma and its prototyping features. The interaction features and component customizations were one of the challenging and interesting part of the prototype, it challenged me to create components that were able to be used for later and create a semi-automated assets that I was able to customize easily. After that, I would also like to thank Mr Shamsul for his continuous support and insights towards my prototypes. I have experienced quite the fun in prototype and redesigning the Kumpool as I am also a user of the app, I hope that my redesign would be able to improve the user experience and have a fresher take on the current app.