Support us on Behance by clicking “Appreciate” button 👍
Web & App

Transcendence Theatre Company

Transcendence Theatre Company produces award-winning concerts in the majestic ruins of Jack London State Historic Park as well as in transcendent locations throughout Wine Country’s Sonoma Valley and throughout the San Francisco Bay Area. For this project, I collaborated on a team of four to increase user engagement and retention for Transcendence's Online Show & Learning Center.

August 2020
Transcendence Theatre Company


Information Architecture,
UX Design, Prototype


PM, Engineers, Marketers
& Myself


Jira, Sketch, InVision


2 Month design sprint


Due to Pandemic, Transcendence Theatre Company is not able to provide outdoor boardway performance like usual, thus they are looking to engage their audience by offering a complete virtual season in 2020. In order to prepare for their online audience the TTC website's user experience, code and server will need an audit to address anything that could be an issue as we scale up the online traffic.


1. Leading users more smoothing to get tickets, give donations and access educational content (Youth & Kids)

2. Make sure the website can handle video content and growing amount of traffic

3. Work on an overall improved user experience ( Content hierarchy & Check flow & Review show information)

Design Process

At a higher level through contextual research, user interviews and user testing with the existing platform, I intended to:

  • Document the offline and online purchase processes;
  • Understand the usage context and user’s needs;
  • Discover what worked well and bad with the current website.
Detailed Process & Deliverable ( Parital View)

UX Deliverables

1. A comprehensive report with key conclusions regarding the user’s context, intention, and interaction patterns, drawn from 6 interviews with both clients and non-clients.

Link to the report : Here

2. An interactive wireframe prototype which included dozens of fixes to problems found during research and solutions to speed up and improve the interaction.

Link to the prototype: Here

2 versions of wireframes

3. Condutct beta test & demo with approved design, participate in quality assurance with engineers before & after website Launch.


Even with all the challenges, analytics are showing an increase in traffic from last year (see screenshot below).

  • New visitors increased from 4,000 to 7,000
  • Average session duration increased by 1 minute
  • Audience sessions (different times a user comes to your site) increased from 6,000 to 12,000
  • Bounce rate decreased by 16%
  • Since website launch, close to 200 people have visited the donation page.
Results from TTC internal analytics ( Partial view)


Solution Alignment

Using the insights from the audit I create and test Wireframes to improve usability and to better achieve the top 3 goals


▪ Home page with improved call-to-actions and hierarchy

▪ Navigation for better grouping of information

▪ Footer for better ADA compliance and readability

▪ Donate page for improved call-to-actions and hierarchy

▪ Learn@home page for improved call-to-actions and hierarchy

Information Architecture MVP after Audit

Persona with Hubspot (1/3)

UX & Marketing Audit
User Journey map in InVision
Hi-Fidelity Wireframe (Home)


The communication between TTC and our teams was great. Everyone was extremely responsive and on top of tasks. We created extra documents to help us stay organized as the project progressed. The QA process between us and TTC worked well. It was organized, responsive and efficient. Our next steps will be modifying our code to work with the new child theme update after the server is stable. and as soon as the server and theme updates are stable, complete the last QA tasks and make sure all ACF fields are editable. Lastly, share the Knowledge Transfer Document that describes the technology used to complete the development work on the TTC website.

Another Works

More Case Studies

View All Works