Responsive Website:

Website redesign for a bilingual comedy bar in Tokyo

Tokyo Comedy Bar

View prototype

Overview

Background

After having lived in Tokyo for the better part of a decade, my main source of comedic entertainment came from the absurd yet painstakingly memorable TV commercials I’d see every day whilst taking public transportation. As such, it was a happy moment when I found out that Tokyo Comedy Bar (TCB) had opened up in downtown Shibuya in 2022, the first and only stand-up comedy bar in Tokyo.

TCB has since grown into a popular hub for both foreigners and locals alike. The venue offers stand-up comedy shows in both English and Japanese as well as various workshops for those who are interested in learning the skill themselves. It is in many ways a true melting pot for language and culture.

For this project, I redesigned the venue’s website and booking experience, focusing on visual design and localisation.

How can I create a bilingual booking experience that is intuitive to both locals and foreigners in Tokyo?

Goals

Uncover user pain points in past online booking experiences
Understand users’ mental models around navigating a venue’s website and making a booking
Discover the most prominent issues users struggle with on the current TCB website
Learn what information users seek out before and in the process of making a booking
Identify the cultural nuances in the expected booking experience between that of foreigners and Japanese locals

Research

How have other comedy clubs designed their websites and do they offer a smooth and intuitive booking experience?

In my research, I wasn’t able to find any references for well-designed bilingual comedy club websites. However, I did find clear patterns on the comedy club sites with good booking systems.

The three venues I researched all had multiple entry points for the user to ‘make a reservation’ or ‘book tickets.’ This made it easy for the user to get to the events page, even if they didn’t know where to find it at first.
All three booking systems were contained within one, native website, meaning that at no point does the user ever have to be redirected to another website to complete the booking.
They all had images at the core of the website and booking experience, allowing the user to get a visual sense of the event before booking.

*Note: TCB’s existing website is lacking on all three points.

User interviews

Seeing as this project was a website redesign, I wanted to make the most of my user interview sessions by taking a two-way approach to my questions.

1st half of the interview:

Probing users’ previous experiences with booking reservations online and uncovering any pain points.

2nd half of the interview:

Showing users TCB’s existing website and observing how they navigated the booking system.

Participants: 5 users (mix of tourists and locals)

Age range: 28-30

Location: Japan and US

Criteria:

Prefers to book online rather than by calling or in person
Interested in watching live stand-up comedy

Affinity mapping

Despite speaking to two widely different groups of people — tourists and locals — I was able to uncover some pretty consistent themes from their responses which I have mapped out below.

3/5 users felt the existing booking process was overcomplicated and didn’t need to be on two separate websites.

Among the five users I spoke with, three expressed irritation at how overcomplicated the booking process felt to them.

One aspect of this was the fact that users were redirected to a third-party booking website (Fienta) half-way through. On the new website, users were presented with the same event information as on the previous website, and users were asked to “Book Tickets” for the second time.

Recognition > recall

Users spoke of their frustration when having to navigate between multiple tabs or areas of the site to remember the information needed to proceed with a booking. Many preferred to make a booking all in one site rather than having to be redirected to a new site.

The users I interviewed voiced frustrations that were in line with the main usability heuristics of design.

Visibility of system status

Recalling previous booking experiences, users felt frustrated about how many steps were required in the booking and would prefer to know their progress. Users also appreciate being presented with positive feedback about their actions on a website, as well as insight into the number of remaining tickets.

Aesthetic + minimalist design

Many users found the existing website’s use of colour to be harsh on the eyes, making things difficult to read. Another issue users faced was ‘ too much text ’, on the page.

User personas

Despite the many consistencies in the frustrations users experienced with online booking systems, there were a few recurring topics that pushed me to consider creating two distinct personas — the tourist and the local — to address their respective needs.

Payment options

Digital wallets (e.g. PayPal, Google Pay, Apple Pay) vs. localised payment options (e.g. convenience store payment)

Receipt/Invoice

Misunderstandings around the meaning of the phrase “I’d like to receive a receipt for this payment” depending on whether or not the user was familiar with Japanese payment customs.

Defining the problem

After putting myself in users’ shoes, I had to start considering the business goals and thinking about ways to approach the design stage in a way that could balance the two.

User flows

My intention is to design a user experience that will reduce confusion & time wasted.

The key difference between the existing booking flow on the existing TCB website and the new flows I created lie in the efficiency and speed with which the user can reach payment. By eliminating redundant steps, the intention is to design a user experience that will reduce confusion and time wasted, leading to greater overall satisfaction.

Usability Testing

Seeing as I was designing a bilingual site, I made sure to test my designs with foreign and Japanese users and had both groups test out the desktop website in each languages.

Due to time constraints, I chose to focus mainly on desktop not only for my own educational purposes of gaining experience with a bigger screen real-estate, but also because the majority of the users I spoke with frequently use a laptop during their working hours.

As I began designing, my early wireframes quickly progressed to mid-fidelity seeing as I already had some visual content to work with from the existing TCB site, including an impressive logo with a striking neon effect.

Additionally, I felt that adding real images of the performers as well as some colours to highlight the CTAs would lead to a more realistic testing simulation for the users.

As I tested my designs on real users, I was surprised to find that almost no one interacted with the “Pick a Date” CTA on the homepage. Although this did not prevent people from being able to proceed to booking, I knew this was an issue I had to fix, considering that providing users with multiple entry points to booking was one of my main goals.

Another moment of insight was discovering that users had a different mental model to my own re: filtering events. I expected users would want the website to automatically show them the next available shows meeting the relevant filters, however, I found that users would prefer to see that there are no events meeting those criteria, and then proceed to find the event manually.

Iterations

I knew I had to fix the CTA on the homepage as well as the filtering system to match users’ mental models.

Final Prototype

Step 1: Support multiple languages.

Step 2: Enable a smooth booking experience.

Step 2: Provide users with control and precision over their searches.

Step 4: Make it responsive!

Conclusion

As someone who holds both identities of being a Japanese person and a foreigner in Tokyo, a localisation project like this one was an extremely fun and interesting experience. In talking to users of both backgrounds about their digital experiences and behaviours, I was able to remind myself of cultural nuances and differences that I had never questioned before as well as learn about new ones.

In terms of next steps, I would love to continue my work on the mobile screens to complement the full set of desktop screens. Ideally, then I would be able to find more users to test my mobile screens with to learn if my designs are truly responsive.