Relaunching a Sports Website — Starting with the User

I want to share the research process I went through on my most recent project. I work within the in-house experience design department at Perform Group. I am the lead UX Designer on a team which is currently re-designing one of the companies news websites, which focuses on American sports. The project will see us re-invent the brand and launch a new responsive site. We’ve recently completed the first key milestone for the project which set the fundamental research for the project. I wanted to share my journey so far.

Phase 1- Kick Off the Project

We began the project with a thorough research phase to gain a complete understanding of not only the current website but also the team culture and the existing brand. The findings gave us a 360 view of the current situation and together with the team we used this to help us define a project goal.

1.1 Learn EVERYTHING About the Website

a) Stakeholder Interviews

This was the first point of call, It was important to include stakeholder input at the very beginning, so we knew where to focus our efforts and discussions when we talked to users. It helped us to gain a complete understanding of the current website, the team culture and the existing brand. (View Interview Stakeholder Questions)

We spoke to the key stakeholders in the business such as department managers etc. Anyone who wasn’t able to speak with us, completed a survey instead. We felt it was important to give everyone in the team a voice and make sure everyone’s opinion was heard.

We spoke to the key stakeholders in the business such as department managers etc

b) SWOT Analysis

When talking to the stakeholders, there were definitely some common themes emerging about how they viewed the current situation. This was exactly what we were after — We condensed the feedback into a SWOT analysis which gave us a picture of the current state of play of the website/brand/team culture/business model.

SWOT analysis based on stakeholder interviews

c) Competitor Analysis (with Stakeholder)

Stakeholders were very vocal about existing competitors. This was very valuable as it contextualised their opinions and gave us an idea where they would like to position the new brand and website. Comments were captured for direct competitors and websites they were inspired by.

Competitor analysis was completed for competitors and aspirational competitors

d) Users Research

Once we had spoken to the stakeholders and we had a base understanding of the current website it was time to speak to users. We needed to first carefully plan exactly what we hoped to get out of user research. We knew we wanted to get opinions and feedback about the product and compare this to stakeholders opinions, we also knew we wanted to get to know the users in person and how they use sports products in general.

We decided we need to do user survey, user interviews and gather analytics from the existing site to validate our user findings. We needed to set very specific goals and purposes for the three different kinds of research, so it was clear what were aiming to achieve with each.

e) User vs Team Survey

A survey was sent out in the weekly newsletter to all subscribers, this ensured current users were approached. Users were offered the chance to fill out a survey which asked them how they use sports apps and websites. A matching survey was sent out to the stakeholders which questioned them on user behaviours, to see how well they knew the user base.

Users were asked questions about their browsing behaviour and stakeholders filled out a reverse survey

f) User vs Team Survey — Findings

The results from the two survey were put side by side. A really interesting task which allowed us to see how well the stakeholders actually understood the existing user base — a great way to tell the business “you think users want *this* but they actually want *that*”

Answers from the user survey were compared with those from the stakeholder survey

g) User Interviews

We wanted to further understand our users so we scheduled a follow up interviews with those who filled out the survey. The interviews were short (up to 20mins) to ensure we didn’t take up too much of their time.

We recruited a wide range of users for interviews

We got to know the users by talking about them first and then we also got know how they engage with sports by asking more sports related questions. We finished by gathering their opinions on the site we were redesigning. The interviews were kept as casual as possible to keep users at ease (view User Interview Questions).

h) Checking Analytics

Analytics were checked out very much to validate our user research. Do users actually behave as they say they do. We then compared the qualitative research that we’d gathered from user interviews with quantitive research. Using tools like Google Analytics and hotjar, which confirmed whether users actually behave as they say they do.

Software such as Google Analytics and hotjar used to collect quantitive research

i) Creating Personas

All of our user research was condensed into user personas. Through the research their were two very distinctive user groups shining through. The personas were a great way to communicate to the business who the current users are and how they use the website.

All of our user research was condensed into user personas

1.2 How Do We Aim to Take it Forward?

The time had come to feedback all our findings to the team. The purpose of the workshop was to present back the research and then define a project goal.

To recap, here is what we had collected so far:

  1. SWOT Analysis
  2. Competitor Analysis
  3. User Vs Stakeholders
  4. User Personas

a) The Workshop

The feedback session was an open workshop and everyone was welcome to come along. We wanted to keep everything transparent and ensure no one felt left out. We considered opinions from every department in a diplomatic way — for now, everyone’s opinion was treated equally important.

b) Workshop Outcomes

Identify Project Goal
The SWOT analysis was put forward to the team as — “This is how you view the current website/brand/team culture/business model. By knowing this what do you want to achieve from this project?”

Each member was allowed to place their opinions forward then collaboratively we came to the decision what the project goal should be. This could of course be changed or adapted as the project evolved but it was put in place so everyone knew what we were working towards.

SWOT analysis used to define a project goal

Identify Aspirational Target Audience
The personas were presented back to team as the current users. This was an opportunity for them to voice their opinions on the current users and who they would like to target in the future. Together we had a brainstorming session to define the aspirational target audience. The new target audience was based on the team’s assumptions which meant we would have to validate it to see if it actually existed (This is Phase 2).

Key Competitors Identified
All the competitors comments were fed back to the team. They were allowed to vote on the competitors were the most relevant and together the list was refined to just 3 competitors. This gave everyone an idea of where the new product should position itself.

Key competitors defined ideal market position

Phase 1 Summary

At the end of this phase we had successfully analysed the existing website/brand/team culture/business model. We presented this back to the team and together we defined what we aim to achieve with the project, define our market position by identifying our key competitors, identifying who we would like to target with the new website and brand.


Phase 2: Validate Target Audience

This phase of the project was all about validating the aspirational target audience identified by the team, we wanted to find out if they existed and if so what they would require from a sports website.

2.1 Validate the ‘Aspirational’ Target Audience

a) Recruit People

It was important to recruit people which fit the profile of the target audience. We recruited people based on the age/location/passion for sports. Our incentive was to give users the chance to to view the new website as it developed.

Recruit people who fit the demographics

b) Interview People

We managed to speak to 18 people. The interviews followed the same format as the initial user interviews by getting to know them and learn how they engage with sports (view User Interview Questions). The main difference was the website we are redesigning wasn’t mentioned this time, these interviews were more about understanding what people want from a sports website as oppose to critiquing the existing website.

c) Analyse Interviews

Transcribe Interviews
Once all the interviews were complete they were each transcribed and printed out, this was to ensure no details were lost when we came to analysing them.

Identify Patterns
Each user interview was individually analysed highlighting goals/needs, key 
attitudes, key behaviours and pain points for each user. These were differentiated with a different coloured sticker which highlighted each of the categories. This is how we defined each of the categories:
 
 Goals/Needs — What the user aims to achieve.
 
 Attitudes — The users view or opinion on a subject.
 
 Behaviours — How the user achieves their goal/need.
 
 Pain Points — Things that annoy the user.

highlight goals/needs, key attitudes, key behaviours and pain points for each interview

Summarise
After highlighting each category the user interviews were re-analysed to look for common patterns across the interviews within each category (a common pattern was identified when 3 users make the same point). This exercise resulted in a summarised bullet pointed list for each of the 4 categories — goals/needs, key attitudes, key behaviours and pain points.

Key patterns summary

d) Summarise Patterns into Problems

Regroup Patterns
To refine the list further we mixed up the points from each of the 4 category together. This allowed us to see the key problem areas.
 
An example of how a potential problem area:
 
Attitude — Users like clear path to content
 
Pain Point — Hidden content annoys users
 
Behaviour — Users search for content on desktop

^all 3 of the above could be summarised into one problem

e) Define Problem Statements

Each one of the problems identified were turned into problem statements. A Problem statement attaches a problem to a measurable success metric. These then act as key project goals. An example of how they could be formated:

We have observed that (Insert problem) which is causing (this adverse effect). How might we improve this so that our website is more successful based on (the measurable criteria)
 
A Problem Statement e.g
We have observed that (unclear signposts to content) causes (users to become frustrated and leave prematurely). How might we improve this so that our website is more successful based on (clear signposts on each page and increase website engagement).

Identify Problem Statements

2.2 What Does the Audience Want?

a) Identify Aspirational Personas

Highlight Quotes — Who said what
Each interview was individually analysed again, but this time by grouping quotes from each which together could fit a certain persona type. This was done by going through each interview by asking “what would each persona do?” this resulted in 4 persona types being identified which ensured all angles were covered.

Create Persona Profiles
To conclude we created a summary sheets for all 4 personas which gave us an overview of our aspirational users. For each we listed out the 4 categories — goals/needs, key attitudes, key behaviours and pain points.

We created a summary sheets for all 4 personas

Presentable Format
we then of course made them look presentable…

Finalised aspirational persona profiles

5. Priortise Personas

The personas were ranked into primary, secondary, tertiary and an edge case. This gave the project a focus user group. Each persona was given a suitable scenario to put into context how they would potentially engage with the site.

6. Attach Problem Statements to Personas

The problem statements identified earlier were attached to the most suitable persona. This allowed us to see which problem applied to which persona and based on the persona ranking allowed us to see which problem statements were the highest in priority.

Every problem was is an opportunity for design. As explained earlier each of the problem statements included a how might we question. By framing our problems as a how might we questions, we set ourselves up for innovative solutions.

Suitable scenario and problem statements attached to each persona

Phase 2 Summary

We had successfully recruited and interviewed people who fit the aspirational target audience’s age/location/passion for sport. This allowed us to create personas and identify problems statements which they may face, which prompted innovative solutions by them as “how might we?” questions.

The findings from the user research was summarised into 2 sheets. One which gave key facts about the users and the other which highlighted the most important problem statements.


Phase 3: Analyse Competitors

This part of the project was all about analysing the competitors and seeing what they are doing well and not so well. The key competitors highlighted in Phase 1 were given extra focus.

3.1 What Are the Competitors Doing?

a) Key Competitor Analysis

We went to the extra effort to test the 3 key competitors with users. For this we used Userbrain — a great piece of usability software which allows us to observe volunteers using each website as they think out loud. We ran the same test on each of the sites to keep the test fair. We were looking for things people liked and disliked on each of the sites.

b) 360 Competitor Analysis

Now that we had gathered comments from users and the stakeholders we created visual moodboards using InVision Boards. This was really valuable it visualised the comments and set us on exploring competitors, allowing us to pick out patterns that worked well and not so well across the different website and apps.

3.2 What Lessons Can We Learn?

Phase 3 Summary

We had so much competitor analysis we wanted to turn this into a highly visual, easily digestible one page document. Based on the full competitor analysis we highlighted what the new website must do and must not do. This allowed us to easily communicate our findings with the team.


Phase 4: Kick Off Designs

This part of the project was all about dissecting the current website’s functionality and see where it can be improved. It was important to do this after the research had been gathered so it could be analysed with the project goal/users/market position in mind.

4.1 Existing Website Issues?

We started by analysing what exists on the existing website by taking a thorough look at components on each page. We took note of where the inconsistencies were and how it could potentially be improved.

Analysing the current website

a) Competitor Site Maps

As we were creating a sports new website which incorporated multiple sports we looked at the site map for the major sports networks websites for each of the individual sports i.e for Baseball we looked at MLB.com.

This was a good way to analyse what the official networks were providing on their site and what the common patterns were across different sports.

Site maps of popular sports network websites

b) Most Popular Sections = Basic Site Map

We took note of what was in the website navigation on all the major sport network website. We then sorted these sections into the order of most popular sections to the least popular across the different websites. This exercise allowed us to see which sections were the most popular across other sports network websites.

This ranking exercise gave us a basic sitemap and which website sections were the most important, i.e “ There is a scores section on each of the sports websites”. Of course this was based on other sites so this site map needed to be validated but gave us a good base to start off.

What are the most popular sections on sports websites?

4.2 Kick Off Design Sprints

a) Introduce Business to ‘Atomic Design’

We decided to adopt the Atomic Design methodology the famous web design framework, which breaks complex pages down into smaller components. so that they can be reused throughout the site. The reason we wanted to use this system was so we could release our phase our designs and work in tandem with the development team — It was important to make sure the team bought into the idea so they were happy to adopt the new way of working. (Learn more about Atomic Design here)

We decided to adopt the Atomic Design

b) Plan First Design Sprints

We knew the key user journeys through the website based on our user research and analytics. We focused in on our sitemap and we did a session where we identified what needed to be done on these parts of the website. 
 
With this being a complex website to rebuild, this task gave us a starting point to begin the designing from. Once we had made a start we could begin to grow the website as we designed in tandem with the development team using the atomic model.

Phase 4 Summary

We successfully dissected the existing product and highlighted the key issues. An initial sitemap was created and then we focused in on a small part based on key user journeys in order to help us begin the website design.


Research Summary

We know everyone’s time is precious, so we abbreviated the 5 months worth of research into 5 sheets which was shared with the whole team. The doc introduced the viewer to the key findings from the 4 phases of research which included the project goal, what the target audience is and what the new website must do to fulfil both the target audience’s needs and the business goals.

Research Summary Document

Phase 5: The Solution

We have now moved onto the next phase which is the practical work. This next phase will see us launch the new website and brand! This is where we are using all the insights from the research in order to craft the solution.


Conclusion

I wanted to end by revealing the 3 key things I have learnt from this research process:

1. When beginning to research a product it isn’t just about getting to know the product it’s much more about the bigger picture, such as getting to know the people who built it, how the business operates, understanding the user, their situation, their constraints (I could go on forever).

2. When presenting insights back to the team keep it short, snappy and to the point — We had LOADS of insights but it wasn’t feasible to share everything so we had to share the key nuggets to get our message across. Presenting it in a visual way also increases the engagement.

3. Make sure the team know’s WHY you are doing the research. Unlike a design, research is not something that people see. Preach the importance and explain how it fits into the design process so it doesn’t get brushed off. As designers, we know investing in user research makes sure what we are designing is current, improves customer loyalty and ultimately saves/makes the business money. Make sure the business knows this!


If you have got all the way to the bottom I really do appreciate it, I hope you enjoyed it! Please do let me know your thoughts and if you have any questions please do ask.

Follow me @Asis_Patel

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.