WeatherScape- Part 2/2

Written By Nadifa Aziza

Final Product Link:

https://enchanting-pothos-e52d8c.netlify.app/

User Goals

From the above data (refer to part 1) that we have collected, there are three main goals that the users are looking for:

1. Help users to relax, relief stress,
and have a better sleep

2. To escape from the routine,
without having to spend much or travel far

3. Setting positive atmosphere at home
and bring the ‘nature’ closer

Usability Testing

After the first design was completed, I have conducted 2 user tests, the design prototype, and the backend API. By testing the UI prototype, I would like to know if the design choices, navigation, and features are well delivered and have meet our user expectations. The test involved 9 participants that ranges between the age of 18 to 27 years old. Some have just graduated from high school and some have started to pursue their career. There are a set of tasks that they needed to complete and a few questions regarding their experience after going through the app.

The result was that most of the participants completed 25% to 75% of the tasks. The issue with the first design phase is about placements of some elements. For example, the weather information that only appears when the mouse hovers over makes it difficult for the user to find, as it lacks of visual clue. The other one was the placement of saved elements, there was a misunderstanding that makes the user though it would be placed under the hamburger button, instead of the profile button. Aside from that, we need to improve some contrast and legibility of the text.

When the participants were asked about the overall experience and if they had any suggestions, most of them are quite satisfied with the experience and the features it offers. However, there are a few minor suggestions that we’ve got.

· Create its own button for sound instead of putting it under the hamburger menu

· Add water droplet effects

· More detailed information about the weather (hourly, weekly, etc)

· Add a heading to the saved collection

· Add labels to each button

· Project famous landmark of each city

These suggestions can be applied as we progress, however our priority is to improve the usability in the first place. Therefore, I suggested to fix the navigation to clear up the misleading button, to make a more obvious weather information, and to fix the contrast for better legibility.

The purpose of the second test is to find out if the elements within the web functions as it should be. It is noted that the API backend is not fully completed yet, so there are things that still underdeveloped.

During the first try, the login page did not work, hence we could not continue the test until it is being fixed. Hence, I conducted a second test after the login page was fixed. After the participant logged in, the visual aesthetic was looking good, user can easily move across states easily, and the parallax effect increases the engagement of the participant. However, aside from the buttons and the weather information that are still on progress, the participant could not find the log out page. Hence, I proposed to the developer to add the sign out button to let the user exit or change to another account.

Future Potential

I feel like user testing during this phase is not as urgent as in the previous stage. When the app has already been launched, we can then observe through their activities while they are using the app. We can use the analytics to improve the app based on the data by analysing their behaviour while using the app, such as analysing mouse movements, clicks, or most used features, we can then take actions upon it and improve the app based on the data. UX researchers can also find a way to improve the app by checking user feedback on the app store.

Otherwise, if a new feature that significantly changes things around, researcher can conduct a more intense user test as we did during the early development phase. UX researchers can give them a set of tasks they need to complete. While doing this, we can observe their mouse movements, their click points, how long they need to figure out a certain functionality, etc. Then after these are done, researchers can ask a few follow-up questions to find out more details behind a certain behaviour or if there is anything the users thought that isn’t being communicated while doing the test. From this data, then researchers can find a way to improve the app and find solutions.

Prototype Link:

Prototype 1

https://www.figma.com/file/iJJ1Fej7QDKWkEO2xGGW4z/DigEx-Design-Studio--Mockups-and-Prototype(s)?node-id=26%3A2

Final Prototype

Link to Prototype version 2(final): https://www.figma.com/file/iJJ1Fej7QDKWkEO2xGGW4z/DigEx-Design-Studio--Mockups-and-Prototype(s)?node-id=238%3A2

Walkthrough Prototype Video

https://vimeo.com/767175542

Working Web Link:

https://enchanting-pothos-e52d8c.netlify.app/

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store