Application Design I - Project 3
14/02/2023-28/02/2023 (Week -Week )
Brigita Maria/0352958
Application Design I / Bachelor of Design in Creative Media
3D render by hi!estudio
INSTRUCTION
Figma Link:
Visual Design:
Implement the finalized visual design concept you created in the previous tasks. This includes color schemes, typography, icons, and any other visual elements that contribute to the overall look and feel of the application. Pay attention to details and ensure consistency across all screens.
Color Schemes
Figure 1.1 #F69B02, #E06302, #17B1E7
Following the originial design of the app Kumpool, I used the same color palette to not go out from the original theme and design. Makes it still identifiable as Kumpool App. So the current user or previous user still can feel familiar with the previous design.
Typography
Circular Std
Figure 1.2 Circular Std (1)
Figure 1.3 Circular Std (2)
Icons
I decided to also create a new icons for the app. Although I only design for the big buttons, not for the navigation bar. Maybe in the future as a continuation of this project, I will add my own icon design to the navigation bar.
Figure 1.4 E-wallet Icon Design 1
Figure 1.5 E-wallet Icon Design 2
Figure 1.6 E-wallet Icon Design 3
Figure 1.7 Car Icon Design 1
Figure 1.8 Car Icon Design 2
Figure 1.9 Box Delivery Icon Design 1
Figure 1.10 Box Delivery Icon Design 2
Figure 1.11 Waiting Icon
Figure 1.12 Check Icon
Interactions and Transitions:
Bring your application to life by incorporating interactive elements and seamless transitions between screens. Use appropriate animations and transitions to enhance the user experience and create a natural flow within the application.
Figure 1.13 Navigation animation (Smart Animate)
Figure 1.14 Scrolling settings (overflow vertical)
Functionality and Navigation:
Implement the core functionality and navigation of your application. Ensure that all interactive elements are fully functional and behave as expected. This includes buttons, forms, menus, and any other interactive components specific to your application.
Figure 1.15 Menu
The indication in the navigation bar is by using different color to identify the current page that the user are in.
Figure 1.16 Quick Book Floating Button
The idea of the Floating button is to help the uses without thinking, click the quick book button to book a ride faster.
Figure 1.17 3 Big buttons to each of the MVP
This is what the curated icons that I designed looked like on the app.
Figure 1.18 Recommended route scroll button
This slider of recommended route also had the same basic idea as the floating button, which is to make the user experience better, quicker and easier booking. By using AI, hopefully can curate which routes that the user often input in the app, so when they want to go somewhere that they frequently go; they can just click one time to set up all the place of destination.
Content Integration:
Populate the prototype with realistic content to demonstrate how the application will look and feel with actual data. Use representative content and consider different scenarios to showcase various features and interactions within the application.
Usability Testing:
Conduct usability testing on your high-fidelity prototype to validate the design and gather user feedback. Recruit participants who match your target audience and observe their interactions and feedback. Make note of any usability issues or areas for improvement. Minimum 5 participants for the testing.
Implement the finalized visual design concept you created in the previous tasks. This includes color schemes, typography, icons, and any other visual elements that contribute to the overall look and feel of the application. Pay attention to details and ensure consistency across all screens.
Color Schemes
Figure 1.1 #F69B02, #E06302, #17B1E7
Figure 1.2 Circular Std (1)
Figure 1.3 Circular Std (2)
Figure 1.4 E-wallet Icon Design 1
Figure 1.5 E-wallet Icon Design 2
Figure 1.6 E-wallet Icon Design 3
Figure 1.7 Car Icon Design 1
Figure 1.8 Car Icon Design 2
Figure 1.9 Box Delivery Icon Design 1
Figure 1.10 Box Delivery Icon Design 2
Figure 1.11 Waiting Icon
Figure 1.12 Check Icon
Interactions and Transitions:
Bring your application to life by incorporating interactive elements and seamless transitions between screens. Use appropriate animations and transitions to enhance the user experience and create a natural flow within the application.
Figure 1.13 Navigation animation (Smart Animate)
Figure 1.14 Scrolling settings (overflow vertical)
Functionality and Navigation:
Implement the core functionality and navigation of your application. Ensure that all interactive elements are fully functional and behave as expected. This includes buttons, forms, menus, and any other interactive components specific to your application.
Figure 1.15 Menu
The indication in the navigation bar is by using different color to identify the current page that the user are in.
Figure 1.16 Quick Book Floating Button
The idea of the Floating button is to help the uses without thinking, click the quick book button to book a ride faster.
Figure 1.17 3 Big buttons to each of the MVP
This is what the curated icons that I designed looked like on the app.
Figure 1.18 Recommended route scroll button
This slider of recommended route also had the same basic idea as the floating button, which is to make the user experience better, quicker and easier booking. By using AI, hopefully can curate which routes that the user often input in the app, so when they want to go somewhere that they frequently go; they can just click one time to set up all the place of destination.
Content Integration:
Populate the prototype with realistic content to demonstrate how the application will look and feel with actual data. Use representative content and consider different scenarios to showcase various features and interactions within the application.
Conduct usability testing on your high-fidelity prototype to validate the design and gather user feedback. Recruit participants who match your target audience and observe their interactions and feedback. Make note of any usability issues or areas for improvement. Minimum 5 participants for the testing.
From these testing, I can see a pattern of people choosing the shortcut and quick access to finish the task..
Some of them were quite confused on the page when the driver is on the way / the Kumpool had been booked. The indication of the Kumpool ride being on the way is not quite clear, resulting the users to click other things to see and understand exactly what is happening. Maybe can be helped by adding a car and car line to indicate the car is moving towards the user
2 Users actually did not understand that the current trip bar can slide up and down, even though I have added a slider indication. Maybe what I can revise is to add on 2 options of interaction, on click and slide.
Figure 1.19 Slider of the current trip tab
Because of the high-fidelity prototype cannot have a really interactive moment of typing the address in real life, It quite confuses the user, but it is all on the tech problem not the UI/UX problem.
Re-design:
In process.. (Planning on redesigning the booked page and current trip page)