Application Design 1 - Final Project / Completed Mobile Application Design Prototype
02.11.2024 - 12.12.2024 / Week 11 - Week 15
Siang Huey Yee / 0369549Final Project / Completed Mobile Application Design Prototype
OUTLINE
INSTRUCTIONS
Module Information Booklet
FINAL PROJECT - HIGH-FIDELITY APP DESIGN PROTOTYPE
In the final project, students will apply the knowledge and skills acquired from tasks 1, 2, and 3 to create a polished and fully functional product. This involves integrating visual assets and refining the prototype to deliver a complete user experience for a selected task.
Requirements:
1. Create High-Fidelity Prototype:
Develop a high-fidelity prototype using Figma or similar tools, ensuring all screens, actions, and feedback are included. Incorporate colours and visual assets based on the UI kit to enhance the design.
3. Recruit Participants:
4. Conduct Testing and Gather Feedback:
5. Refine Prototype:
Use the feedback gathered from participants to refine the high-fidelity prototype, ensuring consistency in design and following the guidance of the UI kit. Complete a final walkthrough video of the updated prototype.
UI KIT
I have used Bright Orange (#FF6800) as the main colour for the redesigned Moovit app, with the text colour set to Dark Charcoal (#333333). For the typography, I have chosen Roboto for the headings and Helvetica Neue for the content. The icon set I have used is Stratis UI Icons by Montgomery.
- My UI KIT
HIGH-FI PROTOTYPE PROCESS
- Progress 1
I have modified my Loading page by shortening the loading animation, as suggested by both Mr. Zeon and User 2 during the Lo-Fi Prototype user testing. The figure below highlights the differences between the original length and the new which is the shorter version.
Additionally, I have updated the progress bar for the Check-in Rewards on the Home page. The previous version, which featured transportation icons symbolizing each milestone of the journey, appeared slightly cluttered, as pointed out by User 1 during the Lo-Fi Prototype user testing. Furthermore, I designed and drew the milestone badges using Adobe Illustrator. I created three badge designs, along with an "unknown badge," to represent the milestones achieved by users in the scenarios. The "unknown badge" symbolizes milestones that have not yet been achieved, adding an element of mystery and surprise to encourage users to continue interacting with the app.
Milestone Badge 1 - "Step Starter"
Milestone Badge 2 - "Pedal Pioneer"
Milestone Badge 3 - "Swift Navigator"
- Progress 2
I have added a hover effect for the Transportation Methods icon buttons on the Stations & Lines page, which include seven options: All, Bus, LRT/MRT, Monorail, Train, Cable Car, and Ferry. This enhancement increases the interactive elements, making it more engaging for users navigating my redesigned Moovit app. Similarly, I added hover effects for the buttons on the Profile page, which feature six options: Themes & Icons, Settings, Emergency Contacts, Privacy & Policy, and About Moovit, to further enhance user interaction.
In addition, I have included an "Explore Milestones" button on the Profile page. This allows users to view their progress on their journey of milestones and access all the badges they have collected so far.
- Progress 3
After conducting the High-Fi user testing with three users, I received extremely helpful feedback and suggestions, which guided me in further refining my High-Fi prototype to enhance the user experience.
Based on User 2's recommendations, I modified the Currency Converter section on the Ticket & Finance page by adjusting the placement of the elements to ensure smoother navigation and to eliminate the need for users to scroll back when proceeding to the next step. Additionally, I made the Currency Converter interactive and partially functional, an improvement from the Lo-Fi prototype where it was static.
User 3 provided valuable feedback on the Navigations & Maps page, specifically for the viewing maps section. She mentioned feeling slightly confused about the need to drag the map to view the full version and suggested either renaming the button to "Drag to View Full Map" or making the button clickable to navigate directly to the full map view. Additionally, she pointed out that the zoom-out button lacked a hover effect, which was present on the zoom-in button. Considering this, I updated the zoom-out button by adding a hover effect and changing its colour from Dark Charcoal (#333333) to Teal (#00A794) for better visibility and user interaction feedback.
- Final Progress
After all the changes made for the problem or mistakes that I found during the user testing, I came to finalize my High-Fi prototype which have check it by previewing again and try navigate the app by myself again and again until I found there is no problem on the navigation for the final version of my High-Fi prototype before record the walkthrough video for this High-Fi prototype as my final submission.
- Overall View of High-Fi Prototype
USER TESTING
I also conducted a Zoom meeting with three users to carry out user testing for my High-Fi Prototype, using the same scenarios as in the Lo-Fi Prototype. Their feedback has been summarized in the Canva slides provided below, and the recording is available through the embedded Google Drive link. Based on the users' suggestions and feedback, I made some changes, as mentioned in the Process section, before filming the Walkthrough Video for my High-Fi Prototype of the Moovit redesign app.
- User Testing Scenarios and Q&A (PDF)
- User Testing Scenarios and Q&A (Canva Slides)
- User Testing Scenarios and Q&A (Recorded Video)
Google Drive Link (User Testing Recorded Video): https://drive.google.com/drive/folders/1nwSogkS0r9JcXWMER2UZxLUvoQyxuGAe?usp=sharing
- User 1 - Scenario 1: Jo Yee
- User 2 - Scenario 2: Ming En
- User 3 - Scenario 3: Angel
FINAL HIGH-FI PROTOTYPE SUBMISSION
- High-Fidelity Prototype - Figma File
- High-Fidelity Prototype - Figma Prototype Preview
To view the High-Fi Prototype in Figma Preview, please adjust the scaling option to "Fill Screen" to see the entire completed page.
- High-Fidelity Prototype - Walkthrough Video (YouTube)
FEEDBACK
Week 13:
Mr. Zeon advised me to reduce the duration of the loading animation, as it was too lengthy and could annoy users. After modifying the loading page and presenting it to him again, he commented that the changes were much better. Additionally, I showed him some new progress on the Ticket & Finance page, and he mentioned that it looked fine but advised me to pay closer attention to the alignment of icons and buttons to avoid making the content appear too cluttered.
Week 14: -
REFLECTION
After completing the low-fidelity prototype, I had the opportunity to modify and enhance my design to create a polished high-fidelity prototype for the Moovit redesign app. This phase allowed me to finalize critical design decisions, including the colour scheme, typography, and icon sets, which were carefully chosen to align with the app’s overall theme and improve its visual appeal.
I deeply appreciate this opportunity to refine my skills and develop a more user-centric design. Utilizing the suggestions and feedback provided during user testing, I revised the app to ensure it is smoother and easier to navigate. These adjustments were essential in addressing user needs and creating a seamless experience.
Through this process, I gained a deeper understanding of how thoughtful design choices significantly impact user experience. The insights and opinions shared by the users during testing were invaluable, as they guided me in making informed decisions and highlighted the importance of user-centered design. This project has been an enriching experience, helping me grow as a designer and further reinforcing the role of UI/UX in creating functional and impactful applications.
Comments
Post a Comment