Responsive redesign for an Austin jazz staple.

Responsive redesign for an Austin jazz staple.

improving the aesthetics and accessibility of the website for the Elephant Room jazz club located in Austin, TX

improving the aesthetics and accessibility of the website for the Elephant Room jazz club located in Austin, TX

improving the aesthetics and accessibility of the website for the Elephant Room jazz club located in Austin, TX

Timeline:

2.5 Weeks

Role:

Designer

Team:

5 Designers , 1 PM

Timeline:

2.5 Weeks

Role:

Designer

Team:

5 Designers , 1 PM

Project Overview

Project Overview

The Elephant Room, an iconic jazz club in downtown Austin, was struggling with an outdated and difficult-to-navigate website that failed to attract and retain new customers, especially those unfamiliar with the local scene. Our team decided to create a redesign of the Elephant Room’s website focusing on creating a modern, user-friendly, and mobile-responsive interface that effectively showcases the club's rich history, upcoming events, and featured artists.
The Elephant Room, an iconic jazz club in downtown Austin, was struggling with an outdated and difficult-to-navigate website that failed to attract and retain new customers, especially those unfamiliar with the local scene. Our team decided to create a redesign of the Elephant Room’s website focusing on creating a modern, user-friendly, and mobile-responsive interface that effectively showcases the club's rich history, upcoming events, and featured artists.

Why a redesign?

Why a redesign?

Many Austin staples have shut their doors in the past few years, due to Covid, financial burdens, and the growing landscape of the city.

Some of these closed venues pulled large crowds equal to the Elephant Room and still could not stay open.

Over-development forces businesses like the Elephant Room to adapt to changing circumstances in order to stay open and relevant.

The current website’s design was sorely lacking in accessibility and aesthetics.

Before Redesign

After Redesign

Many Austin staples have shut their doors in the past few years, due to Covid, financial burdens, and the growing landscape of the city.

Some of these closed venues pulled large crowds equal to the Elephant Room and still could not stay open.

Over-development forces businesses like the Elephant Room to adapt to changing circumstances in order to stay open and relevant.

The current website’s design was sorely lacking in accessibility and aesthetics.

Before Redesign

After Redesign

User Research

User Research

Our team began by writing out a hypothesis and conducting a survey, competitive analysis, and heuristic evaluation to gauge user feelings regarding the venue's online presence. We then created an affinity diagram to narrow down priority features and conducted user interviews to see what other users thought of the website.

User test feedback:

“You can’t tell what the Elephant Room is by looking at the website.”

“The navigation is not intuitive.”

“Every image is pixelated or blurry.”

“Three calendars is visually confusing.”

Key findings- what the current design lacked

Accessibility

The team analyzed the current website’s colors, contrast, and formatting to determine if the website was universally user friendly. We concluded that the original design was inaccessible and difficult to read.

Findability

Important information was hidden or difficult for users to find. Users may not be able to locate necessary details.

Credibility

Users may suspect the website is a scam due to the structure of the site, failure to identify purpose, and pixelated images.

Lack of Delight

Users find the design visually unpleasant and may exit the site prematurely.

Who is the target user?

To empathize with the common user’s experience, we created a user persona as well as a customer journey map with the current website design.

We initially assumed that most users would be born-and-raised Austinites, which limited our design perspective.

This realization underscored the importance of revising our customer journey map and user persona to target newcomers, a missed revenue source for the bar.

1 out of 3 Austin area residents are transplants

91 people move to Austin everyday.

50% of migrants are originally from Texas.

Our team began by writing out a hypothesis and conducting a survey, competitive analysis, and heuristic evaluation to gauge user feelings regarding the venue's online presence. We then created an affinity diagram to narrow down priority features and conducted user interviews to see what other users thought of the website.

User test feedback:

“You can’t tell what the Elephant Room is by looking at the website.”

“The navigation is not intuitive.”

“Every image is pixelated or blurry.”

“Three calendars is visually confusing.”

Key findings- what the current design lacked

Accessibility

The team analyzed the current website’s colors, contrast, and formatting to determine if the website was universally user friendly. We concluded that the original design was inaccessible and difficult to read.

Findability

Important information was hidden or difficult for users to find. Users may not be able to locate necessary details.

Credibility

Users may suspect the website is a scam due to the structure of the site, failure to identify purpose, and pixelated images.

Lack of Delight

Users find the design visually unpleasant and may exit the site prematurely.

Who is the target user?

To empathize with the common user’s experience, we created a user persona as well as a customer journey map with the current website design.

We initially assumed that most users would be born-and-raised Austinites, which limited our design perspective.

This realization underscored the importance of revising our customer journey map and user persona to target newcomers, a missed revenue source for the bar.

1 out of 3 Austin area residents are transplants

91 people move to Austin everyday.

50% of migrants are originally from Texas.

Prototype Groundwork

Prototype Groundwork

In order to find a better form of organization for the website, our team created cards representing the available pages of the website to be sorted out into a more cohesive structure. During our card sorting user tests, we faced the challenge of deciding on a definitive site map due to the different and compelling nature of each proposed structure.

As a team, we needed to compromise, blending various elements to create a site map that balances functionality and user expectations.

Prototyping

Prototyping

We began the prototyping process by using our research data and sketching out our own takes on the website’s layout, afterwards collaborating and turning our best ideas into a clickable prototype.

Our team then transformed our sketch prototype into lofi wireframes to better represent the future user interface and enhance our user testing with a form that was closer to our final product.

Lo-fi user testing and feedback

Lo-fi user testing and feedback

Our early iterations played with the concept of utility management, but we soon realized this idea lacked innovation and failed to solve the core problem. After further exploration, we arrived at our final solution: SafeTags. This IoT device was more aligned with the core user needs of quick, reliable communication and safety during emergencies.

Our Lo-Fi User Test Criteria:

Six users were tasked with testing a low-fidelity prototype. They were given three tasks to complete:

  1. Click on Upcoming Events and Past Performances

  2. Click on an artist name in the Event Calendar

  3. Use the Menu to navigate to other pages and explore

The Results:

  • Users had 100% success rate with all three tasks.

  • Users wanted the size of the text to be larger on mobile for easier reading.

  • Users believe the menu is very helpful, however they wanted a home button.

  • Users say that having footer contact information is important to them, but any extra information is unnecessary.

  • Users asked for the calendar to be scrollable and large.

  • Users would like to see more images on the About page.

Our team was excited with the positive outcome of our new user tests but noted that there were still many improvements that could be made. Following the feedback from user testing we redesigned the calendar with increased font size for better readability and improved the scrolling functionality. We also rearranged the footer design, categorizing links for easy navigation, such as contact details and social media links.

Iterating with a hi-fi prototype

Iterating with a hi-fi prototype

Our Hi-Fi User Test Criteria:

Five users were tasked with testing a high-fidelity prototype. They were given three tasks to complete:

  1. Click on Upcoming Events and Past Performances

  2. Click on an artist name in the Event Calendar

  3. Use the Menu to navigate to other pages and explore

The Results:

  • Users wanted to see more events on the calendar, however the past events made them feel sad about missing out. 

  • Users notes the homepage had a scroll reset issue that didn’t allow the user to scroll down without resetting the position at the top.

  • Users had varied comments about the images, font sizes, and layout.

  • Users wanted more control with the image carousel. They wanted to be able to click through the images themselves.

Reflection

Reflection

Designing for an established brand

  • Redesigning the Elephant Room’s online presence was a fairly straightforward process as most content that was necessary already existed.  What the website needed was reorganization, improved accessibility, and better aesthetics.

What Could've Been Done Better

  • Our team could have benefited from connecting with the stockholders for more in depth design direction.

  • Lack of time and time management became an issue, leaving some planned iterations on the drawing board.

New Discoveries

  • Over the course of the project our team gained valuable new insights both regarding our design work/workflow and our interpersonal communication skills.

  • Working on the redesign allowed us as team members to pinpoint our strengths as well as skills that we need to improve on moving forward.

Thanks for visiting!