Project 5 – Red Academy
Designing the online presence for an emerging wildfire fighting company.
UI – Web Design
what was the project about?
The client was Hummingbird Networks, a division of Hummingbird Drones. The company, started by two former wildfire fighters, started with using drones to scope out early wildfires, replacing piloted helicopters, increasing safety, and accuracy. Hummingbird Networks started when the founders realized there were cameras and other infrastructure set in place over the provinces but there was not enough labour to then review the photos taken. The network refined the idea.
The team was Puja, Nijhum, Kajetan, and myself (Jayson). The girls formed the UX team and Kajetan and myself formed the UI team.
Process of the Network
Essentially, there are towers with cameras placed in vulnerable to wildfire locations all across BC, Alberta, and the Yukon. The cameras take 360 degree photos every 5 minutes and are uploaded to the cloud. They are then analyzed by (at first inception) Amazon Mechanical Turks who look at photos for signs of fires and smoke. When they spot a fire, the network is notified and they then verify the information. After verification of a fire, they send the information to the wildfire agencies to then put it out. Hummingbird came to us at this stage. While they had great results with the AMT’s, the trouble is they were paying them. They realized that there were a number of caring people in our communities who could replace the work done by the AMT’s.
Everyone understands what volunteering is but the idea of digital volunteering has not been quite adopted.
Hummingbird Network enables thousands of digital workers and volunteers worldwide to prevent new fires by monitoring strategically positioned cameras in vulnerable areas.
where we came in.
We came in being handed a logo and brand by Skyrocket design studio. A fully fledged logo, type, colours, and use. The web app for the actual digital volunteering was to be created months after we finished our web design so our job was just to make the website that led to it.
the existing brand:
our goal was to:
Create a website that educated the user about what Hummingbird Network does, how they can get involved, and seamlessly connected them to the web app.
Create a website that upheld the design integrity of Skyrocket’s brand guidelines and Hummingbird Network’s brand.
Our target users were 25–35, gender was irrelevant, has a good job, busy life, lives in urban BC, but has connections to the interior/Okanagon. Wildfires affect all of the BC citizens and we realized that even if they lived in Victoria or Vancouver, they were still very much connected with the problem. Last summer, all of Vancouver and Victoria’s skies were smogged for a month from wildfire smoke blowing from the province. I am personally from Victoria but my family lives in the interior and my grandmother lives in Kelowna. Our user is close with the problem but because of their busy lifestyle and distant proximity to the fires, they find themselves frustrated that they are unable to help more.
We started our kickoff meeting with a gut test. At the meeting, we had our client and a representative from Skyrocket who had worked very closely with Hummingbird on the brand creation. Because of their familiarity with the brand and problem, we directed questions to the both of them.
Since we had a working logo, type, and colour scheme, we presented a gut test to give us an idea of what layout and design Richard and Kathy thought were aligned with the brand. We tested bright, dark, big, small, cluttered, spacey, playful, and professional layouts. Working through their results and then discussing with them, we came to a hypothesis of what style they would like and would be aligned with the brand. First, we created a design inception.
With my try at the design inception, I came to a why of:
A platform that digitally connects a caring community to the problem.
After discussion with our instructors we realized this was not deep enough. There was still a core, more dark meaning to the company’s purpose. We then came to:
A platform that digitally connects a caring community to the problem
— to save lives and communities.
At the end, that’s what it’s about. Self preservation and the defence of our nation. We want to defend our borders, our communities, our families.
We realized that you could “belong” to a community without actually taking action. But this was more than just simply belonging statically. It was about actively belonging.
The keyword we wrote for mood were:
- emotional education
- active belonging
Our other design states were lots of space, brilliant landscape photography of the forests of BC, Yukon, and Alberta, smooth, relaxed, professional yet friendly.
Here’s the moodboard we created. We used brilliant images of the provinces, and images that showed the dreams and connection and community of the users. They are late 20s, early 30s and they have dreams and ambitions that are threatened by the fires.
After taking Robert and Kathy’s responses to the gut test and our own research with the brand and user, we came to a hypothesis with the style of design we would use for the website. The two ideas we wanted to test were professional with realistic photography & photography with accents of illustrations. We wanted to create a site that was:
Our suspicion was that the hybrid style of photography and illustrations would be well received by both Kathy and Robert. We met with Kathy and the Skyrocket designer who made the existing brand and discussed our ideas. They agreed with us that the style would be more with use of photography and tasteful illustrations to lend playfulness and connectedness.
We then took that direction and presented our two directions to the client, Robert. This is what I showed:
Connected and Modern .
Professional yet Friendly.
Robert loved the balance of professional and friendly and decided for us to go in that hybrid direction. Using the option red colour Skyrocket gave us, that gave us this colour palette.
I then experimented with different forest animals native to British Columbia, Alberta, and the Yukon. Those are the three provinces in Canada where wildfires are most prevelant and where the focus of Hummingbird currently is.
I experimented with a mountain using the same stroke weight as the logo and loading pages using the logo as the loading percentage icon. I planned to use the mountain in the background of illustrations and thought the consistency of the stroke weight throughout the site would make sense and match the pattern.
I used the branded green for the background on the right but it didn’t look quite right so I tested the darker hue on the left for better contrast.
An important part of the website was explaining the process of Hummingbird. I had to present and explain what they did in a simple and visually appealing way that reflected their brand values. I started with an accumulation of the animals, icons, and forestry together.
I found the forestry illustrations took a lot of the focus which wasn’t the point of the “Our Process” section. It distracted from the purpose so I then simplified to the below image. Still using icons and animal illustrations but adding the card style for better separation and focus of the text. I made sure to keep the animals consistent across the sections. The home page featured the “Here’s how it works” section which linked to an individual page that elaborated on the process. Both headers were topped with the orange bear just like the “Our Impact” was topped with the wolf.
And now the prototype walkthrough.
I wanted to break the box with the paint lines and use the Canadian animals to add playfulness to the stark professionalism and reality of the landscape images.
Modern Clean Space Break the box Tasteful Illustrations
Take care of your mental health, one step at a time.
8 minute read
UI – Illustration – Onboarding
A music and fitness app that creates playlists based on your mood and lifestyle.
5 minute read
UI – Marketing – Animation
Full-Stack Digital Designer and Marketer