Final Project / Completed Mobile Application Design Prototype
Bachelor of Design (Honours) in Creative Media
Application Design DST 60504
Application Design I - Final Project
Overview
> Instructions
- UI Kits
- Design Process
- User Testing
- Final Outcome
> Feedback
> Reflection
Instructions
In this final project, students were assigned to create a high-fidelity prototype for our mobile application. The prototype should showcase the final visual design, interactions, and functionality of the application. High-fidelity prototypes will serve as a true representation of our application, allowing users to experience the final design and provide feedback. It should showcase a polished and polished user interface that adheres to the brand and usability principles established throughout the design process.
Requirement:
1. Visual Design:
Implement the finalized visual design concept you created in the
previous tasks. This includes colour 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.
3. 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.
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.
5. 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 a note of any usability issues or areas for
improvement. Minimum 5 participants for the testing.
UI Kits
Colour Palette
I keep the Kummute app's main colour, which is Tiffany Blue, and then expand the colour palette and divide them into main and secondary colours.
Typography
Icon Sets
The icon set I got from the Figma community, called "Stratis UI", and will have a uniform stroke weight of 2px for all icons.
Design Process
In my Hi-Fi prototype, not only did I use a
variety of colours and also inserted lots of
illustrations. As I found that this approach can
greatly enhance the visual appeal and create a
more friendly feeling through the UI design. The
use of illustrations will make the interface
feel more engaging, encouraging the users to
interact with the app more comfortably.
The illustrations are all taken from a website
called 'StorySet', which includes various types
of free illustrations. Highly recommend this
website!
Click here to view the StorySet website.
|
|
Onboarding page |
|
| Login page |
I've redesigned the layout of the Home page, I found that although the layout looked good in the Lo-Fi prototype, however, the outcome didn't reach my expectations when it comes to the Hi-Fi prototype. So, I make the top container bigger to full screen, and put an illustration into it.
|
|
Home page before & after |
|
|
Menu bar |
|
| Profile page |
|
|
Menu bar - Help center, About Kummute, Privacy
policy, Safety ride |
|
| Notifications page |
|
| Book a Ride page |
|
| Driver in-app contact & information |
|
| Schedule a Trip page |
|
| Recent rides activity page |
|
||
Finance Management page
|
|
||
|
Transactions history & Expense breakdowns I changed the subscription status to the Loyalty Program page. Additionally, I added a new page named 'Your Voucher' in the Redeem Shop, where the user can view their claimed voucher.
|
|
|
Loyalty Program page |
|
|
Redeem shop - Claimed voucher |
User Testing
Same as the Lo-Fi prototype, we also need to conduct user testing for our Hi-Fi prototype too, and my scenarios didn't change too much. This time I conducted my user testing online via Zoom Meeting. After the users finish their task, I send them my questionnaire to fill it out.
Users Feedback:
Most of my users say they find the Hi-Fi prototype is easy to use and appreciate its design and layout. They noted that the visual elements have enhanced their experience and engagement. Overall, my Hi-Fi prototype doesn't have much to modify.
Feedback
Specific
- Placing the subscription status on the Profile page is weird, should reconsider how to place it.
Specific
-
Reflection
Comments
Post a Comment