Voice Up Japan
A responsive website redesign for a Japan based non-profit
Voice Up Japan is a non-profit organization fights for gender equality and speaks up against sexual violence and discrimination in Japan through political activism, hosting educational seminars, and building community. It is actively involved in spurring legislative and societal change and creating a grassroots movement towards a more equal Japan, despite being a relatively young organization. Having lived and worked in Japan for two years, it is a cause that I support wholeheartedly.
THE PROBLEM: The original website was largely ineffective. It did not convey the organization’s political and societal impact and it was also difficult to navigate, frustrating to use, and visually unappealing.
TIMELINE: June 2020 – August 2020
TOOLS: Survey Monkey, Zoom, Miro, Adobe XD
STAKEHOLDERS: Kazuna Yamamoto (President of Voice Up Japan), Johann Fleuri (Media Team Lead)
Research
COMPETITIVE ANALYSIS
I completed a competitive analysis of five non-profit websites, whose mission was related to that of Voice Up Japan, to better understand the established best practices. I audited the information structure, layout, content, and UI.
SURVEY
I also conducted a 5 question survey, sourcing respondents from both a Facebook group and the newsletter, to better understand the goals and current user experience of a greater number of users.
KEY TAKEAWAYS:
•The 2 most common user goals were:
1. Reading articles written by Voice Up Japan members
2. Learning more about the mission and activities Voice Up Japan
•25% of users were not able to accomplish their goal the last time they visited the voice Up Japan website
•30% of users expressed frustration at the website’s navigation and layout
•20% of users expressed that the faulty language settings on the Voice Up Japan website prevented them from accessing content in their target language
USER TESTING
Next came user testing of the original website. I tested 3 users on 3 distinct tasks on the Voice Up Japan website to observe their behaviors and responses. Due to the Covid-19 pandemic, the tests were conducted remotely over Zoom.
KEY TAKEAWAYS:
•Users were not able to decipher the organization’s past impact despite extensive searching
•All 3 users commented negatively on, and experienced problems with, the original website’s navigation and layout
•2 out of 3 users also experienced problems with the website’s language settings
Analysis
AFFINITY DIAGRAM AND USER JOURNEY MAP
I then built an affinity diagram in order to process all the information I had collected from the competitive analysis user testing, and survey.
From the insight patterns I discovered while creating the affinity diagram, I created a user journey map that visualized the current user journey to solidify in my mind the direction of the redesign.
KEY TAKEAWAYS:
As the sole designer and developer on the project, it was crucial that I determine the key requirements of the redesign so that I could complete the project within the given timeline. Through the process of creating an affinity diagram and user journey map, I was able to determine what my priorities were moving forward into the design phase of the project:
1. Restructuring the information architecture and content layout of the website to better match users’ mental models and established conventions
2. Expanding the website content to include organizational impact, history, and events to reflect Voice Up Japan’s incredible progress as an organization and to meet users’ goal of discovering Voice Up Japan’s accomplishments/activities
3. Ensuring that users were able to access content in their target language
MoSCoW METHOD
I then utilized the MoSCoW method in order to visualize my priorities moving forward, which I also presented to the president of the organization in order to facilitate buy-in to the design process moving forward.
Ideation
INFORMATION ARCHITECTURE
I began the ideation phase of the project by restructuring the navigation and information architecture of the site to match established conventions and the user mental models I uncovered during the research phase.
My restructed IA also takes into account the future of the organization – whereas the branches were previously listed as a menu item, I moved them to the Our Team page to accomodate the organization’s projected growth.
The original information architecture
My restructured information architecture
PROTOTYPING
After several iterations of sketches, I used Adobe XD to create an interactive mid fidelity prototype in order to create an artifact that I could easily and quickly test with users to validate my design solutions.
Development
VALIDATION TESTING
I then completed another round of usability testing, testing 3 new users on the same 3 tasks I had given the users on the original website during the first round of testing. There was a marked improvement in the users’ confidence when navigating through the new website prototype as compared to the previous round of tests, and the users were able to complete all 3 tasks.
One important pain point I found across all three user tests was that the users expected to see even more proof of Voice Up Japan’s societal impact – my new What We Do page didn’t go into enough depth.
Similarly, 2 of the 3 users attempted to click on the cards on the What We Do page in an effort to learn more. In a future iteration of the website, I plan to expand the What We Do page taking these pain points into consideration.
Reflection
After the conclusion of the project, I walked away with a few takeaways:
Collaboration is key This project was a welcome reminder in the value of strong collaboration and frequent communication. I worked closely with the president and other team members of Voice Up Japan throughout the project to expand upon and reorganize the content in the site to better meet the needs of the users and better feature the organizational vision and legitimacy. This was a challenge at times, because the website redesign coincided with the restructuring of the organization, but I firmly believe the close working relationship I had with Voice Up Japan led to a much better end result.
Informed design This project also showed me just how important thorough research should be in informing design. Through the results of research and analysis phases of the project, I identified and eliminated crucial pain points that had not been immediately obvious to me that greatly improved the overall user experience.
Encouraging buy in Being my first project for a client, it was a continual lesson how to convey my research and vision to stakeholders who weren’t familiar with the field of UX in a manner that would encourage stakeholder buy in.
The new, fully responsive website was successfully launched on August 2nd, 2020. I’m excited to continue this work with Voice Up Japan into the future, as I continue my work volunteering with the organization.
A month following the launch, the President of Voice Up Japan shared with me that user engagement with the website had increased 200% thanks to the redesign.
UPDATE 2021
I partnered with Voice Up Japan again in 2021 to update the website’s look and feel to match the organization’s revamped branding.
UPDATE 2024
As of March 2024, Voice Up Japan has dissolved as an organization, and subsequently the website is no longer active. お疲れ様です!
