Pop Culture Website Concept

The Challenge

Ectetero was a concept for a news website which offered the latest pop culture news. The website would become part of the Perform's Media family. The family is a collection of global sports websites. The purpose was to give the editorial team a platform write about non-sport related news. The target audience was users of one of Perform's existing American sports website. Our task to define a direction for the website.

The Approach

We critiqued the initial concept, analysing good and bad points. We also gathered external opinions. We explored the current market and created a few initial concepts. We validated our initial ideas. We did this by speaking to potential users gathering their thoughts on this genre of website.

The Outcome

We created personas and identified problem statements. This was the foundation for the website's direction. It also gave us material for an idea generation session with the rest of the team. However the plug was pulled on the project at this point, due to other business priorities. But we had still achieved our mission which was to define a direction on the website based on real users.

Client: Perform Sports Media
My Role: Lead UX Designer

Analysing the Existing Concept

Upon beginning the project we were supplied with a initial concepts which were put forward by the business. We critiqued these by identifying what was done well and what was done badly. We also highlighted opportunities which we felt were missed from initial glance.

As well as critiquing the designs ourselves, we also used tools such as Hunie and Usability Hub to gather outsider opinions on the designs. One key finding was the website was intended for a young male audience however we found people felt it was a more gender neutral brand leaning towards feminine.

Creating a Proto Persona

We developed a Proto-Persona (a persona based on assumptions) to help us visualise who our intended user may be. The proto-persona was based on who the business created was a young male, who is passionate about the main American sports as well paying attention to  the latest pop culture which surrounds sports.

We used the proto-persona to help us define how they may use the site, these were defined as key user journeys. This lead onto creating an initial site map where the key user journeys were highlighted. This gave us a focus as we began to experiment with ideas and put initial wireframes together.

 

Competitor Analysis

We looked at competitor websites and apps, focusing on mobile experiences. We focused on these elements: header at article level, share comments, archives/other articles, plus some any other interesting features we found. We identified these were the main elements connected to a news article page which would be a core feature of the Etcetero website.

Wireframes based on Initial Exploration

We wireframed ideas for both mobile article and mobile archive. This was inspired by the competitor analysis and influenced by the key user journey identified.

Exploring Page Transitions

We explored desktop interactions, which looked at ways to navigate the site based on the key user journey. These ideas were very initial but gave the business ideas of how we could push the boundaries.

Refining the Brand

We took the initial brand visual language and looked at how we could enhance it. 

Analyse Existing Style Guide

We looked at the existing brand kit provided. We found this was rather limiting especially as there were only 3 colours currently defined.

Enhance Style Guide

We added a few colour shades to brand guidelines to make them more flexible. We still needed to define suitable secondary colour palette however we wanted to wait till later down the line when the site design was more defined.

Explore Type Styles

We developed typography for a more masculine feel to match the intended audience.

Design Components

We took the enhanced visual language and started to explore by designing components, to give the stakeholders a feel for how the site could start to look.

User Research Process

After the initial exploration we came to the agreement we needed to gather research and define user personas, before progressing. As we were just going off our assumptions we wanted to use real research findings to validate our initial decisions.

User Interviews

We spoke to 4 potential users which we recruited from our survey. We recorded and documented interviews with notes. This helped us confirm our survey findings.

Identify Categories

We chose to categorise each of our interview notes into the 5 persona categories - Goals/needs, motivation, behaviours, pain points & demographics.

Identify Categories

We chose to categorise each of our interview notes into the 5 persona categories - Goals/needs, motivation, behaviours, pain points & demographics.

Group Common Patterns

We grouped common user patterns within each category. This helped us see the most common and uncommon user patterns.

Identify Problem Statements

After grouping each of the common patterns together,  we labelled each with a ‘problem statement’. This provided us with a list of problems that we must design for. 

Problem Statements

The problems were fleshed out into problem statements which in turns acted as requirements for the new website. The problems statements were divided into these 4 catergories

  1. What needs do users want to fulfil by visiting the site?
  2. What motivates users to come to the website?
  3. What are the user's behaviours whilst fulfiling their needs?
  4. What are the main pain points when users visit these type of sites?

Primary Persona

We used the problem statements as a base to create our personas. The primary persona gave us a key focus when designing the product. There were 3 personas defined, for each profile we identified a typical user journey. The primary persona was a teenager who casually comes across news on their social media feed.

Seconday Personas

There were three personas altogether. This gave us a wider idea of who else may use the product. One of which is someone who knows the news they want and will go to specific part of the site. The other was a workaholic and will check the news quickly as they commute to and from work.

THE END! Plug Pulled on the Project 

The project was sadly ended at this point due to other priorities across the business and not enough budget left to take the project forward. It was sad after putting so much work into the initial stages but it was still fun exploring a new media terrority and starting a project from scratch.

The Next Steps (in hindsight)

The next step was to host a idea generation workshop with the key stakeholders across the business. The agenda was to generate ideas for each of the problem statement we derived from the user research, asking “How might we…” solve this. As a group we would then discuss and take the best ideas forward into prototyping. Sadly with the project coming to a halt this never happened, but the positive part was we had concluded the project at a point where it could be picked back up again in the future. Personally it was great to work on a project which gave me the freedom to explore ideas and get great input from users.