Theatre d'Art
UX Case Study
Updating a local theater company's website with a responsive design.
Background
.jpg)
Theatre d'Art is a small theater company local to Manitou and Colorado Springs, CO. They have over 20 years of history in the area creating off beat, experimental theater. They had a website they'd been using for many years, but hadn't updated in a long time, and had never been optimized for mobile. For this project, I decided to work with TdA to update their page with a new responsive design.
Research
I began by looking at the websites of theater companies, large small, to identify design patterns within the industry.
What can we use?
-
All of these websites have a heavy reliance on pictures of their shows. The new site design should incorporate lots of pictures.
-
The small, local companies tend to prioritize communicating their values and missions. This would be a good thing to emphasize.
How should we differ?
-
Many of these websites organize their past and current shows by "seasons." TdA is not presently making shows in consistent seasons, so their site only needs to highlight one show at a time.
-
TdA prides themselves on being off-beat and unique, so the design should make an impact, instead fitting perfectly into a mold.
Understanding the Client
I spoke with the two owners of Theatre d'Art, learning about the company's story, and their mission to create a space for weird eccentric performance art. Together we defined their goals for the site redesign:
1. Provide current information about shows in order to boost ticket sales
2. Drive community donations from the website
3. Have a polished, professional site that is infused with their wacky experimental style
4. Host a living archive of their past works
Understanding the User
Next I spoke with members of the local community. Some were actively involved in theater, while others just occasionally went out to shows at most.
In these interviews, I sought to discover why people like to go see theater, their goals when visiting a theater company's website, and what would make them interested or disinterested in donating money.
After conducting the interviews, I compiled and categorized my findings.
To visualize the user better, I used the responses to craft a persona. This would help me to understand and empathize with user goals and needs.
Having conducted the research and defined the goals of the user and the client, I solidified the overall goals of the redesign project:
Provide information on upcoming shows in order to sell tickets.
Clearly communicate the company's mission and values to drive donations.
Give the website a fresh, responsive design.
Starting Canvas
Looking at the company's current website, it was clear how it wasn't meeting user or client goals:
-
Not up-to-date in displaying current/recent productions and does not have a clear format to display this needed information
-
The donation page has barely any text, only methods to pay, which
turns off users from actually giving donations.
-
The site is not optimized for mobile is somewhat unreadable.
I sketched out the site's current organization of pages, then restructured it into an updated site map.
I decreased the amount of menu items into a condensed, clear set of pages that are intuitive to navigate.
With the new map in mind, I plotted out a user flow, to better understand how the user might navigate through the pages.
I then sketched some of the primary pages I would be focusing on for the redesign, rendering them at a low-fidelity.
With the plan in place, it was time to start looking at the visual element.
How was the website going to reflect the company's funky style?
Branding
Theatre d'Art has a logo, this tightly wrapped spiral. Currently, this logo didn't appear anywhere on the site. I vectorized the logo to use, but also took inspiration to inform the overall aesthetic style of the design.
The clients expressed that they wanted a primarily black and white design, with the accent colors of purple and teal.
Site Building
TdA's site was built using Wix, a site builder I was fortunate enough to be familiar with (it's what this portfolio is built on!). Working on Wix meant I was building a live website, as opposed to a Figma prototype. This presented a unique set of challenges. I didn't have quite as much flexibility as I might've on Figma, but I managed to find unique ways to work within the constraints.
For example, I developed a library of components within the Wix builder.
Button Design
Icon Set
Image Gallery Frame
This functioning UI kit not only expedited my design process during this phase of building, but provided the company with a foundation to continue updating their pages -- with or without my assistance.
Image Shape Crops
Funky Shape Dividers
Submission Form
Text Styles
Testing
With the site built to a minimum viable capabilities, with high fidelity pages, it was time to test the designs.
The usability tests yeilded the following results:
Tester ratings indicate navigation was easy on both platforms
On a 1-5 scale, 5 being easy to navigate, the average of all users scores was 4.8 for desktop, and 4.9 for mobile. All users except for one gave a 5 score for both platforms. This indicates that the website is successfully easy to navigate.
Testers have clear comprehension of the sites information
Every tester remembered the name of the upcoming show, and they could each give mostly accurate summaries of the companies story and mission. When they couldn’t remember exact details, they could confidently navigate to where they might find that information. This shows an adequate comprehension of information.
Testers who do not have exclusionary factors (distance/financial instability) rate neutral to high interest in buying tickets and/or donating
Some testers were interested in the idea of becoming a donor. Almost every tester who stated they are unlikely to donate cited lacking the financial stability to do so. However, most testers, even those not wishing to donate, were interested in buying tickets.
Revisions
While the tests met the overall success metrics, there were still some pain points and feedback to take into account when iterating.
Wrapping Up
Checking back in on our established goals, the redesign is a resounding success. The new website provides information on upcoming shows in order to sell tickets, clearly communicates the company's mission and values to drive donations, and has a fresh, responsive design.
The site is currently still live, so feel free to visit it and explore my designs in action!
At present, I am working with the Theatre d'Art owners to make sure they have a clear understanding of how to use the UI kit I created to continue updating the site with current information. I know they also want to add more detail and information to their archive of past works, and someday possibly develop their own ticketing and donation portal.
This project was an interesting lesson in balancing the goals of the users and the business. For example, if I'd only had business goals in mind, there might be a CTA to donate right in the hero section of the front page. However, because users expressed that they needed to understand a company's mission and values before considering supporting them, I made sure to emphasize that information, smoothing the transition to donate. I hope to use these insights to design for all the needs of all parties on future projects.
Thank you for reading