SPACE FOR EVERYONE

Or at least that's how I felt walking into Bloorcourt Village's Comedy Bar for the first time...

And it looks like I'm not the only one!

That's Gary and James-- they founded Comedy Bar after years of renting out stages and spaces across Toronto for their group the Sketchersons to perform

The space was originally a local "restaurant"... let's just say it was a tough journey to light upon shedding the shady-business. Some of which still stands!

"It's so ridiculous, there's all these places where you can see mistakes."

The Challenge

"

I Think it's really important that a space remembers where it came from.

"

My goal was to elevate the e-commerce experience of this local comedy venue, amplifying the customer and platform user's experience, whilst also taking into account the business need to make the checkout process more efficient and intuitive. 

The Process

My first step was to identify the business goal, it's brand, users and possible problems with the stakeholders. Then, I conducted research on the existing Comedy Bar website and users to gain more insights. After having the needed information, I iterated on 2 rounds of design and delivered the final project.

User Research

Through user interviews and surveys, I identified three key problem areas for Comedy Bar platform users:

CLIENT

Comedy Bar

ROLE

UX/UI Designer

METHODS

Competitive analysis, usability test, survey, user personas and respective flows, low-mid fidelity wireframes, high fidelity clickable prototypes

TOOLS

Figma, Sketch

PROBLEM 1

Current site overwhelming and confusing UX/UI​​​

​-->  Unusable functions, "sketchy UI"

Non-functioning slider

Items which look like buttons that are unclickable

PROBLEM 2

Non intuitive, monotonous, information overload​, lack of clarity 

PROBLEM 3

​No way to keep tickets; unable to send receipt to customer

-->  Purchase process taking user out of flow 

"

I always hated asking my friends to check out the website to help me plan our outting, they thought it looked sketchy and were put-off from going.

"

User-Centered Design Canvas

RESEARCH INSIGHTS

1. Business

A local comedy venue which provides daily comedy shows across different styles, hosts workshops and special events

2. Users

Affinity Map

  • Individuals interested in the local comedy scene for leisure and group outtings 

  • New comics 

  • Seasoned pros 

  • Anyone and everyone

3. User's Problems

  • Current site overwhelming and confusing UX/UI

  • Non intuitive, monotonous, information overload

  • Unusable functions, sketchy UI

  • No way to keep tickets (no email)

  • Purchase process taking user out of flow (email)

4. Motives

  • Find information about show times, calendar dates, scheduling

  • Purchasing tickets beforehand, planning ahead

  • To learn more about comedy, workshops

  • Host special events

5. Solutions

  • Display most important information first based on user research

  • Make the UI more pleasing to gain trust from platform users 

  • Clarifying layout-- i.e. two stage options to reduce confusion

Meet the Users

Screen Shot 2020-10-20 at 7.53.20 AM.png

Based on the findings, I approached my redesign in three steps:

Information architecture, Core features, and Visual design.

Information Architecture

User Flow

Site Map

HOMEPAGE Hierarchy Re-organization

  1. Comedy Bar logo

  2. Login

  3. Navigation --> calendar, workshops, events, accessibility 

  4. Popular events, highlights --> purchase ticket

  5. Stages --> Main and Cabaret 

  6. List of shows, style variation options 

  7. Social media connection 

  8. Extra Navigation links, user account, community 

Sketches & Idea Validation 

I sought feedback by creating many sketches, wireframes and ran usability tests with current and random users. From these sessions, the users drove my designs to a cleaner, clearer layout.

THE SOLUTION

Core Features

Clearer communication and layout / segregation 

Less confusing UI elements

Clearer differentiation between the venue's two stage options to reduce confusion

Login and account functions, allowing access to more features, customizations & insider info

Encouraging sign-up and connectedness 

Broke-down processes onto multiple pages for less confusion and decision fatigue

More appealing UI for decision making

Familiar checkout 

Accounts for email to send tickets, receipts and insider info 

Slider function for highlights and most popular shows/events so customers can stay in-the-loop and make easy decisions

"Netflix inspired" show layout and categorization

Individual calendars for each stage

Split-up processes onto multiple pages for less confusion and decision fatigue

Smart suggestions and recommendations

Saved events

Direct ticket access

Community follow feature - staying in the know

Add event to calendar

Easy access and download tickets

MOBILE

WEB

Prototypes

REFLECTION

— Always build mobile considerations

Building out a mobile version of your PC design aids in clarity and further considerations. Nowadays companies should always develop both for different device orientations.

— Don't get attached to your original designs

Within an agile design process/sprint, it is important to not get attached to an idea or a design. Always keep an open mind for more and possibly better ideas!

— Remember where you came from

This project taught me the importance of the human story. From beginning to end, people and their experiences are consistently the driver for all designs. If you ever don't know where to start-- start here.  

"

I feel like Gary built this place for all of us, and in no time, this place was for people he never even knew

"