Plan Your Day

 

Goal

This project was focused on consolidating some of our planning tools & connecting the dots between weather and well-being for our users.

Role
Product Designer

Duration
2021-2022

Softwares
Figma | Mural | Jira

Overview

We implemented the Plan Your Day experience, helping users connect the dots between weather and well-being. The new card removes the need for several other cards in our current feed: today’s details, daily forecast, & outdoor conditions. This is a big step towards our larger goal, i.e., to reduce the current feed to a third of the length. We’re making strategic changes toward this goal of simplification and removing repetitive data + content, consolidating like information, and connecting the dots. We also introduced a Sun & Moon hub, giving users insight into our valuable astronomical data.

 
 

Brainstorming

We had numerous brainstorming workshops using Mural with stakeholders from our data, product, and engineering teams. This helped us account for different user types so that our future experience can evolve into a well-rounded one that covers all bases.

“We know our users understand that their well-being can be affected by weather, and whether or not they know what those connection points are, they want US to help them learn about it, plan around it, and compensate for it. We know this through research and our target personas. ”

— Product team, Watson Advertising and Weather

 
 
 

Anatomy of the Card

How does this new card work? It can be divided into 3 parts:

  • Insight: The insight at the top serves as an overarching insight for the day.

  • Planning: The Planning section allows the user to oscillate between Today/Hourly/Daily.

  • Chiclets: At the bottom, we have our brand new data chiclets, plus our Sun and Moon hub entry. 

 
 

Chiclets Strategy

  • These bite-sized nuggets of information are equipped with data points and mini one-word insights describing what each data point means to the user.

  • They are dynamic and change depending on the time of the day. We are leveraging our existing data and breaking it down for the users so that they don’t have to it themselves.

  • The first row of chiclets display subtle but effective data viz animations that play as the user scrolls to this card (a compass-inspired viz for Wind, arrows to indicate whether pressure is rising or dropping, a simple dial for UV)

  • The rising and setting of the sun is indicated with a hint of pink, a subtle nod to the beautiful colors of the sky. Clicking on this bottom chiclet takes the user to our new Sun and Moon hub.

 
 

Data Viz Explorations

 
 

Sun & Moon Hub

  • This new hub is a perfect nod to that moment of beauty we know our users want, something to add positivity to their day and to understand a little more about the world they live in.

  • The hub is divided into Sun and Moon pages, each showcasing a graph to track the position of the sun/moon plus a data table including relevant data like moon phases and countdown to sunset.

  • We worked with our editorial team to display astronomical videos/articles/news links at the bottom of the hub to serve as a springboard into other pages of the app.

  • We repurposed our Boat & Beach plus tidal data to now be available to all users, not only our coastal ones.

 

Trending Conditions

We updated our old Trending Conditions page to include a new refreshed graph, educational tooltips explaining each data point, and insights.

 

Insights & Data Science

  • The insights we provided weave into the experience in multiple ways to enhance our storytelling and share our scientific expertise with our users.

  • I had the wonderful opportunity to work closely with our science team comprising some of the world's most talented meteorologists.

  • Along with our content strategist, we first tackled those mini one-word insights that display in each chiclet and then moved on to the insight that displays at the top of the card. We divided our scenarios like “Get Outside Today / Tomorrow” or “Energy Friendly Insight” or “Vitamin D Underexposure Risk”.

  • I created mockups for each example to make sure it fits into three lines and when translated to other languages.

 
 
 
 
 

Engineering

I worked closely with our engineer to get everything pixel-perfect. This is one of my favorite stages of a project, where I get to see our designs come together in code! I first provide detailed specs and assets to devs, and then conduct screen share sessions to complete visual QA and bug fixes.

 
 
 
 

Takeaways

We released these updates to a smaller subset of our users, and are currently in the process of gaining their feedback to help inform our next steps. Overall, this project exposed me to how other disciplines work. I had the opportunity to collaborate with other teams within the organization which gave me a ton of insight into how they approach problems. I’m very proud of the work we accomplished to further enhance our user experience, and am excited to have been involved in this effort.