Case studies –

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.

Sketching the intial user flow

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.


Responsive design viewed on mobile

I created an initial design system from my Sketch source file, utilising symbols, I exported the interface design to Zeplin so I could specify each component of the interface. This approach helped ensure consistency across the site, simplified development and ensures any future functionality discussions can adhere to the same principles specified here to reduce design and develop time.

Creating a set of design components in Sketch

Exporting to Zeplin to document design specifications and to aid developer handoff

Get in touch

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