Carbon/Green

Designed a website to promote sustainable practices in small island developing states.

Timeline

Evolve Branding Agency
3 Weeks Execution Time
Completed Feb 2020

Applied Skills

Design Collaboration
Content Strategy
Wireframing
Prototyping
User Interface Design


View Desktop Prototype
View Brand Guidelines

Summary

Carbon/Green helps promote sustainable practices on small island developing states (Polynesia, Micronesia, or The Caribbean). The website helps and guides businesses towards environmentally-friendly growth in 5 different work areas.

Within a leading role, I was a major contributor towards the information architecture, content organization, wireframe iteration, and user interface design – also helping with user research.

About Carbon/Green:

“Agency Carbon/Green (CG) is a strategic development consultancy, applying technology to benefit the environment, the economy, and society.”

Objectives

  • Complete and utilize Carbon/Green brand guidelines for ideation.
  • Determine the appropriate layout for the content quantity and brand.
  • Design medium-high fidelity wireframes and prototypes for future development.

Inspiration

Sustainable Development

“Rapid, unplanned and unsustainable styles of urban development are making developing cities the key focal points for emerging environmental and health hazards.”

World Health Organization (WHO)
United Nations Environment Programme (UNEP)

One of the emerging environmental challenges of our time will be “rapid, unplanned, and unsustainable” urban development. Carbon/Green’s mission to promote cost-effective and sustainable growth for developing countries is sorely welcome.

Project Underway

When I joined the team collaboration, the project had already been making inroads on industry research, competitive analysis, and branding guidelines. During these activities, I took on an observant position while offering advice if needed or appropriate.

Business Needs

An expert interview with our stakeholder, Chris D., had been conducted to outlining their main ambitions for the website:

  • Information on services offered.
  • Designed as an online business card.
  • Carbon/Green – now part of Resilience Fund.
  • Primarily meant for mobile viewing.
Excerpt from our expert interview.
Excerpt from our expert interview.

Competitive Analysis

Our teammate Diego created a short graph where competitor strengths, weaknesses, and takeaways were shown:

Competitive Analysis done for Carbon Green.

Demographic Research

Our ideal consumer would have been somebody located on small island developing states working in the public or private sectors in the following markets:

  • Retail chains
  • Real estate developers
  • Oil and gas companies
  • Energy companies (wind, solar, etc)
  • Commercial organizations
  • Government ministries

User Stories

“I want to learn more about sustainability and consider if it would benefit my business.”

Franchise Owner in Jamaica

“I want to help combat climate change, but ‘green’ technology is too expensive.”

Business Investor in Samoa

> View our sustainability research here


Ideation

Branding Guidelines

Lisa, Silmara, and Diego compiled a brand document covering conventions like colour palettes, mood boards, brand-marks, and typography, to show our stakeholders in order to ensure we were all on the same page.

logo conventions for Carbon/Green.
Carbon Green Typeface specifications.

> View Carbon/Green brand guidelines here

Wireframe Iteration

We moved onto low-fi wireframes to start and jot our ideas down.

Initial paper wireframes.

Then, we created a quick wireframe on Figma to play around with:

Low-fidelity wireframe on Figma.

Design Takeaways

  • We decided against a slideshow as most mobile users scan content and could skip it.
  • We played around with the idea of accordion bars containing work area content.
  • We decided to place a video onto the website to focus on showing a bit more than telling.

Implementation

Figma Prototyping

Continuing our collaborative wireframe iteration on Figma, we designed interactive prototypes for mobile, tablet, and desktop screens:

Mobile Prototype:

Desktop Prototype:

> View Carbon/Green *tablet prototype here

User Interface

Carbon Green designs.

Our digital Carbon/Green “business card” would be a single page as business-oriented consultancies have a heavy emphasis on establishing meetings discuss further details.

Modal windows would slide or pop in to inform users of Carbon/Green’s 5 primary work areas.

Modal interaction on content.

Modal windows were the better choice in context against:

  • Accordion bars, which could disorient the user if there were more than 1-2 lines of content.
  • Additional pages – which were redundant as we wanted to keep the details light.

It was not necessary to go too heavily in-depth on information as users would need to contact Carbon/Green personally to proceed. We only needed to sell the idea of Carbon/Green being professional and competent.

Next Steps

The project deliverables were given to the Carbon Green stakeholders and team to be handed off to a development team they would find at a later date.

Ideally, it would be best to work with the developers in order to fine-tune the modal window interactions as Figma’s animation options are limited in scope.


Insights

It was quite challenging to gather relevant demographic research on the people with specific occupations in small island developing countries.

It was hard to gather information from just about anybody in those regions, let alone what a middle-aged real estate developer in the Caribbean would prefer! Luckily, general research like “what a general, working-aged real estate developer would prefer” managed to cover for that set of user expectations.

> Back to my work