top of page
Blank Theatre Company
The Problem: The existing website for the company is outdated, inconsistent, and no longer matches the company identity.
The Solution: Creating a responsive website with a new brand identity that equips the user with the needed information to secure their ticket purchase.
Role: UX/UI Designer, Branding & Logo Design
Timeline: 100 hrs over 6 weeks
Tools: Figma, Notion, Whimsical, Procreate
A Fresh Start, post-Covid
The Client
Blank Theatre Company is a non-equity theatre group which produces 2-3 shows per year, plus a handful of concerts and cabarets to fundraise. They focus primarily on producing musical theatre in the Chicago-area.
To kick-off the project, I sat down with Danny Kapinos, co-Artistic Director of the company. He had a few priorities for the company's new website:
1) Driving ticket sales
Blank was in rehearsals for the biggest show they'd ever produced in March 2020, and had to shut down two weeks before opening. This set them back dramatically, as ticket sales make up the majority of their yearly budget. Danny shared that his top priority for anyone visiting their website would be to have them buy a ticket:
"When we have a show going on, we post everywhere — 'ticket info on our website' — in our social media posts, everything... 'get more information about tickets on our website'."
2) A New Look
Danny wanted the website to establish a professional first impression for the company. He described having the visual appeal of the website be "legit, but not too legit". The company aims at employing young, early-career artists, and he wanted to strike the balance between being attractive & trustworthy to potential artists and audience members, without over-selling. Overall, Danny wanted the website to be more visually appealing, but stressed that he didn't want to sacrifice clarity.
The company also felt they had outgrown their logo and branding. They identified strongly with the color purple, which they had used from the start, but beyond that they wanted to refresh their visual identity.
3) Realistic Upkeep
Blank is an extremely small company, with only two or three people contributing to daily operations. Danny expressed that this was the reason the website had not been re-done sooner — they just didn't have the bandwidth.
A friend of the board had actually done an entire website re-design during the pandemic, but Danny's team found the flow and layout of the website so difficult to work with that they couldn't maintain it in the way they required. Out of frustration, they ended up reverting to the original form of the website.
The Existing Product
Blank's website had some noticeable inconsistencies and issues that could be impacting the user experience.
However, I needed my users' perspective before I started problem-solving, so I jumped into research.
Filling in the Blanks
To start, I wanted to have an understanding of Blank's market. Chicago has a very lively theatre scene, but there's a wide range of production companies. I performed a competitive analysis of the web experiences with similarly sized companies.
User Research
I asked 8 frequent theatre-goers what factors contribute to their decision to see a show, as well as their expectations for a theatre company website. I then asked them to look at Blank's current website and provide their impressions.
Top 4 Reasons to visit the website
1. Buy tickets
2. View the current season
3. Finding audition information
4. Checking performance schedule
Impressions of the Blank Website
Top 4 Reasons to see a show
1. Show's content
2. Knowing people involved in the show
3. Ticket price
4. Cast
Clarifying the Problem
To hone in on the problem I wanted to solve, I pulled my research together and created the primary persona for the users of Blank's website.
I used this persona to brainstorm problem statements, with a particular focus on the most common answers for why users visit the website and why they choose to see a show.
Blank sells their tickets through a third-party vendor, so the main challenge I faced with this problem was to ensure that the user had all the information they needed to complete the purchase before leaving Blank's site.
I sketched some potential home page solutions that would equip the user with the needed information as directly as possible.
Site Map
At this point, I decided to run a card sorting exercise with the existing sections on Blank's site to determine how a user might expect the information to be laid out. I had five users participate in the exercise and, using the results, created a site map.
Putting Pen to Paper
I learned a few things while putting together my mid-fidelity wireframes:
1. My initial site map had three separate pages under "About Us". However, once I went to design them, I realized that the information could easily live on one page. This was supported by the results of the card sorting.
2. After a meeting with Danny, he requested that I add a way for them to feature photos from a currently running production. I wanted to build this into the page that in a way that would simplify the workload for the team.
3. My initial layout of the production history page required uniformity in the images that represented each show. However, this wasn't realistic with the graphics that Blank has, so I restructured this page completely for consistency and legibility.
UI & Logo Design
For Blank's logo re-design, I focused on some of the key words Danny used to describe the company and how it's evolved. I also wanted to improve on the legibility and functionality of their existing logo, allowing it to be used more easily in many kinds of graphics.
For the UI Design, I wanted to find a balance between playful and professional. Danny asked that I keep purple as the primary color, so I wanted the additional colors to complement it.
Putting It All Together
New hero image, featuring the current show, a brief description of its plot and the ticket purchase CTA.
The production history, which features a icon key for cabarets vs. full productions, and each show clicks through to their profile.
The show profile page, with a more detailed show description and a brief summary of the company's take on the show.
The About Us page combines the company mission statement and company member bios, which is expected based on the card sorting results.
Usability Testing
Using my high-fidelity wireframes, I interviewed five young theatre-goers. The primary task was to buy tickets, but they were also asked about their expectations for how other aspects of the website would behave.
"The company seems very professional and sure of themselves."
"I didn't even notice the navigation bar at first."
"I love seeing a little description of the current show."
"Everything I need is right there."
"I don't understand why there are two buttons."
"It's not over-complicated. I don't have to click a bunch of pages to try to find what I need."
Once I organized & interpreted the research, I prioritized and implemented changes to the design, including:
Eliminating the "Buy Tickets" button from the navigation menu to enhance clarity of the task flow.
Adjusting the color of the text box within the hero image to improve the contrast with the navigation menu.
Reducing the font size and spacing in the Production History to help visibility and reduce scrolling.
Eliminating unnecessary text on the About Us page to assist the user in reaching the expected content more quickly.
Final Thoughts
A Balancing Act: Client & User
Throughout this process, I was constantly considering both my user's and client's needs. While I wanted to create the best possible experience for the user, I also wanted to build a product that could be easily maintained by Danny and his team. Given the user feedback in testing, I believe I was able to create an experience that was clear & informative, in a format that the Blank team can realistically keep up.
Creating a Delightful Experience
The most rewarding moments of this process were seeing users be delighted and satisfied when interacting with my designs. I had one user who was literally clapping & bouncing in his seat while he explored the website. Each user seemed surprised and pleased when first viewing the hero image, remarking that they were excited to see a short description of the show along with the poster. Even though this was clearly backed by my research, I think this may not match their prior experiences, and it feels great to create an experience that's fulfilling for the user.
If I Were to Do It Again
With more time and additional resources, I would look to do additional testing. It would have been useful to show my mid-fidelity designs to users to ensure that the flow and layout made sense, before adding the UI. It would also be beneficial to test my current wireframes, with the changes I made as a result of the user testing, to confirm that the modifications are effective.
Want to see the finished product?
{
}
bottom of page