Community Gaming

Lead Designer
Lead Researcher
80 Hours

Background

Communitygaming.io allows gamers to create, join, and compete in video game tournaments for real money prizes, but I believed some design elements were holding it back from achieving its full potential.

I reached out to a developer who works for Communitygaming and asked if I could offer a complementary mobile-first redesign of the site. We discussed the site and some of his concerns. I shared with him my initial thoughts, the general outline of the design process, and he described the main issues he thought could be addressed by the redesign. He gave me the go ahead and I got to work!

Rates of new user acquisition and retention are lower than expected.

Problem

A mobile-first responsive redesign focused on:

  • UI Updates

  • Improving Search Features

  • Streamlined Flows

Solution

Improved UI

Users found the UI cluttered and outdated. A modernized homescreen brings Communitygaming’s aesthetic in line with industry standards, and helps users feel more confident in the platform.

An Improved Search Feature

Users had trouble searching for tournaments using a clunky filtering system. A revamped filter and search modal helps gamers find the tournaments that interest them.

A New Feature and Simplified Flows

Users struggled to complete basic task. Flows have been simplified, and a new feature added, to help players find friends and team up.

The
Process

Go to:

Research
and Define

I developed a research plan. The first step: assessing Community Gaming’s strengths and weaknesses. I went through flows first-time users were likely to experience, noted my observations, then conducted a more detailed heuristic analysis.

Moderated test

I recruited 5 gamers familiar with cryptocurrency to complete 5 tasks then provide feedback on their experience with the mobile site.

Objectives

  • Understand what elements of the site are frustrating

  • Discover pain points and task completion blocks

  • Identify which design elements delight, and which ones don’t

Tasks

  1. Sign up

  2. Join a tournament

  3. Create a team

  4. Find players and invite them to that team

  5. Build a profile

Feedback and interviews

There was significant consensus with users. The site was interesting but it looked cluttered and inconsistent. It was difficult to accomplish simple tasks, and most users would not feel confident risking real money on the site.

I developed a user persona based on my tester’s feedback.

“Searching for games isn’t clear or obvious...I want to see something that makes me trust them.”
— Miles
“This makes me feel like I’m working harder than I want to.”
— Christian
“I’m trying to find words for why I don’t like how the team invite is organized.”
— Eleanor

Ideate

I used an impact-effort matrix to prioritize my mobile-first redesign.

Task and user flows were used to clarify how a user’s experience could be improved. UI and content architecture improvements would help gamers feel more confident about the site, while streamlined flows would hopefully encourage them to keep using it.

Find Tournament

Create Team

Invite Players

Wireframes

Mobile would be the focus of the redesign, as a majority of Community Gaming’s users accessed the site that way. I kept desktop versions in mind when changing any features significantly, as with the search modal.

Designing a new way of connecting

During my research, I discovered a quirk of Community Gaming’s current player invite system. It did not allow users to search by username on other platforms such as Steam - even though those details could be entered in CG profiles.

I designed a way that searching by those inputs could be incorporated into their existing system and included it in the high fidelity prototype.

Prototype
& Test

I designed a high fidelity mobile prototype and invited 4 users, some of whom had participated in testing the live site, to provide feedback in a moderated usability test.

Test Objectives

  1. Assess user’s ability to complete 4 tasks.

  2. Identify pain points

  3. Evaluate redesign of new UI

Tasks to Complete

  1. Explore the Homescreen

  2. Create a team

  3. Invite players

  4. Search for a tournament

Feedback

All users were able to complete each task.

Users responded well to the new tournament search modal, and the simplified Create a Team and Invite Players flow was now more intuitive and less error prone.

However the new multi-platform find player feature was difficult to use, and the home screen redesigns offered no significant improvements to the original.

Priority Revisions

Before

Priority revisions included: visual improvements to the homescreen to reinforce user confidence in the platform, an adjustment to the player search feature, improved tournament search capabilities, and more.

  1. Search Bar added to help users find the tournaments they want more quickly.

  2. Headers and horizontal scrolling for content to reduce visual noise and make finding the right tournaments easier.

  3. Headers and horizontal scrolling for content to reduce visual noise and make finding the right tournaments easier

Try the Mobile Prototype!

  1. Toast notifications provide more reliable feedback for user actions.

  2. Users can now search for players from other gaming platforms without having to specify which. If users have linked their accounts, they’ll discoverable.

  3. Player cards resized to fit mobile devices.

After

Final Screens

Conclusion

Stakeholder Feedback

After sharing the final designs with my developer friend, I was invited to speak with the CPO of Communitygaming.

Although the redesign was all done in an unofficial capacity, I was grateful for the opportunity to talk about the process with a stakeholder. He mentioned “this is exactly the kind of thing we plan to do with the site”! Having the chance to present my work, get feedback and discuss the challenges of the business was a valuable experience.

Reflection and Next Steps

This was a great opportunity to work on a live site and get a sense of working with an existing design system.

Finding a way to recruit existing users from community gaming may have revealed different problems than what I focused on. It would have been interesting to see if there were significant differences between what my research indicated and what real users struggled with.

Furthermore, although I knew that mobile would be my focus, I wish I had devoted more time to developing desktop screens. Sacrificing one element of my redesign to practice responsive design more may have been a better way to go.

Moving forward, I would focus on the following:

  • There are still some visual elements that could be fixed or improved

  • Amplify the site’s responsivity

  • Apply new design schema to other site pages

  • More testing!