Community has always been at the heart of an enjoyable and memorable gaming experience.
Role: Product Designer, UX/UI
Team: Product Manager and myself
Moving to the Community team in February 2022, I was tasked with changing how players experienced community on FACEIT.
Targets were created for us to 4X the number of matches played within communities. This meant taking the current 100k MAP (Monthly active players) to 400k MAP – split 300k Counter Strike and 100k non-Counter Strike games. The split was done this way due to the fact that CS is FACEIT’s main game (close to 800k MAP across the whole platform).
At present, communities are split into Hubs and Clans, two separate entities on the platform, operating just differently enough to make it confusing for new players.
Over the course of four months, we researched, story-mapped, wireframed, interviewed, tested, tweaked, optimised and reimagined what communities could be as part of this effort.
Midway through this project I was asked to move teams in order to take over from a senior designer that had left our Play XP team – a core team at FACEIT. Below is a record of around four months of work on this project.
“What the f€k is a hub?”
As I’ve said, hubs and clans were quite a confusing offering before we starting looking into this effort. I created a quick illustrated guide for our other designers and PMs to look at in order to understand the current state of community.
Starting a project of this scale, it was super important to have a solid foundation to start with. Along with the PM, I started researching.
This took the form of user interviews, story mapping our current product, user tests both internally and externally, requirement gathering from senior management, speaking to stakeholders that had been a part of the first revision of hubs and clans, and much more.
Community touches almost every aspect of FACEIT – we couldn’t wade into this without thinking about UX implications on a much larger scale than just changing a few bits on one section of our site.
Along with my PM, we interviewed six different organisers of varying scale and differing use-cases
We started out by interviewing organisers of various different sizes in order to answer a set of questions we’d set ourselves.
This was a great way to learn about the day-to-day runnings of these communities as well as their pain points. We sorted the raw feedback into these questions and this helped give us a good foundation for the project.
Out of these user interviews, and the analysis of the responses, my PM and I created our North Star for this project;
✨ Centralisation ✨
So what did we need?
-
Discovery and joining
Players needed to be able to find relevant communities quickly and easily. Current hubs and clans suffered from low discoverability so we needed to massively improve this factor. Once found, communities needed to be easily joinable. Current hubs and clans suffered from a staggering 85% bounce rate (!!)
This was down to a multitude of factors including skill level gating as well as region locked or paid-for hubs and clans.
-
Communicate
How are you meant to make friends without being able to communicate with people?
We needed to be able to support multiple different communication methods including; feed-style posts, live chat and asynchronous forums.
-
Play
The obvious one – we needed to include the ability for players to join lobbies, queue up for games remotely, and get all set up ready for a gaming session, whether that be a PC-based game of Counter Strike or mobile-based Clash Royale.
-
Monetise
Abba said it best – money is obviously a very important aspect of running a community on FACEIT. Prize pools, ladders and admins all cost money to run and previously it was quite tricky to monetise these. We wanted to change this (for the better).
-
Leagues and Leaderboards
What’s the point in playing if you’re not the best? Given that FACEIT is a very competitive platform, we absolutely needed to include leaderboards in this new effort. During interviews, organisers impressed upon us the importance of leaderboards in motivating a playerbase – something we didn’t want to disadvantage in our new effort.
-
Stats
Another super important element to FACEIT. Players of online games are statistic fiends, demonstrated through ELO-obsession, and third party sites like tracker.gg, csgostats.gg and other game versions like rocketleague.tracker.network.
Stats had to be engaging, exciting and go into as much detail as the user wanted to go.
Getting buy-in
Speaking with our stakeholders we had to make sure we got buy-in for centralisation from organisers. We put together a super high-level concept deck explaining our ideas and pitched it to organisers in our network.
Organisers were very positive to the ideas presented and keen to opt in as soon as the MVP has been released.
Story mapping
Story mapping helped us create our super early wireframes by understanding the different user stories that might take place within a community. Basing this on the interviews we ran with organizers and players, as well as strong knowledge of the area, we created themes, activities and then individual stories.
Information hierarchy
I put together this structure for our initial community MVP. Breaking them down into these sections allows for clear deliniation between different areas of the community experience.
Process
After creating the various user stories and researching both direct and indirect competitors, I then started about creating a set of wireframe designs for a proof of concept.
For this effort, we wanted our community effort to be entirely mobile-first — the first of its kind outside of the FACEIT native app. Community is an always-on style of engagement, where a friend might shoot you a DM to play some Counter Strike whilst you’re sat on the sofa so it was key that we had a solid mobile start as that was where we anticipated our highest traction for this area of our site.
Settling on a rough three panel layout meant that we could easily adapt designs between different screen sizes as well as creating space for a main and secondary navigation, as well as a contextual third page if needed, i.e. a members list for example.
Disclaimer: Play has been left out of this prototype as during discussions with stakeholders, they didn’t want to commit to a community-focused play experience before validating a successful centralised community MVP.
Mobile
Desktop
Dashboard
Split into three sections, we have Feed, Live and Events.
Users are able to swipe between each page, and use the above secondary navigation to move between subsections.
Chat
A key part of the community, we were keen to give users quick access between the different channels. Using our three panel approach we used our right hand contextual page as the chat window and main as the channel selection screen.
Leaderboards
In order to save developer time, we would use leaderboards that already existed on the platform. This also helps reduce complexity when talking about leagues / ladders and leaderboards as they would all be housed here.
Stats
Our stats page would be overhauled to become more modular and thus, allow for greater flexability between communities and games with different levels of integration with FACEIT.
Going hi-fi
After pitching our wires to stakeholders, reviewing them and making sure we covered the various use-cases outlined in our story mapping, we moved ahead to creating something more visually akin to a FACEIT product.
This was the stage at which we started thinking in terms of FUSE (our internal design system) and what components we could use for which execution. See a demo video here.
Dashboard
The most noticeable change is the simplification of our left-hand side bar. Moving the navigation to a global, bottom-of-the-screen option allowed for easier transitioning between sections of the community area, and kept the left hand rail for transitioning between different communities – a UI function that our users were familiar with through both our native app and indirect competitors.
These were brought into our design system and are now in use as a Panel component, also used across our native experience.
Our Live tab showed not only live streams from various members of our community, but also VODs of these recordings. At time of release, these would be mostly deeplinked through to sites like Twitch but we were also keen to look at streaming through FACEIT itself. After joining a stream, after a small wait, the UI would collapse to allow for a simplified chat-focused view in order to remove unnecessary UI elements from the user’s view.
I wanted to position events differently within this effort. Traditionally FACEIT events had been tournaments only, but communities aren’t built on these alone – they’re built through everyone coming together and having fun; competitive or not. That’s why I introduced Social Gaming events into communities, to allow organisers to create a time and date where everyone could just come online and play something fun together, away from the worries of losing ELO.
Feed demo
A quick prototype walkthrough of the above pages
Chat
After discussing what we wanted our chat experience to be during our stakeholder pitches, we decided to add a forum-style experience alongside traditional instant messaging. This allowed for slower, more in depth discussion where we could allow users and organisers to post topics related to support issues, particular games etc.
Chat demo
A quick prototype walkthrough of the above pages
The end (but not really)
It was at this point that the team had a senior designer let go by our lead designer which resulted in a big hole in our company structure in terms of design coverage.
Looking at the rest of the team, there weren’t any other designers with the same level of knowledge of the Play XP team, key knowledge of the video game landscape or the applied UX & UI functions that appear within a gaming environment.
It was then decided that due to this knowledge, my head of team wanted me to step up into this new team in order to cover what would turn out to be another large scale product change, this time focused on changes to how our users play matches on the platform.