CASE STUDY 

BlackoutComedy.org Redesign

THE PROCESS

During each stage, two teammates and I worked together in collaboration.

1

USER
RESEARCH

- defining the problem -

2

EMPATHIZING,
PRIORITIZING & MOCKUP

- emotion-centered solutions - 

3

PROTOTYPING,
STYLING & TESTING

- iteration -

4

RECOMMENDATIONS
& TAKE-AWAYS

- lasting impressions - 

MY UNIQUE AREAS OF CONTRIBUTION:

  • interview questions

  • problem statement

  • storyboard

  • design aesthetic of the home page for mobile and desktop

TOOLS USED:

Figma, Miro

TIMELINE:

3 weeks

THE PROBLEM

Our research showed that Blackout's website is not straightforward or easy to navigate due to missing or inconsistent information, which creates frustrated and confused visitors unlikely to return to the site.

It also gives the impression that Blackout’s global reach is smaller than it is in reality.​

Screen Shot 2021-09-24 at 3.52.29 PM.png

current site's desktop homepage

Blackout-comedy-group_edited.jpg

“I want our website to be easy to use and showcase our mission, energy, and sense of fun.”

- Joy Dolo, Blackout Improv Ensemble Member & Stakeholder

REDESIGN METHODS & OBJECTIVES

  • develop a cohesive brand aesthetic to assert the company's active status

  • make prominent company's offerings and ways of engagement to grow and maintain patron base 

  • optimize the functionality of main navigation and clickable buttons to increase overall usability

1

USER
RESEARCH

- defining the problem -

  • Heuristic Evaluation

  • Competitor Analysis

  • User Interviews & Testing

  • Facebook Survey

How did we arrive at these methods and objectives? Research. At the onset, the team and I certainly had opinions, but opinions acted upon without supporting research yield only half-baked designs! Research illuminated the pain points and positives of users' experience with the current website, which revealed to us what redesign elements to prioritize.

OBJECTIVE 1

Discover what areas of Blackout's website are already effective.

OBJECTIVE 2

Define the information hierarchy that put users at ease when navigating theatre websites.

OBJECTIVE 3

Understand what users look for when visiting theatre websites in general. 

HEURISTIC EVALUATION

A bold color scheme, images and fonts successfully convey the company's vibrant personality. We wanted to be sure to keep these elements, however, an abundance of text stylings and inactive links leave the user feeling confused and frustrated.

Screen Shot 2021-08-16 at 6.25.35 PM.png

COMPETITOR ANALYSIS

They say copying is the best form of flattery! In analyzing competitors' websites, we gleaned positive design elements and unique choices, like navigation bar categories, to integrate into Blackout's website. A SWOT matrix helped synthesize our assessment.

SWOT analysis
Huge Improv Nav Bar

USER INTERVIEW QUESTIONS

We conducted 20-min. recorded Zoom interviews with 5 individuals targeted for their general interest in theater-going. These conversations gave us insight into their desires when visiting theater websites in general as well as their reactions to using Blackout's website specifically.

Blackout Comedy - User Interview Notes sorted data.jpg

Each post-it color represent unique interviewee. (Scroll over to enlarge.)

USER INTERVIEW DATA SYNTHESIS RE BLACKOUT WEBSITE

  • navigation, in general, is straightforward

  • half of users gravitated to the "Get to Know Us" page instead of reading the home page for more info about the company

  • many users assumed the option to sign up for newsletter was located in "Contact Us" page

  • some users wondered if there were other ways to support the company other than donating money.​

SOLUTION IDEAS

  • put newsletter sign up on CONTACT US page

  • make newsletter more prominent or make as website footer

  • create new subheading in GET TO KNOW US tab called "ABOUT US" or "COMPANY MISSION" w/detailed information

  • reduce text of Who Is Blackout? on homepage to be a quick synthesis

  • add additional ways to support Blackout on "SUPPORT US" page (e.g. sharing content and promoting over social media)

FACEBOOK SURVEY

A survey conducted via Facebook with 6 individuals yielded "gestalt" responses to increase the data we had available to work with. Especially for individuals who want to participate but who cannot commit much time to a full user interview, this is a win-win opportunity for data collection.

83%

primarily use mobile to browse the web

100%

expect to immediately see a show calendar

50%

do not need to see mission statement to purchase tkts

84%

expect to immediately see a CTA to buy tickets

PRIMARY DISCOVERIES

Data revealed the importance of making a "buy ticket" CTA and calendar of events the most prominent on the site. Mobile optimization was also of high priority.

EMPATHIZING,

PRIORITIZING 

& MOCKUP

- emotion-centered solutions - 

  • User Persona, Empathy Map

  • UX Scenario, Storyboarding

  • Feature Prioritization

2

While all research data was valuable, not all users interviewed were the "ideal user" and not all websites were examples of the "ideal website." To move ahead, we needed to triangulate the goals of the stakeholder, the design principles of good usability, and the data collected. 

Before crafting the website design, we needed to first craft the user. While there are many potential users of Blackout's website, designing for a general many is less fruitful than designing for one, specific person.

USER PERSONA

We integrated stand-out data from both user and stakeholder interviews to invent "Lynn Owens" as our guidepost throughout the design process. If we were in doubt, we could come back to the question: W.W.L.D.?

Screen Shot 2021-08-17 at 1.23.20 PM.png

STORYBOARD

A visual showcase of Lynn's ideal journey. We chose to represent people of different racial/cultural backgrounds through circles and squares in order to depict the universal feeling of "likeness" and "otherness."

Screen Shot 2021-08-17 at 3.18.27 PM.png

 

THE INTRODUCTION

Lynn is a marketing director from Minneapolis, who loves the theater and going to improv shows. Every month she treats herself to watching a show at one of the Twin Cities theaters.

Screen Shot 2021-08-17 at 3.18.35 PM.png

 

THE "I WANT" SONG

However, as a Black person, Lynn feels incredibly underrepresented when watching shows. She mainly sees white actors onstage and very few Black leading actors.

Screen Shot 2021-08-17 at 3.18.45 PM.png

 

TAKING THE FIRST STEP

While talking to her friend Tyler, Lynn learns about Blackout and is intrigued by their mission to elevate Black voices on the comedy stage.

Screen Shot 2021-08-17 at 3.24.26 PM.png

 

THE INITIAL RESEARCH

She checks out the website and is charmed by the fun, dynamic personality that shines through. She sees they have weekly shows, and buys tickets to go next Monday!

Screen Shot 2021-08-17 at 3.27.34 PM.png

 

THE CONNECTION

Attending a show makes Lynn feel a great sense of connection to the company members on stage through the stories they're telling and how they're telling them.

Screen Shot 2021-08-17 at 3.27.43 PM.png

 

AN OPPORTUNITY

At the end of the show, Blackout's cast reminds the audience that they do offer workshops for schools and businesses. They direct people to go to the website to contact them.

Screen Shot 2021-08-17 at 3.24.26 PM.png

 

A DEEPER DIVE

Lynn enjoys the show so much, she decides to reach out and schedule a workshop for her marketing team, and they have a great bonding experience led by Blackout.

Screen Shot 2021-08-17 at 3.28.00 PM.png

 

VALUE PAID FORWARD

Lynn and her colleague are able to deepen their relationships with each other on a personal and professional level by taking a workshop led by Blackout company members.

FEATURE PRIORITIZATION

Many solutions to pain points were of low effort + high value. A few features went beyond the scope of our project timeline. For example, the stakeholder shared that because of Blackout's global reach, making the website accessible in other languages would be a benefit. However, a localized translation feature would have been too challenging to accomplish with the time that we had.

Screen Shot 2021-09-30 at 3.45.41 PM.png

CURRENT SITE MAP --> NEW SITE MAP

Assessing the current site map showed just how many pages linked to external sites. During user testing, this was often surprising to users and caused confusion. Another significant point of confusion for users was the fact that the Landing Page and Home Page are one and the same. 

Overall, updating the site map was about bringing clarity to the titles of pages. For example, we separated "Upcoming Performances" from "Our Work" and put them at the same hierarchy in response to data from users who wanted to immediately find current events information.

Screen Shot 2021-08-18 at 8.55.32 PM.png

current site map

Screen Shot 2021-08-17 at 4.18.34 PM.png

new site map

PROTOTYPING,

STYLING

& TESTING

- iteration - 

  • Wireframing

  • Lo-Fi Mockup

  • Styling

  • Testing & Iterating

3

We developed a testing plan to put our research and ideas into action and to ensure we received the feedback we needed to upgrade our wireframe from Lo-Fi to Hi-Fi versions.

FIRST

Main Navigation

SECOND

Home Page

THIRD

Interior Pages

WIREFRAMES

Basic designs without aesthetic adornment isolated focus of user testing to overall navigation. Even at the wireframe stage, columns served to keep things visually tidy and establish a structure for the final design.

Screen Shot 2021-08-18 at 5.26.26 PM.png
Screen Shot 2021-08-18 at 5.32.51 PM.png
Figma icon.png

link to lo-fi prototype

USER FEEDBACK ON LO-FI MAIN NAVIGATION 

We tasked users to find certain pages and calls to action in our first wireframe which included full functioning top navigation.

“Is there a way for me to subscribe to their email list to learn more about upcoming

Blackout performances?”

“I like that the homepage gives me the ability to click on many actions so I spend less time looking through navigation.”

“Does ‘Support Us’ mean I can only donate to them, or can I volunteer and support Blackout in other ways?”

STYLE GUIDE

Refining Blackout's bold aesthetic into its style guide was a fun challenge that led to texture, unusual fonts, shapes, and animations! In order to maintain visual clarity for the user while asserting the company's personality through "loud" design elements, we primarily reduced and refined the palate of fonts and made the layout grid uniform.

Screen Shot 2021-08-18 at 6.55.07 PM.png

INTEGRATION OF USER RESEARCH

User feedback from the survey conducted in Stage 1 of our research process revealed a difference in perspective regarding the company's mission statement: users did not hold it a priority, our stakeholder did.

 

To respond to the needs of both groups, we designed a light-opacity "wallpaper" with mission-specific words to graphically share the essence of the company's mission. This way, users wouldn't be put-off by words they didn't want to read, and the stakeholder could convey its message by staying true to its "fun" and "approachable" personality.

50%

do not need to see mission statement to purchase tkts

Screen Shot 2021-08-18 at 6.36.06 PM.png
Screen Shot 2021-08-18 at 5.57.41 PM.png
Screen Shot 2021-08-18 at 5.59.23 PM.png
Screen Shot 2021-08-18 at 5.59.44 PM.png

ITERATION

Lo-Hi Fi Mockups developed the visual style and clarity of CTAs. We experimented with placement, size, and color of social icons and headers, as well as integration of background texture. User testing was helpful when we debated different aesthetic choices.

Screen Shot 2021-08-18 at 6.23.46 PM.png
Screen Shot 2021-08-18 at 6.23.39 PM.png
Screen Shot 2021-08-18 at 6.23.11 PM.png

RECOMMENDATIONS

& TAKE-AWAYS

- lasting impressions - 

  • Hi-Fi Demo

  • Lessons Learned

4

Both desktop and mobile versions of the site contain the same overall styling, but to make the design mobile-friendly, we chose to eliminate the animation present on the desktop site. This responsive design reflects how the size of the frame dictates the elements the design can handle. With more time, the full mobile prototype would be built.

Figma icon.png

link to hi-fi desktop prototype

TAKE-AWAY 1

Listen for the common ground between stakeholders' and users' seemingly conflicting desires. A design solution might exist to serve both simultaneously.

TAKE-AWAY 2

Find time to conduct an unstructured user test. Let the user play and react to your designs for free-flowing feedback.

TAKE-AWAY 3

Pre-organize your design system and components! This helps you implement your style guide faster.

TAKE-AWAY 4

Target a pool of User Testers with key common traits in line with product's target users. Multiple types might mean multiple pools in order to yield more helpful testing feedback.