Application Design 1 | Final Project : High-Fidelity App Design Prototype

16/12/2024 - 07/01/2025 (Week 13 - Week 15)

Yong Xiao Tong / 0368290
Application Design 1 / Bachelor of Design (Honours) in Creative Media 

Final Project: High-Fidelity App Design Prototype

---

Instructions

---

Final Project

After completing the usability testing and evaluations for the low-fidelity prototype in Project 3, we were instructed to proceed with creating the high-fidelity app design prototype.

Mood Board

The poor interface design of myCuaca was a common complaint in user ratings & reviews from the App Store.

To enhance the visual appeal of the interface, I decided to move away from the outdated design of the original myCuaca app, which resembled an old iPhone water-drop wallpaper. Instead, I opted for a cleaner, clutter-free background inspired by modern weather apps.

Colour Palette

For the colour palette, I chose to stay true to myCuaca's brand by using various shades of blue, maintaining consistency and creating a more cohesive look.

 

Figma Process

Here is a visual representation of the design progress, showing the transition from the original app design to the current prototype.

Usability Testing

Testing Scenarios

1.  Access Location and Enable Permissions

Open the MyCuaca app, grant location permissions, and check if the app accurately detects your current location. (just imagine you are in Seremban.)

2. View the Current Weather Forecast

Navigate to the homepage to view the current weather conditions for your location. Verify if the information is clear and visually appealing.

3. Check for Live Update Weather Alerts

Check if a pop-up alert notification appears on the screen, and navigate to the Weather Alerts and Warnings section to view the specific times when severe weather events are expected to occur.

4. Check the Weather Forecasts

Access the daily weather and next 6-day weather forecasts from the homepage. Ensure the layout and navigation are smooth, and the information is easy to understand.

5. View Severe Weather Alerts

Navigate to the Weather Alerts and Warnings section for severe weather warning updates. Check how the warning appears and ensure the details are clear.

6. Search for Weather in a Different Location

Use the search bar to find the weather forecast for a location other than your current one. Ensure the search functionality is responsive and delivers accurate results. (just search for Johor.)

7. Navigate to the Radar & Satellite

Go to the radar map and satellite feature and explore its functionality. Check if the visuals are accurate and the map loads seamlessly.

8. Access Weather Safety Tips

Navigate to the Weather Safety & Information section. Review if the tips are categorised clearly, easy to read, and provide helpful advice for different weather scenarios.

9. Explore the Settings Page

Access the Settings page, adjust language options and notification preferences.

10. Navigate to “About Us” Section

Navigate to the "About Us" section to view information about the app and any other relevant details.

Person 1

Person 2

Person 3

User Feedback

The feedback from the users was all positive. Users found the design and visual appeal of the app to be well-executed and visually attractive. Navigation was intuitive, with most users reporting no issues navigating through the app’s various features.

The severe weather alerts were deemed clear and helpful, with users finding them easy to understand. Overall, users felt that the app provided sufficient information to plan their day effectively and appreciated the simplicity and clarity of the design.

Based on this feedback, I decided to make a final refinement to the prototype's visual colour scheme, transitioning it from plain colours to a subtle gradient to enhance the overall visual experience.

FINAL SUBMISSION

---

REFLECTION

This final project was all about transitioning from the low-fidelity prototype to a high-fidelity prototype. Even though it seemed like it would be easier since I already had a base, the process was still time-consuming. However, as I continued, I started feeling more comfortable with Figma. Despite the time it took, I felt satisfied with the outcome. It was a great opportunity to apply everything I had learned so far and create the final product.

Although creating the high-fidelity prototype in Figma was challenging, I now feel much more confident using the platform for future projects. I’ve gained a deeper understanding of how to structure and refine prototypes to make them both visually appealing and functional.