Improving UX for T2 Dance Company’s Website
The T2 Dance Company is a professional contemporary dance company based in Boulder, Colorado that aims to promote its performances and programs through its website.
When I first met with the Artistic Director, Erin, the website, built on WordPress, lacked visual appeal and overall user experience. It presented an unprofessional company image and made it hard for potential audience members and collaborators to find information about upcoming performances and company details.
To address these issues, we focused on establishing a strong brand identity and providing easy access to event information. The redesign needed to be implemented using WordPress to ensure easy future maintainability for Erin.
Highlights (TLDR)
Problems
T2 Dance Company's website lacked visual design, professional image, and sufficient event information, leading to confusion and disinterest among potential audience members and artistic collaborators.
Goals
Improve user experience by establishing consistent content structure and brand identity to drive ticket sales while ensuring easy future site maintainability for stakeholder.
Actions
- Remapped information architecture, user flows and content layout throughout site
- Introduced performance cards and heros to clearly summarize event details
- Strengthened brand identity through UI style guide, content writing and asset images
- Rebuilt website in WordPress using custom templates and patterns
Outcomes
23% increase in event click-through rate
Users are able to locate event information quickly, intuitively, and with less effort
Positive feedback from client and users
Empathize
Looking at the existing website
While conducting a website audit, I found a lot of areas for improvement. Much of the difficulty users found in finding information was due to inconsistent layouts and text-heavy pages. There weren’t clear explanations of what audience members should expect from events, which contributed to their confusion and deterred their interest in going to shows.
Previous Website
Talking to Users
I conducted a few user interviews with potential audience members. Most everyone was confused on where to purchase tickets. They also struggled to find event details like date, time and location.
A few people vocalized their disinterest in attending a performances because of the “confusing” photographs. Everyone identified the company as related to dance, though some though it was a non-professional studio for kids.
Summarizing User Pain Points
The biggest takeaways were the need to improve information delivery and user flows through the website as well as revamp the visual design of the interface.
- Ambiguous Company Identity
Users couldn’t determine whether T2 Dance was an adult dance studio or professional company; its age and history; and organizational structure (e.g., for-profit, non-profit)
- Difficulty Finding Event Details
Users struggled to find essential event details
- Uncertain Audience Expectations
Users were unsure about what to expect from events. They mentioned looking for images on event pages to give context for the kind of performance - i.e. stage, studio, street, etc.
Define
Problems and Solutions
Insights from user research identified overarching problems that users faced.
- Poor visual design from lack of consistent visual hierarchy on website contributed towards a disjointed and unprofessional reflection on the company
- Insufficient event information caused users struggled to find essential details about events, such as date and time, ticket purchasing, and venue format
Solutions to address these issues:
- Create a style guide to ensure consistent visual hierarchy and promote professional image
- Prominently display event details, including date, time, and location, on all event pages
- Help establish performance expectations using professionally-shot images of dancers on stage and clear language to differentiate between audience and collaborators
Design Principles
Clarity
Presenting information in a straightforward, easily scannable way so users can quickly find event details and purchase tickets without confusion.
Consistency
Maintaining uniform layouts, typography, and visual elements across all pages to establish professionalism and build trust in T2 Dance Company's brand.
Context
Providing visual and textual cues that help users understand the nature of the dance company and what to expect from performances.
User Segmentation
Research identified two main users groups for the T2 Dance Company website.
👥
Audience Members
Want to quickly find event information & purchase tickets
🤝
Artistic Collaborators
Want to easily find information about collaborative projects
Organizing Information
Because users struggled with finding and comprehending information on the website, the existing information architecture was mapped out to identify areas for improvement.
- Improving the simplicity and consistency of the user journey, the number of external links was reduced, and all forms were made using a single platform (JotForm)
- Simplify navigation, the nested menu items were reduced and labels were renamed for better user understanding
- Avoiding user drop-off and dead-ends in the user flow, navigation was added to the page footer
Mapping User Flows
Combining insights from user research and the simplified information architecture, the order in which content, decisions and CTAs should arise was mapped out to promote interest in attending an event.
User flow for purchasing an event ticket from the landing page.
Exploration
Looking for Inspiration
To inform content strategy, the structure, user flows and visual design of other professional dance companies were analyzed. Despite varying offerings and levels of detail, each company provided valuable insights into how the T2 could effectively deliver information.
Boulder Ballet
- Visual Inspiration: Light, clean aesthetic with varied major content sections
- Content Strategy: Informative content and visual distinction between classes and performances
Colorado Ballet
- Structural Inspiration: Distinctive sections and incorporation of artistic backgrounds
- Content Strategy: Visual distinction between classes and performances
Alvin Alley School
- Interaction Design: Engaging user micro-interactions & videos
- Content Structure: Effective information layout options
Ideating Content Layout
A quick summary of event information
I explored different ways to display event information, try different layout variations, including vertical and horizontal cards. We decided on horizontal cards, as they would be easy for users to scan without being visually overwhelmed and easier to develop, modify, and maintain in Wordpress.
Class distinction
It was a priority to make clear distinction between different classes and programs offered by the company. I tried a few variations in layout, including lists, columns and card layouts. We decided card layouts were best because they included pictures to give context to classes.
Event page heroes
To ensure event details were easily findable and consistently placed for each event, we decided to display key information in the hero of each event page.
High-fidelity Mockups
High-fidelity mockups and a basic prototype were created to showcase the final design to Erin, the key stakeholder, and completed user testing.
Home page breakdown
The home page is designed to capture the user's attention with the hero image and promote interest in attending shows with the upcoming performances showcased as cards with clear call-to-actions to buy tickets. Further down the page is more information about the company and the classes offered.
Event page breakdown
The event page is designed to provide all necessary information in a concise and visually appealing manner. A prominent hero image, combined with overlay text, sets the stage for each event, providing immediate context and key details. Descriptive headers further clarify the nature of each performance, while additional information is presented below to ensure a comprehensive overview.
Classes page breakdown
The classes page is organized to facilitate easy browsing and clear distinction between classes. Each class is presented with an image to give context, curriculum description, and a clear call-to-action. To differentiate between classes held at the dance studio and those brought to schools, we've included a "Brought to Your School" label and CTA, ensuring user understand class location.
Style Guide
To ensure T2 Dance Company's visual identity remained strong and recognizable across the site, a comprehensive style guide was created. This guide outlines the brand color palette and typography, as well as guidelines for imagery and layout.
Developing in WordPress
Page templates and block patterns (pre-designed layouts) were created in WordPress to facilitate Erin's ongoing website maintenance. Clear instructions were provided to guide her in using these templates, modifying information, and adjusting content as needed. While most visual goals were met, certain animations and user interactions were limited by the platform's constraints.
WordPress Page Templates
To streamline the development process, custom WordPress Page Templates were created for each primary page type (Home, Individual Event, and Page with Title). This approach ensured consistency across the site and simplified the process of building pages for Erin.
WordPress Patterns
To further enhance efficiency and maintainability, WordPress Patterns were developed for recurring design elements like hero sections, performance cards, and various other content layouts. These patterns allowed for quicker page building and ensured consistency throughout the site.
Customizable pattern in WordPress Editor
Final design with custom CSS styling applied
Final Design
Using WordPress patterns, templates, and custom CSS styling, we successfully implemented the core visual elements of the design. While platform limitations prevented certain advanced animations and interactions, the overall aesthetic and user experience align with the project's goal of creating consistent content layouts and brand identity to drive ticket sales while ensuring easy future site maintainability
Results
23% Increase in Click-through Rate
User testing demonstrated a significant improvement in user experience. Participants located event information faster, more intuitively, and with less effort. This increased users inclination to take action, with WordPress analytics showing a 23% increase in click-through rate on events CTAs.
Positive User & Client Feedback
Users responded enthusiastically to the professional aesthetics and improved clarity of the website, while the Artistic Director confirmed the intuitive WordPress templates made content management accessible - fulfilling the key project requirement of sustainable site maintenance.
Reflection
By listening to users and making changes that provided real value to them, we redesigned the website with significantly improved user experience and impressions. I grew as a designer and walked away with a few key takeaways:
The voice of the user is the ultimate guide to UX improvement. Even if you already know a problem exists, user feedback can help you narrow in on the nuances and advocate for changes to improve UX.
Technical constraints associated with different development platforms can limit design possibilities. It’s important to work with stakeholders to discuss design tradeoffs between development platforms to find the best option suited for design and business goals.
Strong stakeholder support is crucial for driving positive change. By leveraging user research and data-driven insights, designers can effectively advocate for improvements, even when it involves expanding project scope.
