Application Design 1 - Project 3/ Lo-Fi App Design Prototype
02.11.2024 - 12.12.2024 / Week 11 - Week 15
Siang Huey Yee / 0369549
Project 3 / Lo-Fi Design Prototype
OUTLINE
INSTRUCTIONS
Module Information Booklet
PROJECT 3 - LOW-FIDELITY APP DESIGN PROTOTYPE
After completing the UX design process, we will proceed to create a low-fidelity prototype of the app. This involves arranging all the screen wireframes, actions, visual feedback, and linking them together using software such as Adobe XD, Figma, InVision Studio, or any other prototyping tool.
Once the prototype is ready, we will conduct usability testing by inviting participants to interact with it. During the testing process, we will gather valuable insights, including user feedback, responses, pain points, and any issues observed. This process will be documented through video recordings, and a detailed report will be produced, analyzing the findings and proposing solutions to address the problems identified during the testing phase.
Requirements:
1. Create Low-Fidelity Prototype:
Develop a low-fidelity prototype using Figma or similar tools, ensuring all screens, actions, and feedback are included.
3. Recruit Participants:
4. Conduct Testing and Gather Feedback:
5. Refine Prototype:
Use the feedback gathered from participants to improve and refine the low-fidelity prototype, ensuring consistency in design with a UI kit.
UI KIT & VISUAL REFERENCES
I have conducted some research and created a UI kit for my visual references by sourcing inspiration from platforms like Pinterest and Storyset.
- Visual References
- My UI KIT
- Progress 1
I started by designing the Home page, beginning with the check-in rewards feature, which appears as the first element on the screen when users access the Home page. It includes a display showing the check-in day and a tick box, along with a pop-up notification to inform users.
Additionally, I created a navigation bar positioned at the bottom of the screen. Initially, it consisted of five sections arranged within a simple box layout.
- Progress 2
Before presenting my progress to our lecturer, Mr. Zeon, I created a second version of the check-in rewards feature on the Home page. Inspired by the reference image shown on the right side, I redesigned it to include a calendar on the left and rewards displayed on the right.
Additionally, I proceeded with designing the transportation methods selection buttons on Stations & Lines page, which include seven options: All, Bus, LRT/MRT, Monorail, Train, Cable Car, and Ferry. I also created a ticket design using the Pen tool in Figma for e-ticket booking on Ticket & Finance page which initially, the ticket only displayed essential details such as the price, date, and time.
- Progress 3
I had a consultation session with our lecturer, Mr. Zeon, where he provided valuable suggestions for improving my designs. He recommended that the navigation bar should emphasize the main section, which is the Navigation & Maps Page. To achieve this, he suggested placing it in the center of the navigation bar, enlarging the icon, and making it stand out. This feedback led to the second version of my navigation bar, as seen on the right.
For the check-in rewards feature on the Home page, Mr. Zeon advised me to use the "what day" tick box design but to slightly rearrange it from the first version while keeping the rewards details shown on the right side, as in the second version. Additionally, I incorporated a progress bar above the section to display the user’s check-in progress and allow them to see what they have achieved so far.
- Progress 4
I have also made adjustments to the placement of the transportation method selection buttons on the Stations & Lines page. The seven options were rearranged to reduce page clutter, following advice from Mr. Zeon. Additionally, I created the Advanced Filters section on the same page, but Mr. Zeon suggested that it appeared too cluttered. He recommended spacing out the content with two more lines and aligning the toggle button with the checkbox on the same alignment for better organization. He also advised redesigning the "Apply" page after completing the advanced filters. Specifically, he suggested resizing the station facilities icons as they were too large and distracting from the main content.
For the e-ticket booking feature on the Ticket & Finance Page, I added departure and arrival times, as well as transportation method icons, to help users quickly identify the relevant transportation type and schedule. These changes aim to enhance the user experience by making the interface more intuitive and visually balanced.
- Final Progress
I implemented error prevention features where users can click to view and claim their check-in rewards. Additionally, I enhanced the progress bar by adding transportation method icons to symbolize each milestone reached. A Milestone Badge will also be awarded to users upon achieving each milestone, adding an engaging element to the rewards system.
Additionally, I added a Loading Page to the app and utilized Figma's built-in Smart Animate feature to create a smooth and engaging loading animation. This enhancement aims to improve the user experience by making the transition between pages more visually appealing and seamless.
For the Ticket & Finance page, I introduced a reload page and a purchase e-ticket page to provide users with a seamless ticketing experience. Furthermore, I designed a Profile Page with six section buttons that grant access to the following features: Themes & Icons, Settings, Emergency Contacts, Online Helpdesk, Privacy & Policy, and About Moovit. These additions aim to enhance functionality and improve user accessibility throughout the app.
- Overall View of Lo-Fi Prototype
I conducted a Zoom meeting with three users to carry out the user testing. 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 implemented the necessary changes in the High-Fidelity Prototype.
- User Testing Scenarios and Q&A (PDF)
- User Testing Scenarios and Q&A (Canva Slides)
- User Testing Scenarios and Q&A (Recorded Video)
- User 1 - Scenario 1: Jo Yee
- User 2 - Scenario 2: Ming En
- User 3 - Scenario 3: Angel
FINAL LO-FI PROTOTYPE SUBMISSION
- Low-Fidelity Prototype - Figma File
- Low-Fidelity Prototype - Figma Prototype Preview
- Low-Fidelity Prototype - Walkthrough Video (YouTube)
FEEDBACK
Week 11:
Mr. Zeon advised me to retain the "what day" tick box design for the check-in rewards feature on the Home page but suggested slightly rearranging its layout from the first version while keeping the rewards details displayed on the right side, as seen in the second version. Additionally, he recommended emphasizing the main focus page, the Navigations & Maps page, in the navigation bar to enhance its visibility and usability for users.
Week 12:
Mr. Zeon reviewed my ideas for the entire Lo-Fi prototype and suggested incorporating more creative elements, such as icons or graphic designs, to present information more clearly and intuitively for users. He also recommended making adjustments to the alignment and placement of certain sections to prevent the pages from appearing too cluttered and to ensure the main content remains the primary focus.
REFLECTION
Throughout the process of redesigning the Moovit app for Project 3, I encountered several challenges in deciding on the right direction for my design. There were numerous ideas that I considered, and at times, it was difficult to determine which one would best serve the app’s users. This project involved a lot of creative exploration, but user testing played a crucial role in guiding my decisions. The feedback provided by the participants helped me refine my design by highlighting what worked well and identifying areas for improvement. Their experiences and insights provided valuable suggestions that I incorporated into the redesign of the Moovit app prototype.
One of the most significant takeaways from this project is the importance of user experience (UX) and user interface (UI) in shaping how users interact with an app. This module has given me a deeper understanding of how thoughtful design can directly impact the effectiveness and usability of an app. It was eye-opening to see how small changes to the interface could make a significant difference in user satisfaction.
I am truly grateful for this opportunity to apply what I’ve learned in the UI/UX design process and to engage with real-world design problems. Being able to redesign an existing app like Moovit has allowed me to familiarize myself with the intricacies of app design and how it influences the overall user experience. This experience has been invaluable, and I’m excited to continue developing my skills in future projects.
Comments
Post a Comment