The Center for the Arts opened its doors in October 1994. Situated between historic Downtown Escondido and scenic Grape Day Park, it was literally built in the heart of the community, functioning as both a source of civic pride and a redevelopment catalyst.
But in 2008, the Center was hit hard by the Great Recession. Programming and staffing levels were cut substantially.
Over the next few years as the economy improved, the Center needed to do two things to increase revenues and kickstart their recovery:
- Expand their schedule of ticketed performing arts events.
- Book more private and special events in their conference center, theaters, museum, and other venues.
However, the Center’s outdated website was stifling their efforts. It had no content management system, so it was hard to maintain. It also had no calendar system, no ticketing system, and no method of soliciting online quote requests from potential venue renters:
Worse, for smartphone users, the old home page was completely blank and inaccessible due to its use of Flash:
Thankfully, Center leadership discovered Think Grand: a web-centric, volunteer movement I founded as a way for Deedub Inc. to give back to the Escondido community through problem solving and big ideas. Impressed by my efforts, the Center chose Deedub to lead their digital transformation.
Quick Summary: Highlights and Impact
The new artcenter.org launched on time in mid-April 2014 after seven months of hard work and collaboration with Center staff:
The top navbar is black in color with white icons and text. It contains six elements from left to right: the Center’s logo, a “Contact” button, a “Visit” button, a “Give” button, a “Menu” button, and a magnifying glass icon that reveals an expandable search bar when clicked. Below the top navbar is a large, clickable, upcoming event banner that reads: “Fridays at 7 PM, Jazz Jam Sessions.” The background of the banner is a photo of a black male musician playing a saxophone while wearing a dress shirt with bow tie and suspenders in front of golden light. Below the banner, the menu of 8 buttons begins with a transition sentence that reads: “Just one of the many reasons why the Center is the art and soul of our Community. Find your Center.” The eight buttons are white in color with black icons and text. The buttons are labeled, in order: “Events Calendar and Tickets”; “Museum Exhibits”; “Education Programs”; “Rent Our Theaters”; “Weddings and Receptions”; “Event Planning and Venue Rentals”; “Support the Center”; and “About the Center”. End of detailed image description.
The site was designed and coded to be highly accessible under the Web Content Accessibility Guidelines (WCAG). It also featured a fully-responsive design for optimal functionality on any device, including smartphones:
But this was far more than a website redesign. I also provided significant research, strategic, and content creation services that boosted the Center’s marketing and customer experience at a critical moment in their comeback.
In addition, I delivered extensive in-person, written, and on-screen trainings that empowered Center staff to manage the website and keep the momentum going after my initial contract ended.
Because of this holistic, integrated approach, the project yielded tremendous results, including:
A robust-yet-intuitive calendar system that made it easier to discover events and buy tickets online, by phone, or in person. This, combined with an expanded lineup of events, led to an increase in ticket sales and revenues.
A successful move away from primitive PDF and paper forms to an email- and database-driven workflow, all thanks to a number of HTML forms placed strategically throughout the new website.
The Request a Quote form for prospective special event and venue rentals was particularly impactful. From the moment the site launched, it typically generated one new lead per day (and sometimes more) — all without a slowdown in telephone inquiries. As a result, there was an increase in rentals, and Center sales staff directly attributed the ROI to the new website.
An immediate increase in website traffic, largely made possible by the smartphone- and search engine-friendly nature of the new site.
For example, according to Google Analytics, when averaging the statistics from January – April 2014 and comparing them with the months of May – August 2014 immediately after launch, the new site generated a:
- 26% increase in users and sessions
- 68% increase in page views
And the growth continued over time. When comparing January – April 2014 to the post-launch, year-end months of September – December 2014, the new site generated a:
- 138% increase in users and sessions
- 200% increase in page views
Ultimately, the Center was so pleased with the results that they continued to call on me to assist them with matters of design, development, accessibility, and marketing from 2014 through mid-2020. In fact, I’m proud to say that the Center is still using a slightly modified version of the website today.
The impact of our partnership led to rave reviews from Center leadership:
Want to learn more? Read on for a deep dive into my methodical, collaborative process.
Or, if you’re short on time, select the section that interests you most:
- Phase 1: Research and Strategy
- Phase 2: Design, Development, and Content
- A Closer Look at the Finished Product
Phase 1: Research and Strategy
Because the Center has two theaters, a museum, education programs, and a conference center, it also has numerous audiences with vastly different needs. That’s why the first three months of the project were dedicated to customer-centric research and strategy, including:
A major community survey
Over 10,000 community members were invited to participate, and the response was incredible:
Over 600 people answered the survey in full or in part.
The survey was thorough, and it included a mix of qualitative and quantitative questions about the Center’s website, marketing, and programs. I analyzed the responses and compiled them into a report, which was instrumental to gaining buy-in from Center leadership. Here’s a sample page:
These survey answers were in response to the following question: Why do you, or would you, typically visit artcenter.org? The point values in the bar chart range from 0 points to 1600 points. The eight ranked responses depicted in the bar chart are: #1 with 1,568 points — learn about or get tickets to upcoming music or performing arts events. #2 with 1,287 points — learn about or get tickets to special community events or celebrations. #3 with 1,172 points — learn about the current exhibit in the Center’s museum. #4 with 951 points — learn about the Center’s education programs. #5 with 842 points — learn about upcoming conferences, trade shows, or networking events. #6 with 819 points — learn how I can support the Center via donation, sponsorship, or volunteerism. #7 with 681 points — learn more about renting one of the Center’s venues. #8 with 610 points — research and plan for a wedding. End of detailed image description.
Please note: I’m happy to share more details about the survey in a private interview, meeting, or Zoom.
Extensive interviews and meetings
I held numerous one-on-one and group meetings and interviews with Center leadership and staff. This was critical to learning more about their needs, goals, and struggles that had to be addressed in the new website.
Some of my most important discoveries involved venue rentals. Their sales team’s insights proved to be invaluable when developing the content strategy and user flows for the Event Planning and Venue Rentals section of the site.
A content audit of the old website
The audit was performed as a two-part, hands-on workshop with select Center staff. It helped us determine what should stay, what should go, and what needed to be created. The results of the audit were compiled into an Excel document for easy reference throughout the project:
The old Rent our Venues section had eight pages, which are represented by the eight rows in the spreadsheet. They intersect with six columns in the spreadsheet representing characteristics or quality measurements of those eight pages. The six column headers are labelled: “page ID number”; “page title”; “URL”; “keep in new site?”; “quality rating”; and “additional comments”. End of detailed image description.
Learning about third-party e-commerce and email marketing systems
Prior to the project, the Center’s previous executive director had licensed Tessitura: a SaaS CRM with integrated event ticketing and online donation capabilities designed specifically for arts organizations.
While Tessitura was powerful, it also needed to be properly configured, and it came with a steep learning curve. I learned right alongside Center staff, and my prior experience using SaaS products helped guide their decisions and made them feel less intimidated.
This process also helped me understand how the new site would connect to Tessitura and other systems, like the Center’s email marketing platform.
Developing a comprehensive content strategy
As a result of my thorough research process, the content strategy included recommendations for:
- Top-level navigation and website categorization
- The types of calendar formats and event categories that would be available within the new Events Calendar and Tickets section
- Specific user flows for critical areas of the site with revenue-generating calls to action (like the Event Planning and Venue Rentals section)
- Preferred keywords and microcopy for simultaneously achieving desired emotional appeal, ease of navigation, and search engine optimization
- Marketing slogans and taglines, including a proposed “one sentence” for the new home page that would serve as both a friendly introduction to the Center and a navigational aid
Once the content strategy was reviewed and refined, I developed a visual sitemap of the new website’s pages and user flows, which doubled as a content creation checklist:
At the top of the sitemap is a box for the main home page, and all subpage boxes flow down below it, connected by lines to show their relationship and user flows. The subpage boxes are organized into six branches representing the six main sections of the new website. Section 1 is Event Calendars and Tickets with 12 events and one subpage listed below it. Section 2 is Museum Exhibits with one subpage listed below it. Second 3 is Education Programs with 10 subpages listed below it. Section 4 is Event Planning and Venue Rentals with 10 subpages listed below it. Section 5 is Support the Center with 10 subpages listed below it. Finally, Section 6 is About the Center with 9 subpages listed below it. Seven boxes are shaded red with a legend indicating that those pages are automated with little or no content creation required. Eight boxes are shaded green indicating that content for those pages has already been created. Five boxes are shaded yellow indicating that additional subpages may need to be created there to form a new subsection below that subpage. The remaining majority of the boxes are shaded white indicating that content still needs to be created for these pages. End of detailed image description.
Phase 2: Design, Development, and Content
Over the next four months, I worked closely with Center staff to build and launch the new site. While they created most content, I served as designer, developer, and project manager.
Noteworthy design, development, and content milestones included:
Assisting Center staff with content creation
To keep the project on schedule, I developed a simple Microsoft Word template for subpage-level content creation. It simultaneously:
- Empowered Center staff to write website content before the design, code, and content management system (CMS) were finalized
- Educated them on unique elements of content creation (like search engine descriptions and alternative text for images)
I also wrote some website content myself, including the original version of the critical Event Planning and Venue Rentals section.
Kicking off the design process with a best practices workshop and vote
This workshop featured a mix of conceptual and real-world design samples — some good, some bad. The goal was to educate Center staff on user-friendly best practices related to navigation, responsive design, and page layout.
For example, to satisfy internal politics, organizations sometimes drift towards a “put everything on the home page” mindset. This responsive design demo helped the Center visualize the pitfalls of this approach by showing how design clutter and content overload translate poorly to a smartphone:
The desktop layout is at left with the eight regions shown as boxes interlocking in a three-column grid. The smartphone layout is at right, and it visualizes how the content regions would shapeshift into a single stacked column due to responsive design. A highlighted overlay box indicates that only the first two content regions would be visible on a smartphone screen, with the others appearing off screen requiring significant downward scrolling. End of detailed image description.
Examples like this persuaded Center staff to adopt a user-centered mindset for making good design choices throughout the project.
The workshop concluded with a vote between potential design characteristics and outcomes, which helped me develop design concepts in a more informed and efficient fashion that was in line with the Center’s expectations.
Developing design concepts and coding the approved design from scratch
Using Adobe Photoshop, I created static design concepts that blended the aesthetic qualities from the Center’s existing style guide with the functional needs dictated by both the content strategy and the design workshop.
After revisions and final approval, I used my years of experience coding HTML and CSS to convert the concepts into a fully-custom website theme that was also highly accessible for people with disabilities.
Choosing WordPress as CMS and customizing it for easier maintenance, including on-screen trainings
WordPress was chosen because of its flexibility and massive library of plugins that would allow the Center to incorporate advanced features on a budget. For example, we chose the powerful Events Calendar Pro plugin as the foundation for the Events Calendar and Tickets section of the new site.
However, the off-the-shelf implementation of Events Calendar Pro wasn’t enough because the Center hosts all kinds of events with wildly-different characteristics. Just a few examples:
- Some events are free, others are paid
- Some events are ticketed, others are “show up and enjoy”
- Some tickets are sold by the Center, others by providers like Ticketmaster
With so many permutations, we needed to make the event editing experience easier and more predictable for Center staff. Otherwise, they would need to manually rewrite important event details and microcopy again and again across different event pages.
That’s why, for the first time ever, I used a mix of plugins and custom PHP code to customize the WordPress editing interface and create on-screen training tips. Benefits included:
- A logical editing workflow, made possible by reorganizing content fields and training tips in a sequential fashion.
- Content automation, made possible by checkboxes and radio buttons. When selected, these options auto-populate specific regions of an event’s page with relevant, standardized microcopy:
The editor box is titled “Pricing and Availability.” The first editing option is labeled: “Please select the option that best describes the pricing and availability of this event.” It contains the four radio buttons. Button 1 is selected and labeled: “There is a cost to attend this event.” Button 2 is labeled: “This event is free to attend.” Button 3 is labeled: “This event is completely sold out (only select if absolutely all showtimes to this event are sold out).” Button 4 is labeled: “This event is invitation only (usually for donor and member special events).” Because radio button 1 was selected, the text field and two checkboxes were revealed below. The text field is labeled: “Required: Insert the price or price range for this event with dollar signs.” The first checkbox is labeled: “Check yes below if fees apply to phone and online orders.” The second checkbox is labeled: “Check yes below if discounts are available to members and/or other special types of attendees.” End of detailed image description.
This WordPress customization method was so helpful to the Center that I later used it with other clients, including the Escondido Union School District.
A Closer Look at the Finished Product
Because artcenter.org utilizes a significant amount of copyrighted art and photography, I can’t show extensive screenshots here. However, I’d be happy to share screenshots privately in an interview, meeting, or Zoom.
Otherwise, you’re welcome to experience the Center’s website for yourself by exploring the following links — but please note:
It’s been over seven years since the launch of the new artcenter.org. The Center owns the site, and they’ve made some changes to design and content that do not reflect my original work (for example, fixed-position donation and email subscription popups that I don‘t agree with from a UX perspective).
However, the broad vision and general architecture of my original design are still intact on the following pages:
- Main home page
- Event Planning and Venue Rentals main page
- Weddings and Receptions page
Notice the original user flow is still intact with end-of-page calls to action to take an online tour or submit a quote request.
- Tour Our Venues and Amenities page
In my research, Center sales staff shared that potential renters were much more likely to move forward after seeing the facility. That’s why I created this comprehensive online tour with a photo-rich format.
- Request a Quote for Your Event and Venue Rental page
This is the form mentioned in the intro that generated so many new quote requests and rentals.
While it was definitely a team effort, I’m incredibly proud of my role in reviving the Center, and I’m glad they continue to benefit from my work.