Case studies –

An engaging interface design for a cleaner, fresher future

User interface design

I was approached by carbon offsetting startup Gaach, to design their website and develop an initial design system.

Gaach's ingenious objective is to ask people to send 'a number of trees' relative to their carbon footprint to developing countries (such as India or Bangladesh) for planting by local communities.

An interface that breathes

Given the environmental nature of the startup, I wanted the UI design to feel fresh, spacious and leafy. I incorporated photography of plants, trees and nature alongside a complimentary colour palette of green with a highlight yellow to create a cohesive aesthetic, expressing the beauty of our world and it's importance to all of our lives.


Choosing the type of carbon footprint

Users are guided into one of two journeys dependent on their carbon footprint type: individual/household or business. They are then asked a series of questions about their lifestyle to determine their carbon footprint. Once calculated the website suggests how many trees need planting to offset this footprint. Finally, users are given the opportunity to purchase the trees and send them for planting in a developing country.


Your carbon footprint score

I continued the natural aesthetic throughout the site, using imagery cropped to the sides of the page to create an immersive experience, the user is "wrapped" and "encased" in the foliage as if they were in a forest or jungle, reminding them of the importance of our environment.


Explaining how it works

To reinforce the concept of giving throughout the site, I also incorporated imagery of the beneficiaries such as families in Bangladesh, the communities directly benefitting from the programme.


Creating an account

To keep the design clean and relatively minimal in approach I opted for the narrow "Barlow Condensed" typeface for headings partnered with a lightweight version of the "Montserrat" typeface for body copy.


Homepage

Responsive design viewed on mobile

To aid the development of the website I created an initial design system or style guide to specify each component of the interface, displaying the various interactive states.

This helps ensure consistency across the site, simplifies development and ensures any future functionality additions can adhere to the same principles specified here to reduce design and develop time.


Excerpt from the style guide created to aid development team

Get in touch

If you'd like to discuss working together or just have a question for me, please get in touch:

andy@brightblackcreative.co.uk