Making climate resources more accessible through design

How we started

1. Collecting information about the platform
2. Understanding its business goals
3. Exploring the website's history to see how it evolved
4. Conducting a benchmark analysis by examining similar websites and services

Our work included

1. Competitor analysis
2. Best practices
3. Expert review notes and ideas
4. Different designs
5. UI Kit
6. Action plan

Identifying issues

With the help of 6 experts from our team, we cross-checked the platform’s design based on a list of predefined principles and we identified issues in the following categories:

1. UI, Aesthetics, Look&Feel
2. Readability, Visual Hierarchy
3. Navigation
4. Design Consistency
5. General Suggestions

We documented our design suggestions in FigJam, the design proposals in Figma, and the research insights (processes, methods, tools used, results) in Google Slides.

Problems identified

1. There is a broad color palette and that affects the way the brand is perceived.
2. There is no consistency between visual elements.
3. The use of uppercase affects hierarchy.
4. The information architecture is confusing for the users.
5. The text paragraphs are long and need more engagement.
6. There is no storytelling to guide the users.

Proposal

Based on the insights we gathered from the discovery and heuristic evaluation phases, we created and proposed 3 visual design options for the website:

1. Light changes
2. Intermediate changes
3. In-depht changes

Our priority was to enable our clients to enhance the website's communication with even the slightest adjustments. All design suggestions and iterations were created using a UI Kit, which, of course, we also included in the handover.

A: Light changes

1. Fewer colors to strengthen the brand's visual perception.
2. Altered grids to generate symmetrical, empty space between elements.
3. Consistent visual system to help the user understand the virtual space.
4. Structure, content, and images remained the same.

B: Intermediate changes

1. Bigger hero with an appealing image and saturated colors to generate an impact.
2. Bolder color palette but still not as much as in the original version.
3. The structure remained the same.

C: In-depth changes

1. Complete redesign, changing both the structure and content.
2. Consistent illustrations to strengthen the brand.
3. Storytelling to guide users through the website.
4. Encourage users to engage and take action for climate change adaptation.

We had a meeting with their team where we handed-over the following:

1. Visual Board with the 3 design proposals we previously described.
2. UI Kit which contains buttons, icons, fonts, and other graphical assets, created to ensure consistency and efficiency in the design and development of the website.
3. Detailed action plan with 2 approaches: quick fix and platform redesign.