NIES AP-PLAT
Expert Review

National Institute of Environmental Studies    ✦    Research     ✦     Expert Review     ✦     Web Design     ✦
National Institute of Environmental Studies    ✦    Research     ✦     Expert Review     ✦     Web Design     ✦
National Institute of Environmental Studies    ✦    Research     ✦     Expert Review     ✦     Web Design     ✦
National Institute of Environmental Studies    ✦    Research     ✦     Expert Review     ✦     Web Design     ✦
National Institute of Environmental Studies    ✦    Research     ✦     Expert Review     ✦     Web Design     ✦
Collage of the final designs handover to the client
*All illustrations used and modified in this designs are from Storyset on Freepik.

NIES - National Institute for Environmental Studies, is a Japanese institution helping with climate change adaptation. UX Studio conducted an Expert Review for their web platform, AP-PLAT, which offers practical and up-to-date information on climate change adaptation and relevant science.

1
Introduction
The challenge

Over the years, the AP-PLAT website accumulated a wealth of information that led to a cluttered interface. As an informational platform, it's vital for visitors to easily find what they need, but this need couldn’t be met.

Goal of the project

Our task involved two main aspects:
• Assessing the website for improved information architecture.
• Creating new visual directions.

Map with the phases we went through: Discovery, Heuristic Analysis, Design Suggestions and Handover
2
Expert Review
Gathering information

We started collecting information about the platform, understanding its business goals, and exploring the website's history to see how it evolved.  We conducted a benchmark analysis by examining similar websites and services, using the insights for inspiration and comparison.

Our work included competitor analysis, best practices, expert review notes and ideas, different designs, a UI kit, and an action plan. We documented and organized all of it in a FigJam board.

3
Suggestions
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:

• UI, Aesthetics, Look&Feel
• Readability, Visual Hierarchy
• Navigation
• Design Consistency
• General Suggestions

4
Look & Feel
Ideation

Based on the insights we gathered from the discovery and heuristic evaluation phases, we created three visual design options for the website.

Our priority was to enable our clients to enhance the website's communication with even the slightest adjustments. Thus, we proposed three different levels of change - light, intermediate, and more in-depth - with visual examples of how each approach would look like in terms of design and resources. All design suggestions and iterations were created using a UI Kit, which, of course, we also included in the handover.

Identified problems

Some of the main problems identified in the original website were the following:
• There is a broad color palette and that affects the way the brand is perceived.
• There is no consistency between visual elements.
• The use of uppercase affects hierarchy.
• The information architecture is confusing for the users.
• The text paragraphs are long and lack engagement.
• There is no storytelling to guide the users.

The client's original website.
First option: Quick fix

The goal here was to change as little as possible to quickly improve the visual of the website and its brand.
• Fewer colors were used to strengthen the brand's visual perception.
• The grids were altered to generate symmetrical, empty space between elements.
• Created a consistent visual system to help the user understand the virtual space.
• The structure, content, and images weren’t changed.

The first design proposal we sent to the client.
Second option: Deeper changes

We deep-dived into changes. We started by modifying the hero image and changing the main colors while keeping the existing structure.
• The hero became bigger, designed to generate an impact by integrating an appealing image and saturated colors.
• We introduced more colors to the system, but still not as much as in the original version.

The second design proposal we sent to the client.
Third option: Redesign

The last proposal was a complete redesign, changing both the structure and content to create a story that guides users through the website. The goal was to encourage them to engage and take action for climate change adaptation.
• We integrated consistent illustrations to strengthen the brand (all images are sourced from Storyset on Freepik).
• We created a story for the users to follow through a specific path.
• We also highlighted the tools the website promoted.

The third design proposal we sent to the client.
5
Outcome

Equipped with invaluable insights, we created 3 different design proposals. All of them are thoughtfully designed for users, encouraging them to engage with climate change adaptation efforts.