UX/UI Designer
hummingbird network.jpg

Hummingbird Network

Designing a responsive web experience for Hummingbird Network to educate and engage digital volunteers to assist with early wildfire detection in Western Canada.

Hummingbird Network
 

Hummingbird Network is a crowdsourcing platform that enables thousands of digital volunteers to contribute to early detection of wildfires by monitoring strategically positioned cameras in remote landscapes in the provinces of British Columbia, Alberta and Yukon. This is facilitated by a web application that connects the users (digital volunteers) to the images.

An early stage startup, Hummingbird Network was just in its idea phase when they approached us. Their mission is to connect a caring digital community to the problem of wildfires in a meaningful way. People living in or who have families living in wildfire-prone areas are face problems associated with wildfires on an annual basis. These include health problems, property damage, displacement, among many others. With the Hummingbird Network app, people can make a difference by participating in early wildfire detection, increasing the safety of our communities and the integrity of our forests.

 

Client
Hummingbird Network

Project
Responsive web experience

Deliverables
Website, design + development documentation

Duration of the project
6 Weeks 


 

The Problem

The client approached us with an opportunity to create a website for Hummingbird Network that educates and converts leads into digital volunteers using the web app. The opportunity ahead of us became clear after the initial kickoff meeting. We had to design a responsive website that provides education and awareness about the impact of wildfires in order to encourage users to sign up as digital volunteers on the company’s web app, which was still under construction at the time.

To summarize, these were the project’s primary goals:  

  1. Design a website that acts as a conversion funnel, leading users from awareness to action
  2. Design a seamless transition from the website into the web app
 
 

Team

The project team comprised of 4 designers; 2 UX designers (myself included) and 2 UI designers and 3 developers.

I took on a leadership role in this project and drove the overall UX strategy and implementation. Furthermore, I played an active role in communicating with the project stakeholders— the client, as well as the client’s branding agency who oversaw the brand implementation on the website.

 

 

Here's how we arrived at a solution

 
 

research

Setting goals. Charting our research direction.

Before we set off on a path to research the problem of wildfires and learn about our potential users, we set some research goals that guided our process.

  1. Learn more about our users as volunteers (their motivations, pain points)
  2. Learn about our users as victims of wildfires (fears associated with wildfires) Why would people care?
  3. Learn about the impact of wildfires on people, communities and the overall ecosystem
 
 
RESEARCH METHODS WE USED

RESEARCH METHODS WE USED

 
 

In search of digital volunteers

Who are these digital volunteers that will be Hummingbird Network’s user? Based on our assumptions, we reached out to people who volunteer and find out what motivates them and what are some of their pain points. We conducted user interviews and deployed surveys to identify the underlying motivations, behaviours and frustrations around volunteering.

In our search for digital volunteers, we looked at existing companies that engage digital volunteers. Tomnod came up as one of the pioneering companies that used crowdsourcing from digital volunteers to identify objects and places in satellite images.

After uncovering these insights, we were able to launch into a new exploratory phase to learn more about digital volunteers. Here are some of the things we found interesting:

  • Most volunteers primarily have altruistic motivations
  • Feedback on the impact of an individual's’ contributions is crucial in maintaining interest.
  • Effective communication between volunteers and site owner is strongly linked to appreciation of the platform
  • Volunteers appreciated some kind of recognition for their contribution
 
INSIGHTS FROM SOCIAL LISTENING

INSIGHTS FROM SOCIAL LISTENING

Why do people care about wildfire

The initial discovery about digital volunteers gave us a few insights to work with. But, we wanted to explore a deeper question—why do people care about wildfires? We asked our users and also conducted social listening. We looked on social media to understand people's sentiment during wildfires.

Displacement of humans, loss of physical property, jobs and basic amenities are some common effects of an adverse wildfire season. As a result, communities have deep-rooted fears associated with wildfires. Understanding this was key, as it helped us develop empathy for our users.

The insights extracted from the research were synthesized into our user persona.


 

AFFINITY MAPPING

With all of this research under our belt, it was time to synthesize it and distil some key findings of our users. We used the affinity diagram technique to look for patterns in our research. We collated the key insights and formed “I” statements.

 
AFFINITY MAPPING

AFFINITY MAPPING

AFFINITY MAPPING — EXTRACTING INSIGHTS 

AFFINITY MAPPING — EXTRACTING INSIGHTS 

 

User persona

Alex is a young, talented engineer at a tech company. She currently lives and works in Vancouver but was raised in Fort McMurray, a small industrial town in Alberta. She enjoys an active lifestyle. She was born and raised in a town that has historically been impacted by wildfires. However, in the recent years, the impact has been progressively adverse. She fears for the loss of her childhood home and also the for the health of their retired parents. Furthermore, Alex is frustrated about not being able to enjoy the outdoors due to wildfires. She is very passionate about creating an impact in the community and also environmental issues. She feels a sense of active belongingness, with a desire to create a safe and sustainable future for their family and global community. She wants to really help but doesn’t know how to.

 
 
User Persona
 
 

Empathizing with Alex

 
Empathy map
 
 

USER journey map

In our next step, we combined the valuable insights from empathy map to form a user journey map. The intention for picking this tool was to get a holistic picture of our user's emotions as they interact with various product touchpoints. The map gave a clear idea of the way forward and revealed opportunities for better UX. 

 
 
USER JOURNEY MAP

USER JOURNEY MAP

 
 

Designing a conversation with Alex

In order to design a meaningful information architecture for the website, we realized that we needed to approach it like a conversation. What is our user, Alex, expecting to see on each page and how will we use relevant CTAs and content categories to help them navigate throughout the website. How can we meet them where they are?

Since our UX strategy was to design a conversion funnel, we needed to take a closer look at Alex’s information needs in the different stages of the conversion funnel. Based on our user journey map and the stages of the conversion funnel, here are some of Alex’s information needs.

Awareness: Alex is looking for an intro and context.
Consideration: Alex wants to see digital volunteering in action. Does it work? What are the results?
Action: Alex is now interested and wants to find out how they can become a part of this. They want to know who else is a part of this.

How can we meet Alex's information needs and at the same time, seamlessly allow her to transition through these stages into action? Here is how the business can do it.

information needs.jpg
 
 
 

Information Architecture

The content strategy took the form of an Information Architecture map that demonstrates the stages of the funnel and the content blocks under each of it. When designing the funnel, we considered the narrative of the whole website linking each page.

 
INFORMATION ARCHITECTURE (IA)

INFORMATION ARCHITECTURE (IA)

CONVERSION FUNNEL MAPPED — IA

CONVERSION FUNNEL MAPPED — IA


 

Translating data into design

LOW-FIDELITY PROTOTYPE

All the research and planning work informed some initial sketches for the screens. We rapidly designed paper prototypes of the pages outlined in the information architecture. Our goal was to get through as many ideas for laying out the information as possible. Once we had some sketches in hand, we tested it out. At this stage, we were mainly focused on ensuring that the user flow was seamless.

 
LO-FIDELITY TESTING  

LO-FIDELITY TESTING
 

low-fidelity testing results

A resounding response we got from the testing indicated that there was ambiguity about the concept of digital volunteering and what it entailed. So we included a new page on the website that contained information on how to get involved and some actionable steps and tips for them.
 

 

Mid-fidelity prototype

After around 8 user tests, we took the design up to medium fidelity. The mid-fi designs were also tested. At this stage, our goal was to focus on testing the call-to-action (CTA) buttons and the content flow.  

The main CTA that linked to the web app underwent a number of iterations. The two options we tested out were “Join the Network” and “Become a Volunteer”. Our A/B testing results proved that “Become a Volunteer” was the most effective CTA, providing accurate information.
 

 

mid-fidelity testing results

We were interested in testing the content flow of the website and each page as well. To take the focus away from design elements and redirect it to content, we tried a card sorting technique. As a part of this exercise, we gave our users a list of content categories and the main navigation links on the website. We asked the participants to organize the content categories under the main navigation links in an order in which they would expect to see it. We also asked them to pick any four content categories that you would like to see featured on the “Home” page.
 

CARD SORTING EXERCISE  

CARD SORTING EXERCISE
 

 

user interface design

Creating the right mood 

While the UX team was finding and fixing usability issues, our UI team was working to identify the most effective visual elements that would work for the website. The UI designers inherited the logo and style guide from Skyrocket and their challenge was to implement the brand into Hummingbird Network’s website. The aesthetic and the design direction was chosen to create a mood belongingness.

 
 
Mood board
 
 
 

Introducing Hummingbird Network

Final screens
 

Ready for development

At the end of our three-week design sprint, we presented our design process and final designs to the clients at Hummingbird Network. Overall, we received highly positive feedback for our design process, all the way from concept to completion. Our designs were then ready to be passed on to our development team. Since we had the dev team involved throughout our design process, the hand-off was fairly straightforward. That said, we still had a formal meeting, highlighting some key pointers from our design process. The next three weeks were all about cross-functional teamwork and quality assurance check-ins sprinkled throughout the development process. 

 

 

Thank you for reading this design case study. Interested in checking out the shipped design? Visit Hummingbird Network's website.