WeatherScape (part 2)
The Design Process
Ideation
As this was a team task, ideation was a key aspect. All 3 of the team’s ideas had to be combined into one design interface. Refinement and feedback of ideation was crucial at this stage as it allowed me as the designer to strip back the cluttered ideas to only what was vital for the user.
Above are some of my sketches that I drew where I ideated upon…
- Information architecture
- Navigation layout
- Page Ideation and design elements
Experimenting with Visual Design Language
I love creating mood boards as I am a visual person, so being able to visualise the aesthetic, colours and typeface in a mouldboard first, tells me if the design is going to work or not.
The images above consist of my stylistic (vector visuals) mood board and my colour mood board (based off the weather seasons).
Initial High Fidelity Mock Ups
At this stage I was able to mock up the chosen ideation combined with the aesthetics of the mood boards, which is where our idea really came together, seeing the visuals come to life. Mock ups were created for the first assignment, so in the second assignment, I could refine and make the screens interactable by prototyping on Figma!
Prototype version #1
Our assignment required us to create 2 prototypes: 1 before user testing and one and after. Lets start with the before.
In the assignment requirements, users needed to login to be able to access the apps features. This login screen was designed this way so the user can get an understanding of the main function of the application, by seeing the dimmed rain in the background, and hearting the “weather scape”. This allows them to decide if signing up is right for them.
After signing up or logging in, we’re greeted by the main or homepage, where users will see their current state (Western Australia) where its “currently raining”. They can swap between states using the arrows, and different weather will be shown based on that state (SA is sunny, and NSW it’s clear)
The user can scroll down to read more about the client, and how ‘Weather Scape’ aims to help with student stress. The user can customise the sound settings, as well as a day and night mode when pressing on the 3 dots, have the ability to save todays background with the bookmark button, as well as view their profile, edit their information, and see their saved backgrounds from previous days within the profile button.
After doing this prototype, some questions raised; were buttons easily recognisable? Was the navigation easy to use and understandable? This could only be determined through user testing.
After the UX Researcher & Usability Tester of our team conducted 8 user tests on users within the target audience, I was able to improve apon my design, making it more user friendly.
Final Prototype (version #2)
This version is the improved upon version, and was the prototype the final website was based off of. This version should be very user friendly, easy to understand and navigate, and overall achieve the project goals.
Users said they were hesitant to “sign up” since they didn’t really understand how this website was going to help”. So when opening the app, we’re now greeted with an explanation of what weather scapes is, and the goals that we are aiming for.
After being prompted to sign up or login, users can either choose to take the tour or skip ahead. The tour guides users through the main interactions of the application, so there shouldn’t be any confusion on what buttons do, or where to find elements.
The main page stayed mostly the same, a suggestion from the user tests was to add the local time too, which will change based on your selected state. The background is now a bit darker to help with readability, without dulling the vibrant vector background.
Were you able to see the weather box in the first prototype? Neither did our user testers. The idea of the weather being hidden until hovered over was scrapped. The new weather box idea is that it would always be showing, but when the user stops moving their mouse, it will disappear (clearing some of the clutter from the screen).
The about page isn’t as heavy as before, and now distinctly summarises our idea and partnering client, headspace. There is now also a hamburger menu, which contains profile, saved backgrounds, settings, and a log out feature. The profile is much the same as before, but some users had trouble knowing that the saved backgrounds were found within their profile so it’s now its own section.
Because of time constraints for this assignment, the idea of day and night mode was scrapped, as the developer in my team wouldn’t have been able to accomplish that in time. That would be a feature to add in the future.
User Flow Diagrams
Each user flow is a user task or goal within the app, for example: “creating a user account” or “logging in” as ait would take to achieve the final task or goal. By creating these, it allowed us to see the key UI components, interactions, and potential choices the user may make. This then allowed us to see what areas would have the most traffic and what would need the most attention when designing and refining the prototype.
User Journey Maps
I also did some user journey maps, which depict a user’s journey when using the application regarding a goal they set out to achieve. Each map is one of the project goals defined at the beginning of this project. Doing this helped me evaluate whether the application really achieves what it set out to achieve, and if it didn’t, what could be done or changed so that the user experiences the best possible way of completing their goal.
Conclusion
I am really happy with the final outcome. I think It has lots of room for future expansion. Thinking about connecting people together, maybe the design shows how many users are on the application. This will make users feel not alone, and that there are other students out there who are just are stressed as they are. This idea could really take off if anything like covid every happens again. Imagine how popular this app would be during a lockdown. For those days where you can’t travel, or can’t get outside, weather scapes can be an escape, to immerse yourself in scenery, sound, and calm. This would also expand our target audience from students to anyone who misses the outdoors. Similarly, we could take this idea international, not just within the borders of Australia. Sick of having a boiling hot Christmas, have a look at a white Christmas somewhere in the world. By adding a search bar feature, we can allow users to view anywhere in the world!
Keep calm, cause the possibilities are endless.
Final Application
See the final working code here:
