Avalanche canada - Case Study

Avalanche bulletin re-design

Project Description

Current forecasts on Avalanche Canada are hard to read and understand for beginner backcountry users, and take some practice to be able to read. In a community where knowledge = safety, a forecast that’s understandable and user friendly for everyone is crucial.

goal

To work within the existing framework of Avalanche Canada to re-imagine their avalanche forecast bulletins.

Role

UX & web design

Length of project

1 month

How might we?

How might Avalanche Canada’s forecast bulletin UI be updated to be more user friendly and understandable to all levels of backcountry users? 

Final Layout (see process below!)

Initial Research

My initial research consisted of studying the demographics of backcountry users, the rate of injuries, their understanding of the current forecast and how it relates to their decision making when entering the backcountry.

To summarize my findings, I created an affinity diagram based on surveying multiple users on the current website and avalanche bulletins.

Findings

User Persona

Based on findings from my research on the market and the users I spoke with, I created a user persona to summarize the key points about the type of person I’d be making these design changes for.

Design

I started my design process by going through the website and competitor’s websites to find colours I could use across the board for consistency. Most of these colours were already used, but some were slightly different shades. In this new design, it’s important to me that there aren’t 20 shades of red across the site.

I also created an icon set for types of avalanche problems, loosely based off the Washington Avalanche bulletin – but more in the style of Avalanche Canada. These should help clarify and quickly scan avalanche forecasts for new users.

Finally, I created other miscellaneous elements that are needed for the bulletin. Some of these are previous versions that I didn’t end up using, but they demonstrate all my ideas of simplicity while sticking to the theme.

Sketches

Here are some of my initial sketches with rough ideas for what I wanted to change in the website design. This allowed me to create a basic framework for when I moved my designs into XD.

I especially had a lot of ideas for restructuring the “Problems” section. Some of these ideas would get used, but in the end many of them ended up being too complicated, and would not actually help with the understanding of the site.

LO/medium fidelity layouts

Some of the ideas I had in my sketches for the problem section I was trying to incorporate in this phase. I really liked the idea of having the ability to “select forecast by elevation,” but after speaking to some more users I ruled this out as too complex.

Final Layout

Here is an overview of the main elements I am suggesting be changed:

To view the original website, visit avalance.ca

  • Overall consistency
    Making sure colours, fonts, spacing and alignment are all consisten throughout the bulletin.
  • More information at the top
    I removed some of the more hidden elements, and put them into the top bar. “Travel and Terrain Advice” was very hidden in the previous version and is now highlighted at the top.
  • Compressed forecast
    I made the 2 following forecast days smaller as they are less predictable, and also I wanted the entire forecast to fit on the first page.
  • Problems section
    I changed many things throughout this section, mainly having more simplified icons that are easier to read, clear summaries, and easy to follow hierarchy.

Biggest Challenge

I had the idea to completely depart from the current design, wanting to make something that was so entirely user friendly that there would be no doubt on how to read the forecast. What I realized, is that the current design is the way that it is for a reason, and with so many moving and changing elements, it’s actually quite difficult to create a legible and user friendly forecast.

Solution

The solution as always was to stick to the easiest and most minimal solution. It was easy to get lost in trying to make something really unique or cool with a particular element, but in the end after speaking to the users, people just need something they can read easily, not that is fancy. 

Other takeaways

Working with Avalanche Canada on their team would have been really beneficial during this project for a few reasons: direct feedback from their user base (rather than people I know), and also the ability to view current forecasts once the winter season is over. When I moved into the summer season on this project, I was only able to look at archived forecasts which slightly limited my ability to check my designs against the original.

Thanks for visiting! Get in touch ↦