Final Project: Completed Mobile Application Design Prototype
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:
Visual Design
Interactions and Transitions
Functionality and Navigation
Content Integration
Usability Testing
Process
UI Kit
This is the final UI kit that contains the color cheme, typography, layout grid, icons, buttons and other components. I took the colors from the original Moovit app and tweaked it a little to my liking. I tried to keep all the buttons similar style yet easily distinguishable.
Figma Prototyping
I duplicated the low-fidelity prototype and started adding colors. I thought it would be a fast process to add colors to the prototype, but it took a while to coordinate all the colors for different components in a cohesive and appealing manner. Luckily, alot of the elements are using components and variants so it aids the process a little.
Here are all the variants and components making up the elements of the interface design. I find it really fun to work with components and variants, it's satisfying.
Then, I added illustrations to the prototype. I'm so thankful to be able to find great illustration with similar style for free on https://storyset.com/ (that Mr. Zeon recommended). I changed them all to blue and orange color to match the color scheme.
I also added pictures to make the prototype seem more realistic.
Usability Testing
Usability testing was done with 3 different users, each assigned a different scenario, which are:
1. What do you think about the overall app design?
Same as before, it's very clear and simple, and just with more colour so it's better and easier to see.
2. What do you think about the navigation? Was it confusing in anyways?
I think it's better compared to the previous one, because there were no colors so it was kinda confusing.
3. Do you have any suggestions?
I don't think so, but there was a small typo. Other than that it's all good.
User 2: Yun Yue
1. What do you think about the overall app design?
I think it's pretty amazing.
2. What do you think about the navigation? Was it confusing in anyways?
No, I found it very intuitive.
3. Do you have any suggestions?
Nope.
User 3: Suet Yee
1. What do you think about the overall app design?
The design is nice.
2. What do you think about the navigation? Was it confusing or intuitive?
I think it's intuitive. I think the back button can go to previous page is better than last time (low-fid) when it went to home page.
3. Do you have any suggestions?
No I think it's good as it is.
Final
Final High-Fidelity Prototype Video Walkthrough
First Version
Updated Version (include proper location names):
FEEDBACK
N/A
REFLECTION
I have to admit that I found this module quite tiring. While it wasn’t necessarily difficult, the workload was on the heavier side, and at times, it felt a bit tedious. I didn’t enjoy the analysis and user research phases as much as I enjoyed designing the prototype. However, I recognize how crucial these processes are for creating a visually appealing app with high usability.
This module demands time and patience, and I often struggled due to poor time management. It’s a lesson I’ve taken to heart, and I’m determined to improve. One of my key takeaways from this experience is a deeper appreciation for the complexity of app design. It’s far more intricate than it initially appears, requiring significant time, effort, detailed analysis, research, and repeated iterations to achieve an optimal design.
Ultimately, this module has shown me that there are countless factors to consider to ensure maximum usability and a seamless user experience. Despite the challenges, it has been a valuable learning experience that has strengthened my understanding of the app design process.
.jpg)
Comments
Post a Comment