Project Description

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. Our challenge was to create a new website that would be intuitive, fresh and fun. Just like the fitness classes they offered!

Web Analytics Data

 To answer this question we started by analyzing the web analytics data. Our 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

We recruited users who met the website’s target demographic to test the existing website. 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
Mood Board and Personas

It was very important for the new website to communicate the right atmosphere. Our clients know that when it comes to fitness, motivation and a positive attitude are essential. We created a mood board 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.

Low-Fidelity Wireframe

We created low-fidelity wireframes to map out the new website’s structure and page layouts. These were great for communicating the design vision and getting early feedback. The wireframes went through a couple rounds of iteration as final content was developed.

Initial Mockup and Mood Test

We believe it is important to continually test your design throughout the creation process. In this case we wanted to make sure that we were on the right track before completing our high-fidelity mockups. Our approach was to create a mock-up of the homepage first and then test it with recruited users. We 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 were positive and captured the desired mood perfectly. However, there were some negative responses such as “overwhelmed” and “busy”. Based on these results, we modified the design by reducing the amount of colour, increasing whitespace and improving the text readability.

Click Test

 Another challenge we 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, we 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. We modified our design accordingly.