WeatheR channel App Revamp
About
The Weather Channel App is a go-to for many iPhone users, often being one of the first few apps people check before heading outside. Having an intuitive and visually appealing interface makes it easy for users to get accurate weather info, which can really improve our daily routines. Whether commuting to work, planning outdoor activities, or figuring out what to wear, reliable forecasts make a big difference in our day to day. Plus, real-time updates on severe weather help users stay safe and prepared. All in all, a great weather app is key to a smoother, safer, and more efficient day.
pROject OvERviEW
Roles
⟡ MARKET RESEARCHER ⟡ PRODUCT DESIGNER ⟡ VISUAL DESIGNER ⟡
Programs
⟡ ADOBE XD ⟡ ADOBE ILLUSTRATOR ⟡ PROCREATE ⟡ ZOOM ⟡
Goals
The weather channel app revamp is a personal project that helped me apply what I have learned about the UX/UI Design process. This project was my first project 4 weeks into learning UX/UI design. My goal was to recreate an app that I use often and challenge myself by creating a 2 week deadline for the project.
Timeline
REsEaRcH
Participants
I recruited a total of 10 participants through personal networks, Reddit, and Facebook groups. My target audience were people who liked to spend time outdoors. 5 of the participants use the app less than 3 times a month while the other 5 participants use the app at least once a day.
User Interview
I started the user interview with general questions to create a much more comfortable environment for the participants and then I asked them questions about their experience with using the app. Towards the end of the interview, I conducted thinking aloud testing while giving participants a task on the weather app.
KEY Findings
100% of participants stated that they used the app to check the current temperature and the temperature throughout the week.
100% of participants stated that their favorite element of the app is the weather app’s background (animated design element) and how it changes according to the current weather. For example: If it is raining, the background will be an animated screen of rain droplets.
100% of the participants liked having the ability to scroll through different temperatures throughout the day without having to click a button and go to a separate screen.
90% of participants stated that they used this weather app instead of another app because it is the default weather app for iOS; 10% of participants stated that they would download another weather app if it was free because they believe the weather is more accurate on other apps such as Dark Sky.
Pain points:
100% of the participants wish they could search for the weather for a specific location without adding it to their list.
90% of participants stated that they believe that there is too much information on the app such as: “feels like, precipitation, pressure, visibility, uv index”
100% of participants stated that they wish they were notified when it was going to rain throughout the week.
80% of participants felt that the “+” icon in the app is not indicative of the search action (when wanting to search for a city’s current temperature) and that the “+” icon is only useful when you want to add a city to your weather list; they also felt that the icon was not big enough.
50% of participants did not realize the weather channel icon was clickable; the other 50% of participants that knew the icon was clickable but felt it was an unnecessary element in the app.
Empathy Mapping
Using the information I gathered from the user interviews, I was able to gain more insight on the Weather app users and their needs. I created an empathy map that reflected the user’s environment, actions, feelings, frustrations, and benefits from using the app.
UsER pERsOna
After creating the empathy map, I was able to create a user persona using the information I gathered—meet Adventurous Allen!
jOuRnEy Map
This journey map describes Allen’s journey while navigating the weather app; the map includes solutions to the average users’ problems while navigating the app.
dEfinE
With my understanding of our user, Allen, I wanted to start thinking about what are some of the problems that he encounters with the Weather Channel app. Using the empathy map, user persona, and user journey, I was able to have a deeper understanding of one of the common issues that users encounter.
Rain can be unpredictable and users such as Allen are not able to be notified before it rains
Allen is limited to a one week weather forecast.
Allen is overwhelmed by too much information he finds unnecessary
Solution
Allen wants to be notified before it rains so that they can be prepared
Allen wants to be able to check the weather a few weeks in advance to be prepared for possible scenarios such as a vacation
Allen wants the necessary information so that they can have a quicker and more efficient experience when scrolling through the app
Brainstorming
After coming up with solutions, I was able to brainstorm and generate as many ideas to create a more intuitive and seamless experience with the Weather Channel app. I used a mind mapping method to organize my ideas and select the most fitting features for the app.
Problem
ApplicatiOn Map
After defining the problems and solutions, I was able to brainstorm some features for the app. I planned the architecture of the application by creating an application map that displays all of the features that would create a much more intuitive experience for the users.
User Flow + Mid-Fidelity Wireframes
View an enlarged version of the user flow and wireframes here
TEsting
LOW FIDELITY PROTOTYPE
Usability Testing
I interviewed 5 participants in person with Think Aloud testing. The users had to complete 4 tasks given to them.
TASKS GIVEN TO PARTICIPANTS
Locate the weather of Aspen, Colorado without adding it to the list of favorite cities
Locate the weather forecast two weeks from now
Turn on notifications for severe rain and chance of rain alerts
Add San Francisco, California to the list of favorite cities
RESULTS
The average time of completion per task was less than one minute.
Task #1
average completion rate: 100%
average error rate: 100%
Task #2:
average completion rate: 100%
average error rate: 99%
Task #3:
average completion rate: 100%
average error rate: 95%
Task #4:
average completion rate: 100%
average error rate: 100%
Overall, the test showed positive results although there were instances in which users faced some difficulties trying to locate the weather in advance and turning on severe rain and chance of rain alert notifications.
AFFinity Map
PAIN POINTS
2/5 users didn’t feel that the “chance of rain” alerts would be useful for them. These users have expressed that they don’t enjoy the many notifications that they already get their on their phone and would rather have less alerts.
1/5 users felt that the “more info” was something that they didn’t need because it felt unnecessary.
INSIGHTS
People want less clutter and a minimalist approach to the apps they use
People do not like having too many notifications for their apps while some do not mind the alerts because they can modify the way they receive notifications to their liking.
People enjoy being able to predict what will happen next which includes being able to have a 2-4 week scope of the weather forecast.
RECOMMENDATIONS
Create a more minimalistic approach and upgrade the modal pop up
Being able to turn on/off the chance of rain alerts and the severe weather alerts individually
Final pROtOtypE
After gaining more insight on how users felt about my first prototype, I was able to create a final high fidelity prototype using Adobe XD.
Video of high fidelity prototype