Back to works

Expert review for an NPO's website

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

Laptop mockup displaying NIES's website
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 and 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
Expert involved
6
Problems identified
3
Design proposals
Project timeline
An illustration of the project timeline, which took 10 days altogether and involved discovery, heuristic analysis, design suggestions and handover
1 /
Discovery

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
A decorative image displaying workshop sessions
2 /
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:

  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.

A detailed document with the design suggestions made by our team regarding UI, aesthetic and look and feels
Design suggestions
3 /
Design evaluation

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.
Multiple pictures of the original website: colorful and fun, but hard to read
Original website

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.

4 /
Design suggestions

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.
Screenshots and assets: our redesigner version is simpler, clearer and greener

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.
Further design suggestions made by our team for a bigger overhaul

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.
5 /
Handover

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.
*All illustrations used and modified in this designs are from Storyset on Freepik.
Slavka Sakata
Climate Change Adaptation Coordinator at
NIES

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

Now available for hire
Let's talk
Schedule a call
Drop a message