Project Overview

Context & Background

User Research

Information Architecture

Design System

Outcomes

Pioneers Japan

Pioneers Japan

Pioneers Japan

Creating and implementing a comprehensive design system to revitalize this website's branding and optimizing user interactions.

Creating and implementing a comprehensive design system to revitalize this website's branding and optimizing user interactions.

Revitalizing B2B medical communications agency website to attract & engage
new users

UX/UI

Conversion Optimization

Revamp

Project overview

Duration
& Outcome

Duration
& Outcome

4 mos
Built and shipped >>

Team

1 Designer

My Role

UX/UI Designer

Toolkit

Figma
Adobe Creative Suite
Wordpress

Location

Tokyo, Japan

Problem

A nonprofit organization faced engagement challenges with its web platform, including high ___ rates, low visit returns, and limited interaction with key content. How can we streamline user flow process so people will engage?

Outcomes

159% increase in total site views

143% increase in unique visitors

80% increase in form completions

Learn about how I achieved these results

Learn about how I achieved these results

—>

Context & Background

The original Pioneers Japan website was dated, disorganized, and confusing to navigate, particularly on mobile. Users couldn’t connect with opportunities and teams they were seeking to contact, nor could they find crucial information.

The previous site was disjointed and inconsistent in their visual identity and page structures, and their visual identity was too disconnected from their parent organization. This was due to there being multiple contributors to this site, all with varying degrees of experience using Wordpress.

🤨

Inconsistent and difficult to navigate page structures, particularly on mobile web

⚙️

Lack of a system, template, or protocol for updating or creating new pages

Potential users found other resources about Japan’s Christian history and prayer needs to be fragmented, outdated, and unreliable.

Potential users found other resources about Japan’s Christian history and prayer needs to be fragmented, outdated, and unreliable.

🎨

Disjointed visual identity across pages, and with their parent organization

Disjointed visual identity across pages, and with their parent organization

⚠️ Challenge

How might we streamline, integrate, and unify both the overall user experience and the website contributor experience?

User research

Methods

We held 1 group discussion and 1 brainstorming sessions with all 6 contributors to identify organizational pain points. Then, I assessed the website’s analytics to determine total views, visitors, and engagement rates, and conducted 2 user testings to identify user experience pain points.

Site Analytics

I evaluated the past year that the website had been live to see how many visitors were coming to the site, how long they stayed for, which pages and links they engaged with, and if they filled out the contact form.

Comparator Analysis

Comparator Analysis

I evaluated websites of other non-profit organizations to identify how key information is typically structured, how teams and partnership opportunities were displayed, and where call-to-actions were placed.

I evaluated websites of other non-profit organizations to identify how key information is typically structured,
how teams and partnership opportunities were displayed, and where call-to-actions were placed.

User insights

Cannot find consistent information on teams’ work, members, and partnership opportunities

Cannot find consistent information on teams’ work, members, and partnership opportunities

Mobile web experience is overwhelmingly text-heavy and an inconsistent on every page

Mobile web experience is overwhelmingly text-heavy and an inconsistent on every page

Confusion as to who to contact if interested in a partnership opportunity

Confusion as to who to contact if interested in a partnership opportunity

Stakeholder insights

Feeling overwhelmed as there is no template to create new webpages or update current ones

Feeling overwhelmed as there is no template to create new webpages or update current ones

Multiple teams and their work were not yet able to be listed due to unfamiliarity using Wordpress

Multiple teams and their work were not yet able to be listed due to unfamiliarity using Wordpress

Visual inconsistencies causing confusion when updating content or creating new content

Visual inconsistencies causing confusion when updating content or creating new content

Information Architecture

User Flows

I audited all pages to break down what were the common sections, and used insights from user and stakeholder interviews to finalize what key elements were needed across all content pages, to organize a structure and layout.

Page Layout

After deciding on the key elements and aligning with stakeholders on direction, we began iterating on the webpage layouts to evaluate and test for impact, readability, clarity, flow, and replicability on the stakeholders' end. Created 50+ wireframes to explore all options and come to the most readable and understandable layout for users and for stakeholders to replicate and subtract from as they see fit.

Layout iterations

We landed on the structure below, and then began iterating on what made sense to put emphasis on
to encourage engagement and action from visitors of
the page.

We landed on the structure below, and then began iterating on what made sense to put emphasis on to encourage engagement and action from visitors of the page.

We landed on the structure below, and then began iterating on what made sense to put emphasis on to encourage engagement and action from visitors of
the page.

Aside from the re-design and restructuring of the website, I also made a tutorial and templates so that stakeholders would be able to update the website on their own as well.

Aside from the re-design and restructuring of the website, I also made a tutorial and templates so that stakeholders would be able to update the website on their own
as well.

Design system

Visual design & branding

Our primary goal was to update the current website branding to be cohesive and consistent across all pages in terms of typography, colors, and overall visual language. Additionally, the colors and branding were to be consistent with the branding of the parent organization, Pioneers, in order to maintain the extended brand identity.

Key points

Rounded, organic,
and approachable.

Modern, and consistent with Pioneers brand

Potential users found other resources about Japan’s Christian history and prayer needs to be fragmented, outdated, and unreliable.

Visually cohesive with both western and
Japanese aesthetics.

Design decisions were organized and documented on a shared Figma library for future reference, and built out on Wordpress.

✅

Better emphasis and visual mapping of important information

✅

Visual consistency across site platform and with parent organization site

Potential users found other resources about Japan’s Christian history and prayer needs to be fragmented, outdated, and unreliable.

Potential users found other resources about Japan’s Christian history and prayer needs to be fragmented, outdated, and unreliable.

✅

Evolved brand identity to a more modern look and feel

Evolved brand identity to a more modern look and feel

outcomes

This site is live! Please take a look here!

Impact of redesign

Impact of redesign

Overall, the redesign of the site resulted in a 160% increase in page visits and user interactions. Even after several years, the number of interactions has remained consistently more than in previous years.

Overall, the redesign of the site resulted in a 160% increase in page visits and user interactions. Even after several years, the number of interactions has remained consistently more than in previous years.

Final reflections

Working with so many stakeholders at once as a solo designer was a first for me! it required a lot of planning, coordination, clear and constant communication, and patience to field questions, provide updates, and integrate feedback while keeping the project timeline.

There were a few times where I chose to put in extra hours to provide more design options that aligned better with stakeholder feedback that ended up being less efficient, since it overwhelmed them with decisions, which taught me that getting to know the workflow and decision making process of the stakeholders is also a trial and error process.

next steps

👩🏻‍💻

Checking in with stakeholders to see if the templates and tutorial are sufficient for them to update content on their own.

Checking in with stakeholders to see
if the templates and tutorial are sufficient for them to update content on their own.

🪄

Planning and designing future features using existing design components

🇯🇵

Translating the site and all content into Japanese and other languages

Sharon Kim 2025