Image for post
Image for post

Introduction

Meet the Team

Image for post
Image for post
The Cool Rangers. Karen, Mat, and myself were the team’s UI designers, while Seol Ah and Cindy handled UX.

As a team, we called ourselves the Cool Rangers. This not only tied in with the idea that saving the environment is a heroic thing to do, but is also a reference to forest rangers who protect the environment as part of their job.

Research

Image for post
Image for post

Some of these sites were clearly geared towards an older audience, while others looked very much kid-friendly. Since we are designing for high school students, however, we did not need anything that was particularly cartoony, though we did still have to figure out a colour scheme, whether we should be making use of photos, etc.

Gut Test

Image for post
Image for post

These two designs stood out as the most disliked. The one on the left was notable for its use of colour — since we’re designing an environmental app, it would be rather inappropriate for us to make such heavy use of oranges and pinks. The one on the right was disliked because it was too monochrome and bland.

Image for post
Image for post

Our client liked these two designs the best. Both were examples of flat design, though they both had some graphics. Both looked pretty clean, especially the one on the right.

The Design Process

The Why — Design Inception

With the Why figured out, we were able to move on to the mood, space, colour, shape, and movement.

Image for post
Image for post

Mood

4 Elements of the Visual Language

Colour: green, white, grey, blue

Shape: round, dynamic, depth

Movement: purposeful, fluid, logical, continuous

Style Tile & Brand Guideline

Image for post
Image for post
Karen’s mood board
Image for post
Image for post
My mood board

This led to two different style tiles:

Image for post
Image for post
Image for post
Image for post

In the end, the client preferred the first one (Views in the Valley), though we did make a few further changes:

Image for post
Image for post
Final style tile

Instead of having brown-ish colours, we decided to have another set of greens, since it’s more associated with nature and easier to incorporate than brown colours.

The icons we designed are lightweight and easy to use. They look clean enough to fit into the rest of the design.

We chose Open Sans for the typeface because it’s fairly neutral yet friendly. It’s also optimized for legibility across all devices, including mobile, which we are designing for.

Image for post
Image for post
The current logo is not very well designed and doesn’t fit our direction very well.

We also changed the logo to something that not only looks better, but reflects the fact that the Cool It! is a program under the BC SEA:

Image for post
Image for post

User Testing

Wireframes

Image for post
Image for post
Mid-fi screens

We added colours and graphics to the mid-fi prototypes to create hi-fi prototypes. We did run into a few hurdles along the way — it took a while for us to decide how the background should look, which screens should have a background, etc.

Image for post
Image for post

It also took a while to decide on a layout for certain screens. For example, the layout for the login/registration page changed a number of times before we finally settled on this:

Image for post
Image for post

Usability Testing

Image for post
Image for post

Prototype

We created a prototype on InVision to showcase how the app functions. Of particular note is the rewards system — users can unlock features (e.g. trees, landscape features, etc.) as they complete GHG-reducing tasks. Their Earth will look more and more interesting as they help save the environment.

Conclusion

The app was well-received by the client, so with any luck, it will translate into satisfied users who actually use it to help them cut down on GHG emissions and save the environment.

For future projects, I would like to work on more typography and perhaps even create a typography-based graphic, in the style of Paula Scher. That would be quite interesting, to say the least.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store