top of page
Load ScreenBG.png
Mockup
Deliver
Develop
Define
Discover
The Challenge

THE WEATHER CHANNEL

NEW FEATURES To enhance the MOBILE EXPERIENCE

Load Screen_trying again_edited.png
Load Screen_trying again_edited.png
Load ScreenBG.png
EmptyiPhone.png
TWClogoandslogan.png

OVERVIEW

For this project I was partnered with a fellow designer to ideate on features that would be at the crux of user and brand goals to enhance and complement the existing Weather Channel mobile app experience.

 

While my partner and I collaborated on nearly every aspect of the design process, my contribution was primarily designing screens for the calendar app integration, fleshing out our user persona, and conducting user tests and interviews.

This was a spec project that took place over a two-week sprint in the early summer of 2021.

ROLE

UX Researcher and Designer
User Research, Wireframing & Testing

Figma | Trello | Miro Google Suite

Spec project, July 2021 

THE CHALLENGE

Weather Forecasting: a clouded market

In an ever-growing competitive market for predictive weather, The Weather Channel constantly seeks a competitive edge in order to appeal to the ever-changing behaviors and needs of mobile users through implemented features like weather widgets and making radar info readily available on their app.

For this spec project, my team sought to find the nexus between business and user goals in the weather forecast market. Our objective was to ideate on features that would complement the current mobile experience while leveraging The Weather Channel’s edge in a sea of competitors to garner new users.

DD.jpg

Our UX Process

We decided as a team to utilize the double diamond design process for this project

DISCOVER

Competitor Analysis

In what scenarios do you generally check the weather?

More in-depth: interviews

What information are you looking for?

Every user answered differently!

Our survey drew input from participants varying in age, background, and location to better understand how and why people interact with weather forecast applications, namely what factors were important in picking a weather forecasting app, and what information they were seeking, and when they were checking their apps. 

 

We were able to quickly gain some insights to better inform where we wanted to gather more qualitative data.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Why do you use your current method of weather prediction?

To get a better idea of what sorts of features the competitors of The Weather Channel were implementing, we looked at which weather apps had a high download rate on the Apple app store and created a feature inventory:

To obtain more qualitative data, we reached out to 5 respondents for an in-depth interview. We discussed our interview data and noticed prevailing trends when talking to participants, namely:

INITIAL SURVEY

  • Individuals do not want to be bogged down with forecast information that is not relevant to them.

  • Individuals make decisions about the clothes they wear, where they travel, as well as if/where they go outside based on weather forecasts. One participant noted that they are likely to cancel their plans entirely day-of an event if they find their weather forecast disagreeable.

  • Individuals are checking weather information days ahead of time and periodically for events so they can adjust their plans if needed.

Meet our persona

We mapped out and synthesized all of our core takeaways from both our survey and interview data and created a fictitious persona who embodied all of our insights:

My Post.jpg

Many of Renee’s attributes surround the idea of personalization, as users had overwhelmingly expressed a need for information that was specific to them (“I want to know wind speed for when I go sailing”) as well as how important weather forecasts are in making day-to-day decisions.

We then formulated our problem statement:

 

Renee needs a way to check weather information directly relevant to her so that she feels confident in her outdoor ACTIVITY planning

HOW MIGHT WE...

personalize Renee's weather forecast experience?

make her weather information quick and easy to access?

DEFINE

Our team assembled to discuss our research insights. We honed our focus onto two features that we agreed would best serve our persona:

USER FLOW 1:
CUSTOMIZABLE HOMEPAGE FEATURE

In this first feature users would be given the option to select what type of information they would want to see immediately once the app was opened.

User Flow-Customize.png

USER FLOW 2:
CALENDAR APP INTEGRATION

P3 User Flow-Calendar.png

We additionally agreed on a calendar app integration feature, which involves a calendar page that would prompt the user to sync events already added to their calendar and offer detailed weather information for the duration of the event. 

DEVELOP

From

TO

ezgif.com-gif-maker (6).gif
EmptyiPhone.png

Calendar app integration

User research pointed us to the insight that users are making decisions about what to wear, how much sunscreen to apply, and/or if they will even attend outdoor activities based on what their weather forecast tells them.

But how could users obtain this information without taking the time to enter the date, time, and location? Users almost unanimously expressed the need for the fewest number of clicks to get to their goal. Our solution was to integrate the user's already-established calendar app into ours.

I designed the wireframes where information from the app would auto-populate, and our feature would provide hourly forecasts, average temperature, and the chance of precipitation for the duration of the calendar event.

New feature onboarding

We decided to begin the user’s journey through customization with a new features notification screen.

We wanted to provide the user a ‘signifier’ that this new feature exists, and that by clicking ‘continue’ the user would be sent through the process of setting that up.

Making this feature the new homepage was key to the design because of how clearly users had expressed the importance of quick, frictionless access to information. 

Changes Page v2.png
EmptyiPhone.png

VALIDATING DESIGNS

To validate these designs, my partner and I conducted two rounds of usability tests.  For both tests we aimed for quantitative data (could participants locate and use these features?) and qualitative data (did users like the idea of these features?) 

USABILITY TESting - Round i

100% of users located the features

While our set time limits were surpassed with a majority of participants, they were all able to locate the features and use them.

CALENDAR ICON was not IDentifiable

Screen Shot 2021-07-27 at 7.11.21 PM.png

From our prototype, 

one user thought it was a battery

Users spent the most amount of time locating the calendar, despite the calendar icon being on the main menu.

events need a clearer call to action

Despite matching the functionality of iCalendar, most participants did not know right away that clicking on the title of an event would take them to that event's details.

THE GREAT DESIGN BAKE-OFF

The team also considered removing the functionality of resizing the tiles of personalized information on the customizable homepage, making the argument that perhaps “less is more” and streamline the feature.

This was integrated into our “bake-off” survey, we asked what size of tiles would be preferred: big, small, or a mix of big and small.

The majority of those surveyed liked bigger tiles but we agreed that this was not significant enough of a winning margin to remove this functionality.

What size tiles is preferred?

Homepage Large.png
Homepage Mixed 1.png
Homepage Small.png
Calender_DateSelectedA.png

80% of those polled preferred events to be listed under the calendar instead of in a pop-up

As a group, we discussed what we could change about the design of the calendar screen, specifically how we could better display a user’s calendar events.

 

We decided on a design solution “bake-off” of two designs:

                1) A pop-up of events

                2) Events listed under the calendar 

 

I wireframed these two options and placed them in a poll.

Calender_DateSelectedB.png

DELIVER

We were happy with the success of our second round of usability testing, so we decided to bring our designs to a higher fidelity.

The key to these designs lived at the center of the established Weather Channel app experience and branding and the insights of users throughout this design process. 

Style Guide.png

UPPING The discoverability

Changes Page v2.png
EmptyiPhone.png

Introduced Calendar feature

Clarified next page would start these features

Changes Page v2_today.png
EmptyiPhone.png

REMOVING ALL AMBIGUITY

Calender_DateSelected.png
EmptyiPhone.png

Added "view weather" button

Addressed ambiguous calendar icon

Calender_DateSelectedAredux.png
EmptyiPhone.png

MOCKUP

REFLECTION AND NEXT STEPS

We accomplished our task in the given two-week timeframe but were we to continue refining our designs we would love to see how our mockup holds up in another round of user tests.

 

Additionally, we heard a lot of interesting feedback from our round 2 testers to consider testing:

  • They expressed a want for even further customization of the tiles, being able to move them around as well as adjust their size, much like Apple’s widgets.

  • They wished to have the option to manually add events to the calendar. While syncing through a calendar app is the fastest, some users expressed privacy concerns as far as sharing information with our app.

  • Another tester wanted to see more information on the health tile, such as COVID or mosquito activity stats. Also the ability to save certain locations for faster access, not just a user’s current location.

We also discussed the importance of incorporating is a ‘skip’ button because not everyone will be interested in these features and we don’t want to lose any current users over these updates, or perhaps they try it out and want to revert back. 

All illustrations courtesy of Wix

All graphs made on Canva

HereWeGoAgain.png

Legacybook
 

UX/UI Design

MVB_Interactive.png

Malvern books
 

UX Research and Design

AAA_NPS.png

National Park service

My current project, check back later!

Coming Soon!
bottom of page