BC Sustainable Energy Association: Cool It! | UI UX Case Study
Introduction
The British Columbia Sustainable Energy Association (BCSEA) is a registered charity providing public and youth education, advocacy and information, and utility commission interventions, and supporting government, education, and industry partners and BC to transition to a lower carbon economy.
The flagship program of BCSEA is Cool It! Climate Leadership Training. This program educates young people on climate science and provides them with the tools to take action as individuals and at home to reduce their impacts on the environment.
The objective of this project was to design a user-friendly app utilizing user interface processes and methods for the BCSEA program, Cool It!.
What is Cool It!?
Cool It! is a program that provides specific actions and advice about reducing your environmental footprint that actually tracks your changes in behaviour and emissions in real time.
Users will be able to calculate exactly how many greenhouse gases they'll be saving from being released as they do each activity in their home and life, providing positive feedback and information to support long term behaviour change.
Business Goal
Collect data on the impact of the program and report back to the corresponding municipalities across the Vancouver lower mainland and Vancouver Island.
User Goal
The user goal is to have an app that is efficient and fun while learning how to reduce their carbon footprint.
Project Goal
Design the interface of a user-friendly app that encourages sustainable lifestyle choices and informs users about greenhouse gas savings in real-time.
UI & UX Design Process
I worked alongside two talented UX designers, Cindy and Seol Ah.
I was tasked with designing and executing the user interface (UI) for this project and the project lead for UI and UX.
An overview of the tasks I completed to successfully achieve the goal above included the following: create a Design Inception, develop a Moodboard, Style Tile, and Style Guide.
Research and Discovery
The Challenge
The BCSEA would like to digitise the Cool It! climate challenge and carbon footprint quiz so that it is offered on an app rather than a printed booklet. This will allow the program to expand into high school programs. This will broaden the reach from grade 4 -7 students, to high school and beyond, and provide climate education in a more engaging way.
The problems with the current challenge:
- The current format (printed booklet) is not as engaging and interactive as it could be
- The carbon footprint quiz is not integrated into the challenge, Cool It! needs a benchmark to start from so that you can see how much you improve over time
- If you lose your sheet or don’t hand it in you can’t participate in the challenge, or if you don’t get your parents to sign off on each action then BC SEA may not be able to include the challenge form
- The whole process is time-consuming — have to go back to class to collect the forms, have to manually data enter each one. Have to manually pull the data into what we need for reports.
- Relies on running a workshop to introduce the program
Hypothesis
We hypothesize that individuals believe they have an impact on the environment but are not motivated to significantly change their lifestyle, in order to reduce their carbon footprint.
Domain Research
To set the foundation for my design, my team conducted domain research. I investigated several environment sustainability apps, educational apps and games. This research allowed me to get a sense of what users are currently accustomed to and understand how other organizations bring their design inception to life. The target audience for the current project is high school youth on the Vancouver Lower Mainland and Vancouver Island.
The team requested the BCSEA representatives provide us with further direction by sending us links of websites and apps that capture the ideal functionality and aesthetics for the Cool It app.
The clients highlighted key UI elements that stand out to them (Figure A).
Elements such as animated infographics, striking typography and an overall sense of a fun vibe. All this, whilst remaining feeling sophisticated and useful.
Furthermore, my team conducted research on how specific colours make people feel and how to humanize the design. In my research, I found that the colour green represents new beginnings, abundance, nature, reliable, secure and technical. The colour blue represents calm, responsible, sadness, down-to-earth, honest, sincere, real and friendly.
Gut Test
A 30-second gut test is a methodology utilized by UI designers to get a sense of their client’s visual preferences. It consists of 15–30 examples of different apps, which the client will rate on a scale of 1 (strongly dislike) to 5 (love).
Using the domain research previously conducted and knowledge of the client's vision, my UI team created the 30-second gut test.
Below are two different apps the client rated a 1/5 (strongly dislike).
To understand why the client rated these apps 1/5, we went back after the test was completed to further probe the client. The client did not like the app on the left because the colour is too bright and the functionality does not seem intuitive. The client disliked the app on the right because it is monochrome and boring. Based on this feedback we noted that bright colours and greyscale are both off the table.
The apps below were rated 5/5 by the client.
To understand why the client loved these apps, we probed for more details.
The client liked the app on the left because of the depth, dynamics and visual appeal. The app on the right has just the right amount of white space and the pop of colour makes the app engaged and aesthetically pleasing.
This investigation allowed us to establish that the client wants an app with colours, depth and meaningful design.
Persona
The UX research helped form the user persona (below) for this project.
The user persona was a helpful tool for the design process and ensured we were designed for the correct target audience.
The domain research, gut test and persona paved the way for the team's design inception.
The Design Process
The UI research for Cool It! set the foundation, the next step was to establish the visual language for the typeface, we accomplished this by creating a design inception.
The “Why”?
The first step to devising the visual language of a website or creating the design, the designer must establish the “why”. The “why” allows designers to set the stage for who they are designing for and why they are designing.
This is why we are creating an app for Vancouver youth:
To encourage British Columbians to become environmental leaders and reduce their carbon footprint by tracking each users contribution to greenhouse gas savings.
Design Inception
The “why” establishes the purpose and drive behind the mood and visual language, which are discovered using design inception (Figure B).
The mood I set out to create was an optimistic, engaging playful and friendly vibe catered to youth living in BC.
I took the principles of biomimicry into consideration when establishing my visual language.
Biomimicry is the art and science of designing products and systems that mimic biological entities and processes to create more sustainable designs.
I have elaborated on my visual language below and how it encompasses biomimicry.
Visual Language
Space | To foster an optimistic and playful vibe, I choose to include positive space, which is a fancy way of saying white space. White space gives the user room to breathe and has an organic feel to it; the same way a user has room to breathe in nature. This lends its way into organized and balanced space. To avoid overwhelming my users, organization and balance is key to a positive experience.
Shape | I wanted to keep the shapes organic with a little bit of depth to mimic the unique properties of nature.
Colour | The colours blue and green are found everywhere in nature; from mountains to the depths of the sea. These colours were chosen to give the app life.
Movement | Everything in nature has a purpose and is fluid. To model this process in the app, we chose to keep the movement logical and continuous.
Moodboard
A moodboard is a digital or physical collage of ideas that reflect the mood you plan to achieve with your design.
Below is the moodboard for Cool It!: Views in the Valley (Figure C).
I named this moodboard “Views in the Valley” because our ecological footprint stems beyond the boundaries of our backyard. Contributing to a more sustainable planet includes (but is not limited to) supporting all forms of nature, such as the forests, oceans, mountains and much more.
In this moodboard, you will find elements of greenery and nature to encompass a wholesome and friendly atmosphere. This is contrasted with blue imagery and gradients to create a down-to-earth and calm space.
The textures are primarily flat, which fosters a simple and meaningful design. The features are minimalistic with vibrant colours to bring life to the picture.
Style Tile
Style Tiles (Figure D) are a design deliverable consisting of fonts, colours and interface elements that reflect the visual brand for the app.
We went for a softer green and blue because our research and gut test revealed that bright colours were too overpowering for this particular project.
The icons and buttons on the left are all custom designed by myself.
The typography chosen for the app is Open Sans. Open Sans is a humanist sans serif typeface designed by Steve Matteson. It is a neutral, legible and friendly typeface, optimized for print, web, and mobile interfaces. It is utilized in other educational apps for youth and fit the mood for the current project.
Logo
This is the current logo that the Cool It! Program uses.
BCSEA wanted to rebrand the current Cool It! visual branding and start on a fresh slate.
We knew that it was vital to create a logo that embodies a fresh new look but that seems familiar yet refreshing to the eye.
We started by sketching out low fidelity prototypes on pencil and paper to compile our vision onto a page.
Throughout our research and countless concept iterations, we wanted to ensure that this new design translates the right look, feel and tone of the new app prototype for Cool it!
Welcome to the new face of Cool It!
We believe we created the solution that can play with the user's imagination to see all foundational elements of the cool it program.
Imagine a distant view of a valley like the Okanagan or a great flowing river such as the Fraser River — imagine rolling hills and a clear blue sky.
A package that also carries elements of the parent organization BCSEA and all main colours of the prototype.
Wireframes
Wireframes are the blueprints of the app or website. UI designers take these blueprints and bring the design inception of the project to life.
Above are some of the wireframes that I was tasked with designing the interface.
As a UI designer, we do not make any major changes to the wireframe (e.g., change the number of CTA’s) but upon discussion with the UX designer, UI designer can make specific changes to the wireframe (e.g., placement of a CTA).
User Testing
Usability testing is a technique used in user-centred interaction design to ensure the technology is intuitive and user-friendly. User testing allows the designer to collect valuable feedback back the design of the product from the target population.
User testing is a part of the UX design process, but as a user-centred UX and UI designer, I include user testing as a part of the UI process to optimize the design.
Below are some of the screens that I collaborated with the UX team on to change the UX to make it easier to use.
All feedback from testing was considered before moving onto designing the high-fidelity. I made revisions, referenced research and retested throughout the design phase.
Design
To encourage British Columbians to become environmental leaders and reduce their carbon footprint by tracking each users contribution to greenhouse gas savings.
The objective of this project was to design an app the reflects the “why” stated above.
Check out the final prototype on InVision: https://invis.io/7ZQJBYUPWDH
Future Considerations
I am happy with the product I delivered in the 3-week timeline. If I had more time, these are some of the factors I would consider:
- Catering the content to target different age groups, such as elementary, middle and high school students.
2. Parent verification step for younger students — forming an opportunity to help a parent review and participate in the program.
3. Limiting the number of times that a user can complete the same activity (i.e. they can’t just do the easy tasks, this will encourage them to discover more ways to be sustainable).
4. Being able to add people to your social circle for the user to be able to compare to him or herself to BC or global averages and creating an opportunity to create their own contests with other people.
- “Following” feature to see your friends’ progress
- Sharing pictures of your sustainable activities for people to get more ideas
- Visiting your friends’ planets
5. Additional daily bonus challenges, such as quizzes to be able to gain more points.
Conclusion
The goal of the project was to design the interface for the app Cool It! using UI elements.
I accomplished this by adopting a design that fosters an optimistic, motivational and fun interface.
The final product reflects the “why” established in the design inception: “To encourage British Columbians to become environmental leaders and reduce their carbon footprint by tracking each users contribution to greenhouse gas savings.”
