Weather App Case Study
Embedded Files
Timeline:
Timeline:
February 2023 - March 2023 (5 weeks)
.
Role:
Role:
This is a personal project I created on my own. I served as the Researcher as well as the UX/UI Designer for this project.
Weather apps are an essential part of people's daily lives
Weather apps provide up-to-date information about the weather conditions in any desired location. However, with the abundance of weather apps available, users often find it challenging to choose the best app that provides accurate, easy-to-understand, and relevant weather information.
How can we simplify the UI of weather apps?
The problem lies in the complex and cluttered user interface of most weather apps, making it difficult for users to navigate and find the information they need quickly. Additionally, most people fail to understand the meaning of the data provided to them, which leads to a negative user experience.
The Solution
I redesigned a weather app so that it provides and explains necessary data, and has a simple interface and minimal design so that users can easily use the app in their day-to-day life.
View multiple locations on the homepage
Easily access the menu to change settings
Change units with ease
View detailed information for each location on their own page
Information is hidden in tabs to prevent users from getting overwhelmed
Relay information using text and color to appeal to learners of all types
Understanding what to include in the app
Before starting the design process, I conducted user research to understand user needs and preferences. My target participants were adults from the general population ranging from 18 -50 years old who use weather apps on a daily basis. I obtained data from users by creating a Google Form survey and conducting interviews. I received 9 survey responses and interviewed 4 participants for a total of 13 users.
A copy of the form I used to collect data.
Analyzing user responses to determine features
After collecting the data, I sorted through the responses to find common patterns between the users. I wrote all of my notes down on sticky notes and categorized them based on the topic of their response. After grouping common responses, I was able to come up with 4 key findings that factor into users' experiences when using a weather app.
The affinity map I created from the user research
Key Findings:
Design Recommendations
After going through the 4 key findings, I came up with 4 design recommendations to implement that would greatly improve users' experiences when using a weather app.
The main takeaway is that the weather app should include all data rather than some, but it needs to be presented in a simple way so that users who do not need the information do not get overwhelmed by the app.
Recommendation 1: Add summaries and visuals along with the information to help users understand the meaning of the data
Recommendation 2: Include a 7-Day forecast instead of a 10-day forecast since weather patterns tend to change and users get frustrated with changing data.
Recommendation 3: Keep colors and fonts minimal to not overwhelm users
Recommendation 4: Have the radar map automatically zoom into the user’s precise location instead of the general city
Mapping out the features
After finding what features to add, I created a user flow to get a general sense of what features the app will have and how the information will be presented on the app.
I also finalized the fonts and colors that I will use in my design. I chose to have 2 fonts and 3 main colors along with 3D weather icons. This design is simple while still being modern, which appeals to users.
Time to design!
Since there were a lot of features to add, I first made initial sketches to see different ways I could design those features.
When going into Mid-Fi wireframes, I made a few changes. I changed how the at-a-glance details would look on the detailed location page. I felt like the information architecture flowed better.
I wasn't sure if individual blocks or tabs were better, so I made both wireframes to test further.
For the menu, I changed from a hamburger menu to a 3 dot menu since a hamburger menu took up more space than it needed.
I also added a plus button at the bottom so that users could add a location.
Mid-Fi Wireframes based on user testing
After user testing these designs, users liked the tabs better so that they could ignore the information if they wanted to.
I also found that users didn't like the structure of the at-a-glance and liked how it looked on my sketches better, so I went back to the old design.
As for something the users liked, the combination of visuals as well as text used for the Pollen, UV Index, and Air Quality information received positive feedback.
Final Designs
Finally, after finalizing my wireframes, it was time to create the final design! Here's the final prototype so you can try it out yourself.
Conclusion
The project helped me learn how to use auto layout and design systems in Figma. I also learned how to ask questions in surveys and interviews to retrieve valuable information from users.
Due to time constraints, I wasn’t able to finish everything. In the future, I’d implement more features such as horizontal scrolling between the cities and adding and removing locations.
The biggest thing I learned from this case study is to not be afraid to make changes. Halfway through the case study, I completely changed the fonts and color palette, and this change made a huge difference in how the final designs turned out.
Reflections
Thanks for taking a look! This was my very first case study ever, and I still have a lot to learn.
I’d like to thank the Bits of Good Design Bootcamp for teaching me all the skills I used to create this case study. I couldn’t have done it without them!
Page updated
Google Sites
Report abuse