Amaterasu Za Website Redesign

Leveraging a performing arts organization's online presence to draw more participation

Amaterasu Za is a New York City-based nonprofit performing arts organization that offers bilingual Japanese-English performances, classes, workshops, and online events promoting cultural exchange. They have an extremely passionate, captive audience for their unique offerings, but information on the website is difficult to find. Since this organization is close to my heart, I worked on a pro-bono proposal to transform their basic website into a beautiful showcase that more accurately effects the quality and cultural richness of their projects.

Client:
Amaterasu Za

ROLE:
Sole UX & visual designer, interfacing directly with stakeholders

YEAR:
2021

Progress:

The Challenge

Amaterasu Za has a very niche audience of theater and Japanese culture enthusiasts, but they are also very passionate, and their excitement upon finding something that perfectly caters to their interests leads to high conversion. As such, the biggest challenges of this redesign are:

  • Improving discoverability to introduce new participants to this relatively small and unknown organization
  • Educating the potential participant with comprehensive and clearly organized information
  • Reducing friction in the donation and class/event sign-up processes once a potential participant's interest is captured

How can increase discoverability, entice participants, and reduce friction in the sign-up and donation processes?

Research

Research Goals

With the aforementioned goals in mind, I sought to answer the following questions via user research and competitive analysis:

1

What entices someone to participate in a local or online theater event?

2

What information does a site user need in order to feel comfortable donating?

3

What are some of the pain points of the current Amaterasu Za website?

4

What are comparable organizations doing successfully in their online presence to attract interest and donations?

User Interviews

I recruited 5 research participants via social media who are interested in theater, particularly Japanese theater forms; fluent in English, and either fluent in or currently studying Japanese; and have donated to the arts. Via video conference, I asked some general questions, and we walked through the current Amaterasu Za website together while I collected their impressions.

Interview Participants
  1. Katie: English teacher and directorial assistant; aspiring theater director
  2. Laura: English teacher and theater enthusiast
  3. Alex: Japan studies student and theater enthusiast
  4. Carol: Japanese translator/interpreter and theater enthusiast
  5. Taylor: Theater enthusiast working at the Japanese consulate in Chicago
Read Full Interview Report
User Stories

To bring some clarity and organization to the insights gleaned from the user interviews, I summarized the feedback into user stories.

User Persona

I also synthesized the insights from the interviews into a typical user persona for easy visual reference.

Empathy Map

I then further visualized the insights into an empathy map to share with the client.

User Journey

At this point I wanted to be able to demonstrate to the client the emotional factors involved in making a decision to donate to a nonprofit, especially to the arts. I illustrated the typical participant's emotional journey from discovery to donation with a user journey map.

Competitive Analysis

As my research continually highlighted the importance of discoverability, and the challenges/frustrations experienced by both performing arts organizations and fans during the pandemic, I investigated the web presences of some comparable organizations to see how they were handling not only their websites, but their social media and pandemic programming as well.

UX Design Process

User Flows

The main CTAs for the website are enticing donations, class sign-ups, and, post-pandemic, purchasing tickets to performances. Donations are handled via a third-party website, so my goal was simply to provide as clear and direct a path to donation as possible. For the current project scope, I also designed a user flow for a calendar-based class sign-up.

Flows: Class Sign-up & Donation
SiteMap

The most common feedback from the interviews, other than more pictures, was that information was difficult to find. I made sure to develop information architecture that both followed expected patterns and worked for the existing content on Amaterasu Za's site.

Social Media Proposal

The insights I gained from the interview process indicated that when it comes to theater, an organization's social media accounts are as important if not more important than its website. Nearly all participants interviewed said they get their performing arts news and updates via social media, and will check an organization's profiles for additional photos and videos.

I thus determined that it would be prudent to include a social media proposal as part of the user experience design process. I collaborated with a social media specialist to come up with a presentation.

Visual Design

Branding

Amaterasu Za's founder already had a logo that she was eager to continue using, but no other brand guidelines had been established. We began the UI design process by working together to solidify Amaterasu Za's brand voice via both verbal discussion and a collaborative mood board.

Key Brand Concepts & Inspiration
  1. Neutral, nature-inspired colors
  2. Kabuki and Noh imagery
  3. Traditional Japanese art
  4. Welcoming and inclusive
Sketches & Mockups

Next, I roughly sketched out some layout ideas for the home page, class and project pages, and an events calendar.

Then, I mocked up a home page in two possible color schemes based on our mood board. The client preferred the green/gold option.

Style Guide

With the chosen color scheme, I established comprehensive brand rules and created a style guide.

View Full Style Guide & UI Kit
Before & After

Before

  • Plain, text-heavy site
  • Lack of images
  • Information architecture unclear
  • English and Japanese text cluttering the same page

After

  • Fully responsive design
  • Established brand voice
  • Showcases beautiful imagery from Amaterasu Za's past projects
  • Clear information architecture
  • Bilingual site
Desktop Prototype

Results

Usability testing

Using the desktop prototype, I conducted both unmoderated and moderated testing of the website redesign. Participants included all interview subjects from the user research phase plus two new volunteers. Participants were tasked with learning about Amaterasu Za and signing up for a class. The prototype yielded a 100% success rate, and received a great deal of positive feedback, especially from those who had also tested the previous website.

Test Objectives & Results
  1. Is it easy to find out what Amaterasu Za offers as an organization? Yes, all participants were able to find a satisfactory amount of information.
  2. Is it easy to discern which productions have passed and which are upcoming? Yes, all participants thought this was clear.
  3. Is it easy to find class descriptions and sign up for classes? Yes, all participants were able to sign up for classes easily.
  4. Does the website give the user confidence to donate and a clear path to donation? Yes, all participants said they would feel comfortable donating.
Read Full Test Report
Participant Feedback

"It's really elegant and lots of information is conveyed (through words & pictures) without having to search hard for it. I really get the impression that their mission is to create a space to share/promote/celebrate Japanese theatre and culture in New York. While the words are what explains this, the design/pictures is what emphasizes the Japanese focus of the company"

"It looks great and everything was where I expected to find it. The typography is amazing—love the clean look. Overall very well done, the calendar scheduling was easy and I only saw the dates that were relevant- not a full month calendar, so that was nice. I was going to comment on an 'add to calendar' link but I guess it is redundant since the zoom link will come with that information. Nicely done!"

"Really love the branding direction. Looks artistic, fun, and welcoming. The visual hierarchy is great as well. I didn't read everything written but it was easily scannable. Overall, I think this is great work!"

"Very easy to navigate and the pictures really help the viewer to understand what Amaterasu Za is all about!"