Performance Now Theater Company
Redesign of desktop and mobile for a Colorado theater company, improving ticket sales and donations.
Case Study:
ROLE: User Research, Competitor Analysis, Persona creation, Wireframes, UI Design, Prototyping, Usability Testing
TEAM: Brad Davis, Sydney Sullivan, Alesha Jones
​
TOOLS: Figma, Slack, Google Drive, Zoom, Pen & Paper
TIMELINE: March- April 2023
​
Overview:
PROBLEM STATEMENT:
The magic of community theater is its ability to bring people together through shared purpose and imagination. Unfortunately, many non-profit arts organizations have been hit hard by the pandemic and need to rethink the online donations and ticket purchasing process.
Performance Now Theater Company is a community theater based in Lakewood, Colorado specializing in musicals. The current website is difficult to navigate, lacks payment options, and is visually uninspired which negatively affects the donations and ticket sales that the theater receives.
​
How might we streamline these user flows to increase revenue while improving the visual design?
​
BUSINESS GOALS FOR THIS PROJECT:
1
Conversion rate for donations increased by 4.49% or higher.
2
Cart abandonment rate reduced to 57% or lower.
3
Average annual transactions rate raised to .15 or higher.
4
Add to cart rate raised to 8.54% or higher.
5
Task completion rate lowered to 1 minute or less.
Timeline of Design Process:
User Research
Definition & Synthesis
Prototyping
Final Iteration
Affinity Diagram
Heuristic Evaluation
User Testing
Competitor Analysis
Wire-frames
Lo-Fi mock up testing
Hi-Fi Prototype testing
User Persona
Journey Map
I like/I wish/what if?
Card sorts
User Flow
Mood Board
Style Guide
Ideation
Visual Design
User Research
Understanding Our Users:
TESTING & EVALUATING:
As empathy driven designers, we wanted to understand our users' experience of the current site. We kicked off our exploration of with a HEURISTIC EVALUATION and 5 remote USABILITY TESTS on Zoom with a focus on lovers of community theater. Additionally, we conducted a SURVEY using Google Forms to gain insight on the pain points and incentives for people who donate.
"Another page? Why is it taking so long to get to donations?"
​
Erin Kachline
(theater lover
and test user)
PRIORITIZING:
Sorting our feedback into a PRIORITY MATRIX helped us hone in on the features we would tackle in this redesign.
FOCUS AREAS FOR THIS PROJECT:
1
The donation page was difficult to find and gave the impression that it was intended for large scale donations only.​
2
The purchasing process redirects to a third party site, which leads users through too many steps to completion.
3
Users like to donate in small amounts. Rounding up is preferred.
4
The absence of Venmo and PayPal was frustrating.
5
The overall look of the site didn’t really express the elegance and creativity for which the company is known.
USER PERSONA & JOURNEY MAPPING:
We synthesized our findings into a USER PERSONA and JOURNEY MAP that helped us empathize with shoppers' needs and pain points.
​
We noted that supporters of local theater are frequently theater makers themselves. The site could include more resources to get involved. Greater storytelling about the company's needs, goals, and struggles could improve donations as well.
Meet Tony Smith...
Tony is an elementary school teacher who wants wants to spark a love of theater in his students...and to inspire the same sense of community and creativity he first discovered when helping his grandmother make costumes when he was a kid.
"Community theater has always given me a sense of belonging and now I want to give back in my own small way."
​
Tony Smith
(User Persona)
Research:
We conducted a competitor analysis including Aurora Fox Theater, Littleton Town Hall Arts Center, Curious Theater, Arvada Center, Vintage Theater, and Colorado Ballet.
​
The sleekness of their information architecture provided inspiration.
​
We especially loved how some of the sites used their hero image, color palette, and typography to express the dynamism of their brand.
Ideation:
To improve information architecture, we conducted a “I LIKE/I WISH/WHAT IF?” brainstorming session. This yielded the concept of a communication portal for actors and technicians, providing audition and rehearsal information. We loved the idea, but had to place it on hold for further development.
​
We condensed multiple pages of the navigation into pop ups. Combining the selection of “show date,” the number of seats, and their location reduced the steps in the user flow from 4 pages into 2. The inclusion of a donation “round-up” with ticket purchase (payment options now including Venmo and PayPal) and a message about what money would be used for not only increased the likelihood of a donation, but also tells a story, giving a human element to a process that can feel cold and impersonal.
​
We incorporated this into multiple CARD SORTS, resulting in an improved user flow that allows the user to complete purchases in fewer steps and locate the donations page.
​
Prototyping:
WIREFRAMES:
With our new user flow as a guide, we built WIREFRAMES using pen and paper, and then converted them to low fidelity digital mock ups on Figma. This was done with the goal of understanding whether our choices were intuitive to the user.
​
We tested our low fidelity digital mock ups and iterated accordingly based on feedback.
​
​
DESKTOP:
MOBILE:
Visual Design:
STYLE GUIDE:
Our STYLE GUIDE focused on creating moments of delight: Upon arrival at the site, an art deco proscenium and an emerald green curtain greets the user before rising to reveal the homepage. Gold buttons shimmer in their hover state and an animation congratulates you upon your ticket purchase…promising a night at the theater, full of excitement and elegance. With permission from our stakeholder, we designed a logo and devised a brand color palette that evoked sophistication with its teals, lavenders, and gold.
​
​
Iteration:
We applied our style guide to our HIGH FIDELITY PROTYPE, which again was tested and ITERATED accordingly. Accessibility proved to be an issue with certain bits of microcopy not reading well in the font sizes, weights, and colors we had chosen. Icons would also need to be swapped to provide greater clarity and help the eye scan the page for information. Here is a sample of what didn't work and why...
ITERATION ONE:
ITERATION TWO:
"Pretty! But the background is too busy. Why not leave it as white space?"
Alissa Long
(Test User)
"Looks great, but maybe a 'click and magnify' feature would be a better way to select seats on mobile?"
Judy Miller
(Test User)
"The gold header is a little hard on my eyes...I don't like how the pop up looks."
James Gibbons
(Test User)
Results:
​At the conclusion of this project, our team delivered a style guide and two high fidelity Figma prototypes consisting of 7 screens for desktop and 4 for mobile that we believe better reflected brand values and greatly simplified the purchasing process while providing moments of delight.
As this was a UX/UI bootcamp project, we were unable to gauge the efficacy of our design on our KPIs. In practice, we would recommend using Google Analytics to track visits to site, bounce rate, time spent on page, and cart abandonment. Heat mapping through Crazy Egg to monitor user activity is also advisable.​​
​
This project taught us the importance of empathy in the design process: the act of navigating the site should be simple, intuitive, and pleasurable.
​
There are no future plans for the project at this time, but if the design were adopted by the company, further development could include a communication portal for actors, directors, and technicians. We noted that an audition notices page would also be a welcome addition.
Project Image Gallery:
