Zumba Fitness Picante

Website Redesign

Research Analysis Design
zumba fitness picante screen shot

The Project

The client was not happy with their existing website because it did not reflect the look and feel of the company and was not generating new business. On top of that, their customers told them that the website was confusing and appeared to be missing vital information. My challenge was to create a new website that would be intuitive, fresh and fun. Just like the fitness classes they offered!


Why was the old website underperforming?

original Zumba Picante site

Web Analytics Data

web analytics data

To answer this question I started by analyzing the web analytics data. My analysis revealed that new visitors were able to find the website but they were not staying long. The website had a high bounce rate and low engagement metrics.

Traffic sources, search keywords, and landing page reports provided insight into the kind of information visitors were looking for and helped to identify the website's content gaps.

Mobile reports showed that almost half of users were viewing the site using a mobile device. Being that the site was not responsive and did not render correctly on small screens, this was a significant usability problem.


Unmoderated Usability Test

user testing screenshot

I recruited users who met the website’s target demographic to test the existing website using UserTesting.com. Users were given specific tasks and questions and all sessions were recorded.

Top insights:

  • The site contained too much text and was overwhelming to look at
  • No fitness class descriptions were provided
  • It was not clear how to register for fitness classes
  • The company's contact information was missing from the home page

Low-Fidelity Wireframes

I created low-fidelity wireframes using Balsamiq. This was a quick and effective way of mapping out the new website's structure and page layout.

wireframes

Moodboard and Personas

It was very important for the new website to communicate the right atmosphere. My clients know that when it comes to fitness, motivation and a positive attitude are essential. I created a moodboard and personas to represent these values before continuing with the site design. These deliverables help to keep the end user in the forefront of the design process.

moodboard

My goal for the moodboard was to stay true to the Zumba brand while capturing the company motto:
It's not a dance class, it's not just fitness, it's a party!

persona

My goal for each persona was to combine the qualitative and quantitative data from the web analytics reports and user testing sessions into a representative ‘typical’ user.


Style Guide

style guide

I created a website style guide to help ensure brand identity, professionalism and consistency across the new website.

The colour scheme chosen was fresh, energetic and fun. The typography was clean, cheerful and approachable.


Initial Mockup and Mood Test

I believe it is important to continually test your design throughout the creation process. In this case I wanted to make sure I was on the right track before completing my high-fidelity mockups. My approach was to create a mock-up of the homepage first and then test it with recruited users. Using usabilityhub.com I created a mood test that showed participants my design and asked them:
“How does this page make you feel? Please list your top three emotions."

zumba picante homepage

Test Results Word Cloud:

word cloud

The majority of responses was positive and captured the desired mood perfectly. However, there were some negative responses such as “overwhelmed” and “busy”.

Based on these results, I modified the design by reducing the amount of colour, increasing whitespace and improving the text readability.


Click Test

click test results

Another challenge I was faced with was to figure out the best placement for content regarding special events and private parties. The client did not want to dedicate an entire page to this information but we weren’t sure where users would expect to find this content.

To help with this, I set up a click test. Recruited users were presented with the homepage and were asked to click where they would expect to find information about hosting a private Zumba party.

The test results showed that users would look for this information on both the classes and contact page. I modified my design accordingly.


High-Fidelity Mockups

I created high-fidelity mockups using Sketch.

mockups

Front-End Development

I coded the site using HTML5 and CSS3. The site is fully responsive and uses a 12-column CSS grid.

Please feel free to visit the site yourself: www.zumbapicante.com


The Results

Decreased bounce rate and improved site engagement:

web analytics data

The unmoderated usability tests I initially conducted were run again with the new website. Feedback this time was much more positive!

AverageRating: 8.5/10
Kind words from the client
"Christina was extremely creative and intuitive when suggesting attributes that would engage our target market. She managed to structure our website so that it easily delivers all the information we need to give our customers without overwhelming them or bogging down the site with information overload. The redesigned website attracts a high volume of traffic which has resulted in a continuous stream of new business for us."
Marcela Diaz-Granados, co-founder of Zumba Fitness Picante

I'm currently seeking a full-time position in UX design.
If you like what you see and you want to learn more please contact me!


uxcrich@gmail.com

613.408.6778

Based in Ottawa, Canada

Download Resume


View Recommendations


Back To Top