Application Design 1 | Project 3 : Lo-Fi App Design Prototype

02/12/2024 - 16/12/2024 (Week 10 - Week 12)

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

Project 3: Lo-Fi App Design Prototype

---

Instructions

---

Project 3: Lo-Fi App Design Prototype

After finalising the UX design document in the previous Project 2, we were instructed to proceed with creating the low-fidelity app design prototype.

References

I began by searching for various weather apps design to help me understand common layouts.

Then, I started sketching low-fidelity wireframes in Figma.

Figma Process

This was my first experience working with reusable components in Figma, so I spent some time watching tutorials to learn how to set up and link interactive components.

Below are the interactive components I created, such as an action menu button that serves as a navigation bar, a toggle switch, and a search bar.

I initially tried to design the icons myself, but later I found these icons to be more suitable.

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

Usability Testing

For the usability testing process, I created a set of scenarios to guide users in testing the functionality of the prototype. These scenarios were designed to reflect real-world use cases and ensure the app's core features were intuitive and easy to navigate.

Scenario 1: Access Location Services in the myCuaca App

Imagine you’ve just downloaded the myCuaca app and want to check weather updates for your current location. Open the app, allow location access, and ensure the app shows accurate weather information based on where you are. (In this case, just imagine you are in Seremban.)

• Observe: Is the process of enabling location services clear and straightforward? Does the app quickly display localised weather data?

Scenario 2: View the Current Weather Forecast

You’re planning a trip today and need to check the current weather conditions as well as the forecast for the next few days. Navigate to the section that provides the current weather forecast and the 6-day outlook, including details such as the date, weather condition, and temperature.

• Observe: Is it easy to locate both the current weather information and the 6-day forecast? Does the design present the information in a visually clear and easy-to-understand way?

Scenario 3: Check for Live Update Weather Alerts

You’ve heard about a potential thunderstorm in your area and want to check if the app provides any alerts or warnings. 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, such as thunderstorms, earthquakes, or strong winds, are expected to occur. If no severe weather is forecasted for today, ensure the app displays a “No Warning” message.

• Observe: Is the weather alert easy to find? Are the times of severe weather events clearly displayed? Does the information feel useful and actionable?

Person 1

Person 2

Person3

User Feedback

I created 5 questions to evaluate the usability of the prototype. These questions focused on key aspects of the app, such as ease of completing tasks, navigation clarity, and the usefulness of severe weather alerts. 

The responses were positive, with users finding the tasks easy to complete and the interface generally clear and user-friendly. None of them reported any significant difficulties navigating through the app and were satisfied with the app’s functionality.

All 3 users agreed that the severe weather alerts were clear and easy to understand, and the app’s simplicity was appreciated. In conclusion, the feedback suggested that the app was effective and met their expectations.

Based on this feedback, I decided to focus on improving the visual design for the next iteration.

FINAL SUBMISSION

---

REFLECTION

For this project, my focus was on creating and testing the usability of the low-fidelity prototype. I started by designing basic wireframes for the app in Figma, which was a new experience for me. At first, it felt like a slow process because I had to figure out how to use Figma's more advanced features, such as creating reusable components and setting up variables. I spent a lot of time watching tutorials and experimenting with these tools. The tutorials were really helpful as they allowed me to learn how to use these features effectively, like creating interactions and linking screens together.

Once the prototype was ready, I conducted usability testing with a small group of users. The process itself went surprisingly smoothly. It gave me insight into how users interacted with my design, and they all found the prototype to be functional and effective.

Reflecting on this process, I learned a lot about the importance of testing early in the design phase. Overall, this task taught me how to iteratively improve a design based on real-user feedback, and it helped me appreciate the crucial role usability testing plays in refining a product.