Pioneers Japan
Structuring informational content and downloadable resources to call users to action
Duration
& Outcome
Team
1 Designer
My Role
Product Designer
Toolkit
Figma
Adobe Creative Suite
Wordpress
Location
Tokyo, Japan
Creating and implementing a comprehensive design system for a web experience used as a cross-cultural educational resource, designed for mobile-first experience.
Context & Background
Problem
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
⚙️
🎨
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.
User insights
Cannot find consistent information on teams’ work, members, and partnership opportunities
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
Stakeholder insights
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
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
Key Elements
Key elements for team content pages
1️⃣
Rounded cards to host information and content across pages
Dweb — cards on Team Vision section on Team page
2️⃣
Callout sections for important information
Dweb — wave pattern callout section on About page
3️⃣
Team member profiles
4️⃣
Simple column format for easy
content maintenance
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.
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
✅
✅
Evolved brand identity to a more modern look and feel
outcomes
This site is live! Please take a look here!
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
👩🏻💻
🪄
Planning and designing future features using existing design components
🇯🇵
Translating the site and all content into Japanese and other languages
Sharon Kim 2025