The BC Sustainable Energy Association (BC SEA) runs a program called Cool It! for students in high school and below, in an effort to get students to track how much greenhouse gases (GHGs) they’re emitting and to help them decrease it.
Meet the Team
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.
We started by looking for websites that focus on sustainability. These included Planet Ark, Elements Society, etc.
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.
We conducted a gut test with our client to find out what they like and dislike in apps. We had approximately 20 different designs in total, and the client had up to 20 seconds to decide whether she liked each one.
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.
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
We settled on a central reason for the project, i.e. the Why. It was to encourage British Columbians to become environmental leaders and reduce their carbon footprint by tracking each user’s contribution to greenhouse gas savings.
With the Why figured out, we were able to move on to the mood, space, colour, shape, and movement.
We wanted the app to be appealing to high school students, who may require extra motivation to save the environment. As such, the app had to be fun, rewarding, engaging, etc.
4 Elements of the Visual Language
Space: balanced, positive space, organized
Colour: green, white, grey, blue
Shape: round, dynamic, depth
Movement: purposeful, fluid, logical, continuous
Style Tile & Brand Guideline
We split off into two different directions so that the client can be given a choice. One had more vector images with greens, yellows, and blues, while the other had mostly blue photos.
This led to two different style tiles:
In the end, the client preferred the first one (Views in the Valley), though we did make a few further changes:
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.
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:
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.
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:
Testing revealed that the quiz involved too much scrolling, so we had to split it into 5 sections — which meant 5 separate screens. This also meant that we needed a way to navigate between the screens, since users might want to go back and forth to check their answers before submitting them:
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.
Through this project, I learned to work with a team as a UI designer. I found that when it comes to actual design work, I gravitate towards typography rather than graphics. Indeed, the highlight of the project for me was sorting out the typography in Sketch (and defining the header, body, etc. in the style guide).
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.