🎠Trouble Puppet Theater Website Redesign
Role: UX Designer & UX Writer
Team Project | UX/UI Bootcamp – Austin, TX
Overview
For this project, my team and I were tasked with redesigning the website for Trouble Puppet Theater, a local Austin-based nonprofit. The original site was visually dated and difficult to navigate, which made it hard for users to understand the company’s mission and buy tickets.
Our goal was to create a more accessible, intuitive, and story-driven digital experience that reflected the theater’s creative energy while improving usability for both desktop and mobile users.
​
My Role & Responsibilities
I collaborated with three UX designers and the organization’s stakeholder to guide:
​
-
UX writing & content strategy to improve clarity and storytelling flow
-
Accessibility improvements for contrast, typography, and readability
-
User research, wireframing, and usability testing to validate design decisions
-
Stakeholder collaboration to align business goals with user needs
The Challenge
Trouble Puppet Theater’s site didn’t clearly communicate who they were or how users could engage. Text was difficult to read, navigation was confusing, and CTAs were buried.
​
The stakeholder’s main request:
“I want visitors to instantly know what Trouble Puppet is and where to buy tickets.”
The UX Process
1. Research & Discovery
We conducted stakeholder interviews, heuristic evaluations, and user testing on the existing site to identify friction points.
Key insight: Users couldn’t find key information like show dates or ticket options quickly.
2. Defining the User
We developed personas based on real user interviews and mapped out their journeys to highlight where the site failed to guide them.
3. Ideation
As a team, we brainstormed improvements that balanced the theater’s quirky, handmade brand identity with a cleaner, more accessible design system. Because our user persona is typically a teacher or activist—not a traditional “theater person”—we focused on microcopy that was more welcoming, more explanatory, and easier to understand for users who might be unfamiliar with theater terminology and Trouble Puppet.
4. Prototyping & Testing
We designed low- and high-fidelity prototypes in Figma and tested them with users. Iteration revealed several opportunities to simplify navigation and strengthen calls to action.
UX Writing & Accessibility Focus
I focused on creating clear, action-oriented copy that helped users move through the site with ease.
Examples of microcopy improvements:
​
-
“Buy Tickets” instead of “Ticket Information”
-
“About Us” instead of “Company History”
To improve accessibility, I adjusted:
​
-
Color contrast ratios to meet WCAG AA standards
-
Font weights and spacing for better readability
-
Hierarchical headings for screen reader compatibility
Original Global Navigation
Low-fidelity Global Navigation
Usability Testing: Findings & Iterations
After usability testing with real users, we identified two key microcopy and intent issues that were affecting task completion and engagement:
​
1. Hero Banner CTA lacked clear action.
A/B testing showed that users were unsure how to proceed from the hero section. Adding a direct, action-oriented CTA (“Buy Tickets”) increased clarity and aligned the banner with the primary user task. This change improved both discoverability and ticket-purchase intent.
​
2. “Donate” CTA created premature commitment friction.
Testing revealed that the “Donate” button signaled too much commitment too early, causing users to avoid that section entirely. Reframing the CTA to “Learn More” shifted the interaction from a high-commitment action to a low-pressure exploration state. This improved user engagement and increased discovery of the donation program.
Before Testing
After Testing
Key Solutions
​
-
Simplified site navigation and restructured content for clarity
-
Introduced a hero banner with a clear CTA to “Buy Tickets”
-
Refined tone of voice to better express the brand’s personality
-
Designed an accessible color palette and typography system
Outcome & Impact
The stakeholder was “thrilled and impressed” with the redesign, noting that the new site finally captured the essence of Trouble Puppet Theater.
​
The project deepened my appreciation for iteration, testing, and accessibility in UX design, and solidified my belief that great digital experiences come from collaboration between writers, designers, and stakeholders.
Key Takeaways
-
Accessibility isn’t optional—it’s integral to good design.
-
UX writing can guide and empower users as much as visuals.
-
Collaboration and iteration drive meaningful user experiences.