Expert Review for a NPO's Website

NIES - National Institute for Environmental Studies, is a Japanese institution helping with climate change adaptation.

Two screenshots of the homepage we redesigned for the client.

Client

National Institute for Environmental Studies

Industry

Non-profit

Service

Expert review

Team Setup

1 Researcher
+ Experts

Timeline

2 Weeks

Goal

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

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.

Outcome

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

6
Experts Involved
6
Problems Identified
3
Design Proposals

Project Timeline

Project timeline with its main 4 phases: discovery, heuristic analysis, design suggestions and handover
01

Discovery

How we started

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

Our work included

  • - Competitor analysis
  • - Best practices
  • - Expert review notes and ideas
  • - Different designs
  • - UI Kit
  • - Action plan
02

Heuristic Analysis

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

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

03

Design Evaluation

Problems identified

  • - 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 need more engagement.
  • - There is no storytelling to guide the users.
Screenshot of NIES' website showcasing the hero and the latest updates section.Screenshot of NIES' website showcasing the global news and the activities section.Screenshot of NIES' website showcasing information and images related to climate change, temperature projection and impacts and adaptation.Screenshot of NIES' website showcasing the scientific data and tools section.

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:

  • a. Light changes
  • b. Intermediate changes
  • c. In-depth 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.

04

Design Suggestions

a. Light changes

  • ✦ Fewer colors to strengthen the brand's visual perception.
  • ✦ Altered grids to generate symmetrical, empty space between elements.
  • ✦ Consistent visual system to help the user understand the virtual space.
  • ✦ Structure, content, and images remained the same.
The UI design changes featuring colors, buttons and icons that reflect NIES' essence.

b. Intermediate changes

  • ✦ Bigger hero with an appealing image and saturated colors to generate an impact.
  • ✦ Bolder color palette but still not as much as in the original version.
  • ✦ The structure remained the same.
Design changes featuring colors, buttons, icons and some structural changes in the layout.

c. In-depth changes

  • ✦ Complete redesign, changing both the structure and content.
  • ✦ Consistent illustrations to strengthen the brand.
  • ✦ Storytelling to guide users through the website.
  • ✦ Encourage users to engage and take action for climate change adaptation.
Design changes featuring colors, buttons, icons, new illustrations and a whole new structure.
05

Handover

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

  • ✦ Visual Board with the 3 design proposals we previously described.
  • ✦ 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.
  • ✦ Detailed action plan with 2 approaches: quick fix and platform redesign.
*All illustrations used and modified in this designs are from Storyset on Freepik.

The whole process was very smooth and items (report, hand-over meeting) were delivered on time. UX studio made sure to understand the background of the website and the industry, as well as our main concerns and needs, and reflect them in the UX review process. Their friendly approach and professionalism were impressive.

Slavka Sakata
Climate Change Adaptation Coordinator, NIES