Team
Bushfire Theatre Founder, Al Simpkins, Dr. Susan Browne (Educational Consultant), Jera Winters (Content Consultant)
Timeframe
60 hours
Role
Lead (Solo) Designer (Including Content Design Where Needed)
Tools
Figma, Wix, Wix Analytics, Google Analytics, Photoshop
This project was a collaboration with the Bushfire Theatre of Performing Arts whose website I redesigned. Located in West Philadelphia, Bushfire Theatre of Performing Arts (BTPA) has been dedicated to showcasing African-American theatre since 1977. The theatre has also enjoyed a fruitful partnership with the HBCU Lincoln University, a relationship that has enriched the theatre's programming and expanded its educational outreach. The theatre is also the site of a culturally significant building with a rich history dating back to the early 1900s. The building has transitioned through various incarnations—from a vaudeville and silent film house, to a traditional cinema, and now to its current role as a vibrant performing arts venue.
Building on these successes and rich history, BTPA recognized the need to further grow its membership and revenue, attract new talent, and expand its reach within the community. To achieve this, a comprehensive redesign of their website became essential. The goal was to enhance their overall digital presence in order to better serve their community.
Project Goals
-
Revitalize the Online Presence: Redesign the BTPA website to enhance its usability and aesthetic appeal, aimed at significantly increasing site traffic and improving user engagement, thereby boosting overall visibility online.
-
Drive Membership and Revenue Growth: Utilize the redesigned website to promote and simplify the processes for membership registration and ticket purchases, with the goal of increasing both membership sign-ups and ticket sales for upcoming shows and events.
-
Expand Community and Artist Engagement: Create a more inviting and informative online platform that encourages more individuals from the community and arts sector to participate in auditions, workshops, and other theatre-related activities, fostering a larger and more active theatre ensemble.
Timeline & Schedule
01_Planning
-
Conduct a high level of existing site.
-
Define the site’s structure and what pages are needed.
-
Receive feedback from program participants.
-
Gather all necessary content like text, photos, and logos.
02_Design
-
Review precedent websites.
-
Propose brand values, color scheme, fonts, and branding.
03_Content Integration
-
Add and format the text for all pages.
-
Upload and arrange photos and other media.
04_User Testing
-
User test site on 5 participants, summarize, and synthesize key findings
05_Feedback Coordination and Updates
-
Share the site with stakeholders for feedback.
-
Make necessary revisions based on the feedback.
Project Kick-Off
This project started with an initial 30 minute phone meeting with BTPA founder Al Simpkins and educational consultant Susan Browne. During the meeting, I learned about the rich history of the theatre company, the organization’s mission, and future objectives. We also discussed my background, qualifications, the project goals and timeframe as well as the prior content design work that had been conducted by a former volunteer in preparation for the website revamp. After this meeting we communicated via email to confirm our decision to move forward and our alignment on the project plan. The following outlines the issues we identified with their website.
Problems with the Prior Site
The previous version of the BTPA website suffered from a cluttered navigation system and poor mobile responsiveness, all of which likely hindered user engagement and accessibility. The website lacked effective calls to action (CTAs), and its content layout did not align with the site’s target users, which included prospective members, donors, program participants, and those wanting to attend the theatre productions. The site also needed SEO optimization and an associated Google business profile to maximize visibility.
Overview of Prior Site
Visual Appeal: haphazard layout with a poorly organized hierarchy that impedes usability and the visibility of key calls to action (CTAs).
User Interface and Navigation: navigation was cluttered and did not provide a clear path for users to find important information such as upcoming shows, ticket purchases, or workshop details; overall lack of alignment to target users' needs.
Mobile Responsiveness: site had large amounts of cut off text and image when viewed on mobile.
SEO: incomplete SEO with no presence on Google Maps or link to the website from the Google business profile.
Branding: very inconsistent use of text styles, and no clear design patterns or color schemes.
Core Updates with Revamped Site
The revamped BTPA website features a coherently branded landing page that enhances usability and directs visitors smoothly to key actions like ticket purchases and program registrations. Navigation is intuitive, ensuring that information critical to members, donors, and theatre-goers is easily accessible.
Overview of Revamped Site
Visual Appeal: a structured and aesthetically pleasing layout that enhances the overall user experience, and includes a welldefined hierarchy that improves the visibility and effectiveness of calls to action (CTAs) in order to easily guide users.
User Interface and Navigation: a streamlined and intuitive navigation system, providing clear and direct pathways to essential information such as ticket purchasing, membership benefits and sign up, and details about workshops. We also sought better alignment with specific needs and the expectations of prospective members, donors, and theatre-goers.
Mobile Responsiveness: improvements in mobile responsiveness to ensure that all text and images are fully visible and appropriately scaled on devices of varying sizes.
SEO: optimized website metadata and linked the site to the Google Business Profile, which significantly improved BTPA site’s visibility in search results and increased organic traffic.
Branding: consistent use of text styles and a cohesive color scheme that aligns with Bushfire Theatre’s branding.
Process Work
My design process typically follows the design thinking phases and includes an in-depth “discovery” period where I empathize with user needs and contexts through researching a particular problem space. Given this project was with a client who had a pre-existing brand and organizational structure, this research period centered on learning more about the organization and coordinating with the client to ensure brand alignment.
We met several times to discuss the history of the theatre company, precedent theatre company websites, the organizational brand values, and style guidelines. We decided upon the following brand values: transformative, inspiring, and sleek.
The clients Al and Susan both gravitated toward a dark color scheme, highlighting Steppenwolf's (a theatre company based in Chicago) and State Theatre’s (based in Austria) sites as particularly strong references. I also found this dark color scheme helped with BTPA’s production images as they ranged greatly in quality, but looked visually stronger against a dark background.
The color palette consists of a vibrant pink as the primary color, complemented by black and white tones, and various shades of gray serving as neutrals. This palette is consistently applied throughout the site’s interface elements, including buttons and text fields, to maintain aesthetic coherence and enhance usability.
Iterations
Given the tight timeline, design iterations were relatively concentrated. I conducted user testing with 5 participants on task flows for membership, ticket purchasing, and donation. This helped refine the latest version of the landing page, focusing on enhancing visual appeal, improving readability, and organizing content more effectively.
While I tested the site both on desktop and mobile with my interview participants, I focused on the desktop version as my client preferred to closely review website progress on their desktop during our coordination meetings.
Header
-
Shifted from a "Mission" section to an overview of the "Bushfire Theatre of Performing Arts" to orient users to the theater and its programs more effectively, particularly as 4/5 users tested found the phrasing and placement of the mission text at top to be confusing. Nonetheless, 4/5 users also felt it still made sense to have some explanatory text and orientation before diving straight into shows and tickets given the theatre's broad programs and mission. This explanatory text also offers an opportunity to showcase donate and membership CTAs at the top of the fold, something the client strongly requested.
Main Section - Shows and Tickets
-
transitioned from listing shows with bright pink boxes and detailed descriptions to a more streamlined “Come See Our Upcoming Shows” section. This new design features images, show titles, dates, and short descriptions, making information more visually appealing and easier to navigate.
Visual Elements and Content Layout
-
Improved visual presentation by enhancing contrast of CTAs and readability in response to 3/5 users finding the color scheme to impede usability of core tasks.
-
Organized text more logically, using consistent font sizes and styles to create a cleaner and more professional look.
-
Avoided use of pure black colors to increase accesibility.
Landing Page Membership Section
-
enhanced the membership section by adding detailed benefits such as free tickets, backstage access, and exclusive events, after 2/5 users found the membership benefits to be too wordy and dense.
-
Shifted to a more persuasive tone, providing clear and compelling reasons to join.
01_
02_
03_Refined
Second Half of Landing Page
-
Created a more visually pleasing and user friendly 'z' pattern by swapping the cells/content for the podcast section.
-
Provided more context for the "Walk of Fame" text and redesigned the gallery to function as a slideshow as 5/5 users experienced friction and lack of clarity in this section.
-
Updated footer with secondary CTA for "Join Us Today" to create a stronger hierarchy for ease of use.
01_
02_
03_Refined
Membership Page
The design changes made in mobile were largely very similar to those in desktop. Many of the changes unique to mobile had to do with resizing elements to make them more accessible and optimized for an efficient scrolling experience where core elements are easily locatable. While the mobile version did not fit the membership and audition CTAs “above the fold” (the line at which content on a webpage is initially cut off by the bottom edge of a screen or browser window), they are still relatively easy to access. Subsequent content was arranged neatly across different fold points.
-
Shifted to a more persuasive tone, providing clear and compelling reasons to join.
-
Changed "Submit Payment" text to "Go to Payment" as the payment isn't actually submitted until subsequent screens, something 1/5 users correctly noted is confusing.
Before
After
Mobile Landing Page
-
Reduced the height of the navigation bar to better utilize screen real estate and added a menu label for increased accessibility.
-
Added a secondary CTA to increase ease of use.
-
adjusted color scheme to make the design more user friendly in response to 3/5 users reporting issues with the color scheme.
Before
After
Results
525%
Increase in average monthly organic traffic
30%
Reduction in bounce rate from 85% to 60%
30%
Estimated increase in average play attendance
Next Steps
To build on the current successes of the Bushfire Theatre of Performing Arts website while addressing the less successful aspects of ticket purchasing, I plan to focus on enhancing the ticketing interface to improve usability and conversion rates.
I've also learned the value of documenting both analytics and the previous site design, which I initially struggled with. This documentation has been crucial for understanding changes in user behavior over time and assessing the impact of new design elements. By continuing to collect and analyze this data, I can make informed decisions that further refine the user experience.
Additionally, I will continue employing ongoing analytics to track user behavior and identify any pain points or bottlenecks in the ticket purchasing journey.
Explore More
Testimonials
Scott consistently demonstrated diligence and a proactive approach to his work, consistently exceeding expectations. His innate curiosity drove him to consistently over-deliver on projects. A self-starter who actively sought and welcomed feedback, Scott maximised every mentoring session to its fullest potential. It's clear to see the significant growth he has achieved throughout our sessions together. Any company would be fortunate to have such a dedicated and continuously improving team member like Scott.
Filipe Fernandes, Design Engineer/Mentor for Designers
Scott was amazing to work with. He was incredibly helpful and made himself available for our many questions. I hope we have the opportunity to work together again.
Al & Susan, Bushfire Theatre of Performing Arts
Scott gracefully jumped in to our whirlwind project and built us a UX demo on a startlingly fast timeline. His process forced us to answer questions we hadn't yet considered, and got us thinking about the user experience of our product in a way we just hadn't before. I would strongly recommend bringing Scott in if you've got a project that could benefit from a fresh set of eyes.
Peter Kunhardt, CEO