Ectetero
-
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
- What needs do users want to fulfil by visiting the site?
- What motivates users to come to the website?
- What are the user's behaviours whilst fulfiling their needs?
- 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.