Overview

Visualizing uncertainty in weather forecasting apps

Completed: 2016
Timeframe: 3 weeks
My Role: Self-Directed Side Project

Objective

I wanted to build a personal project end-to-end,  within a set of constraints

Deliverables

Visual Design, UX, Interaction Design, Clickable Prototypes

Process & Methods

Needfinding, Storyboards, Paper Prototypes, Wireframes, Visual Design, Pixate

Overview

This self-directed prototyping challenge was a fun way to build something from the ground up. Because weather apps are a cliched starting point, I wanted to discover something new or interesting to add to the experience.   

Discovery

Identifying needs and opportunities

Through researching existing apps and drawing storyboards, I began investigating potential needs for a weather app. I don’t make storyboards often because user research is more valuable. But, for a quick undefined project, they can be a useful way to connect with an idea, find hidden rooms, and explore the potential.

During the needfinding stage, I noticed that most weather apps don't display weather probability in an easily scannable way. There also tended to be a “wet bias” in displaying weather. If the forecast projected rain or snow at any point during the day, it would generally show that as the weather trend for the entire day. To address this, I started working on an expandable clock face to show the projected chance of rain or snow by the hour — over the next 12 hours.

I also noticed that temperatures expressed in degrees could be difficult for people to translate in a meaningful way. By comparing projected temperatures to the previous day's temperatures, e.g. “slightly cooler than yesterday”, people could map the numerical temperature to their personal experience.

Process

From general to specific

After some quick paper prototypes, I tested the app’s flow in Balsamiq as a lo-fi starting point. It helped uncover some awkward patterns and a few basic ways to improve the navigation. After I had a better understanding of what needed refinement, I began running through some rough iterations in Sketch.

Using a clock face as a mental model for both time and weather projections concerned me. Design research into clock faces became an important step in reducing cognitive load in the end design. Resources from this stage informed my design decisions as it continued to evolve.

Prototyping

Putting everything into motion

After working through wireframes and finishing the visual details, I began working in Pixate to create a clickable prototype that I could test on my phone. For me, this was an exciting adventure. Motion design is a fun problem set to work through. I had taught AfterEffects in the past, and this felt like a natural progression. I have since moved on to using InVision and Framer as my prototyping tools of choice.

Retrospect

More testing, better problems

I love prototyping, and this was a fun chance to do it with intention and purpose. This self-directed project allowed me to create every element through ideation, design, and testing. In a lot of ways, it prepared me for the end-to-end projects I would take on as part of a product team. For me, this was an ideal way to learn to prototype, because there were real constraints and intentions that dictated the decisions.

 If I were to revisit this project, I would want to do testing to see if my expectations matched up to reality. Having done user research since this time, I know that research is valuable and provides a much more complex view of the problem. It’s also more interesting to design for.

 The rings that show the chance of rain through saturation and area may not be explicit enough. In talking to people who have seen the project, I realize that this information may need a clearer signal. The comparative text at the bottom may not be necessary, or it might be all people need. I don’t know for sure, and that’s a problem that should be addressed.