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.
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.
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.
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.
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.
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.
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.