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!
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.
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.
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.
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.
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!
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.
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.
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."
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.
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.
I created high-fidelity mockups using Sketch.
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
Decreased bounce rate and improved site engagement:
The unmoderated usability tests I initially conducted were run again with the new website. Feedback this time was much more positive!
"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."