Redesigning Canada’s Largest Masters Track Website — UX Case Study

The Greyhounds Track and Field Club, began in Vancouver, BC in 1999 with 15 members. Now in 2017 they are nearing 90 members. With 320 Provincial records and 118 World & National records, currently. What makes this track and field club different is that they are a masters (35+)/seniors (55+) only team.

The Opportunity

The reason why the Greyhounds came to us, is for a website redesign because their website was from the early 2000… and needed a facelift but also to help them accomplish these goals.

Old Website for The Greyhounds

Goals for the new site

  • Attract new members
  • Inform current members about updates of the club
  • Make it easier to get funding from donors and sponsors

My Role

Hi I am Jogpaul Johal, 1 of 3 User Experience designers for this redesign project, along with 1 user interface designer.

Research

Our client provided us with their google analytics for the current site. To our surprise the site got 55 000 unique views per year. Using the analytics we found that most people come to the site to check on the results of the latest track meets.

Our team had a good start on the project thanks to the data. But we needed more information so a few tools we used are: Interviewing Users, Competitive and Comparative Analysis (comparing similar sites), User Centered Design Canvas (validates our research).

A few tools our team used

Interviews

We interviewed current club members and coaches of the greyhounds. Why?

  • We wanted to know what they use the current website for
  • Any feelings or keywords about the club they have
  • Also if they have any frustrations with technology, since we are working with a older user group

We asked these types of questions in 10 of our interviews and the data we got from them was put onto an affinity diagram.

The Affinity Diagram and how we organized the information from the interviews.

The key takeaways from the interviews were :

  • Learning what other websites our users went on, and how they feel about them
  • How they joined the Greyhounds Club
  • Understanding what values the club was built on. Which are Competition, and Community

Competitive Comparative Analysis

C.C. analysis lets our team compare and learn from other similar sites that accomplish a similar goal. From the interviews we learned our current users most visited websites:

  • canadianmasters.ca
  • usmasters.com
  • ontariomasters.ca
  • masterstrack.com

Masterstrack.com was the most popular website that all 10 of interviewees have visited. When I saw the site for myself, I was thinking I had the wrong url. A website that looked like this and had thousands of visitors a week, shocked me. But I had to put my thoughts aside and ask what is this site doing right?

The Home Page for masterstrack.com

I asked the users why they visit this site and the reason was the latest news in the track community is a scroll away. They didn’t have to click anywhere. The website, not looking great did accomplish the users goal, which is to deliver the news.

What our team learned from this is don’t create something that would be a brand new layout to user. Keep it simple, our users don’t enjoy using technology, and see it as challenge.

User Centered Design Canvas

The design canvas validated our teams research, understand the mindset of our users, and where they are coming from.

User Centered Design Canvas
  • A motivation people had for joining the Greyhounds, was getting rewards or achieving personal goals
  • The unique value proposition is whether you are a world record holder or new to the club the coaches treat you equally

After doing the design canvas and understanding what problems, fears our users would have. My team decided it was time start planning on how to help our users.

Planning

In the planning stage our team would create a fictional users that would be using the Greyhounds website. This would allow us to empathize with them to see how they would want to use the website.

The first fictional user we created was Harry Hurdle, who was interested in joining the club. This also aligns with the business goal of the project, “attracting new members”.

The Storyboard of Harry Hurdle

The storyboard represents the thought process and path that Harry would take into joining the Greyhounds club.

Design & Testing

Before we started putting pencil to paper we defined our user.

  • We know our users are older and are not very comfortable with technology.
  • The new users are people who come to the site have goals either to meet like minded people or rekindle their competitive spirit.
  • The current users come to check on the most recent updates for the club.

Also with the design we wanted to communicate that the Greyhounds are a competitive but are a community driven team, which was the insight we got from the interviews.

The thinking behind the layout of the home page

An issue that came up was the copy we used for the nav bar. 7/10 people had trouble finding a meet to sign up for, and also how they could sponsor/donate to the club.

Left :The old nav | Right: the new nav after testing

Testing Changes

  • “Schedule” changed to “Events” : Users were unable not able to find out where the upcoming meets would be.
  • Added “Sponsor” to the nav: As a business goal for the client this needed to be easier to access.
  • Moved “Training Tips” and “Contact Us” : Looking at the google analytics these pages were not often visited, and they were moved to the footer.

Learnings

After this project was done and delivered there are a few takeaways for myself

  • Copy(text content) is just as if not more important for design
  • How to design for seniors, who see technology as a challenge more than a benefit

It was a honour and pleasure working with the Greyhound track & field club, who are a competitive team but enjoys the journey along the way with friends, while also a promoting the health and well being of masters and seniors.

Here is the hi-fi prototype that our team completed.

http://jogpauljohal.com/

https://www.linkedin.com/in/jogpauljohal/