Application Design: Project 3

17/6/24 - 29/7/24 // W8-W15

Mercy Chong HuiZiun // 0360929

Application Design // BDCM
Project 3: Low-fidelity prototype redesign

Instructions

Fig 1.0 Module Information Booklet
Project 3: Low-Fidelity Prototype Redesign
(MyRapid PULSE app)

[Task To-do]
  • UI kit
Figma Link: MYRapid PULSE UI KIT
  • Wireframe (Low-fidelity prototype)

Here's some screenshots during the process of prototype designing.

For this one, I used a mockup plugin and uploaded my image to have this phone effect. I'm doing this for my onboarding page so that it looks more realistic on the prototype.

Fig 2.1 Mockup Plugin 

These are the screenshots of my onboarding pages for MyRapid PULSE app. I tried to have a consistent color theme and with similar phone layout so that it won't look messy.

Fig 2.2 Onboarding Pages

Fig 2.3 Prototype animation on lo-fi design prototype

Fig 2.4 Prototype animation on onboarding pages and high-fi prototype

  • User Scenarios
Scenario 1: A new user has just downloaded the MyRapid PULSE app and is exploring its features for the first time. Guided by the onboarding pages, they learn how to navigate the app, understand its main functions, and discover how to use it for planning trips, checking transit information, and utilizing partner services like AirAsia Ride and Kumpool for a seamless travel experience.

Scenario 2: A frequent traveler needs to book a trip through the partnered apps in the MyRapid PULSE app as they have more deals. They use the app to search for available transit options, compare routes and schedules, and book their trip. 

Scenario 3: A regular commuter checks the MyRapid PULSE app for real-time transit information before leaving home. They view live updates on bus and train schedules, delays, and alternate routes.

After providing the user scenarios, I then conducted usability testing which consists of 3 users to help test out the prototype.

Feedbacks from Usability Testing
Scenario 1 (New user)
- 
Scenario 2 (Current user booking a trip)

Scenario 3 (Checking transit information)

User testing recordings here

Figma Link on Prototype 

Feedbacks
(from Outlook)

W13 (Lo-fi prototype)
- Check the text size of your title. Make sure it's consistent.
- Fill up the details in your profile page.
- Aligning the boxes/buttons.
- Make sure your spacing is equal in between the text.
- Make the maps bigger, and make the phone and email icons in the feedback page smaller.
- Add on "forget password" section in the Login page.

W15 (High-fi prototype)
- Make sure your text button size is consistent
- Change the design of the map in real-time transit information page as it looks messy.
- Have a consistent spacing between your buttons.
- Bottom icon buttons are distorted in one page so please fix it.
- For the profile page, use a different shade of blue to color match.


Reflections
This part of the assignment definitely took a lot of time to slowly build up my prototype design of the app. Completing the lo-fi prototype design assignment for the MyRapid PULSE app was both a challenging and good learning experience. Managing my time effectively was particularly tough, as balancing this project with other responsibilities required meticulous planning and discipline. The design process itself was tedious, involving numerous iterations to ensure the prototype met usability standards. Additionally, preparing for and conducting user testing added another layer of complexity, requiring detailed coordination and feedback analysis. Despite these challenges, the assignment was an invaluable learning experience. It deepened my understanding of user-centered design principles and the importance of thorough testing to create intuitive interfaces. Each obstacle I encountered reinforced my problem-solving skills and commitment to delivering a well-designed product. In the end, the effort was well worth it, as it significantly enhanced my proficiency in prototype development and user experience design.




Email Post

Popular Posts