Playerbase
Playerbase helps gamers improve their skills and unlock their true potential by connecting them with the best coaches, content creators, and communities in the gaming space.
My role: Product Designer
Deliverables: User Flow, Wireframes, Components
Tools Used: Figma
Timeline: November 2021 to April 2022
Collaborators: Alek Hagopian - VP of Product Management
Joe Siconolfi- VP of Design
Devon Vaccarino - Senior Frontend Engineer
The Challenge
Playerbase is a web based platform that allows users to explore courses by seasoned coaches, training them in how to perfect their aim and other skills needed in an FPS game. When I first joined Statespace, my tasks were to redesign the site to increase customer engagement with Playerbase and to optimize the cart to checkout flow for our courses. I was the lead product designer for this project and my own personal goals for this platform were to make designs consistent across screens, set up a design system, improve accessibility, and flesh out user flows for what purchasing a course would look like.
The Approach
In an effort to understand the needs of our users, as well as the gaming audience, I began doing some research. About 20 million players use Aim Lab and those players were our main focus for bringing over to Playerbase.
We were able to access our potential users by Discord. Aim Lab has a discord community where users can participate in interviews, be informed about any future updates, as well as informing us of any issues they came across on Aim Lab. By interviewing our users, I was able to gain a better understanding of our audience, identify what they would want from this platform, and if there were any struggles they had when it came to using our site.
To really understand our audience, I began looking for any potential products that were similar to ours. I came across ProGuides and Metafy. About 1 million users are signed up to ProGuides; they offer 60+ courses and over 1000 lessons by more than 20 famous esports pros. Metafy simplifies the process in which coaches can reach out to users by using Discord. My questions were, what were they doing right? What were any potential pain points? What did their products have that incentivize people to purchase their courses and sign up for them?
The Discovery
By asking the questions above, I was able to identify potential what features Playerbase should include, such as the ability to sign up for a trial so that users can know if they want to stay signed up after the trial ends, and if Playerbase provided enough value for them to want to stay. If we wanted more users signing up for the platform, we needed to provide a solution that considered our user’s needs:
Private access to coaches for 1 on 1 training to improve their aiming skills.
The ability to get coaching for those who weren’t able to afford private 1 on 1 sessions (such as VODs)
The Vision
What we wanted for Playerbase was to create a community of support. The gaming community often gets a bad rep for being toxic and non-supportive, and while there are unfortunately toxic people, we essentially wanted a no egos type of situation where players of any level were able to connect to one another to improve and form teams!
Technical Specs
While thinking about responsive design, I noticed that for the sizing guidelines, the devs included a 4k resolution on Storybook. Now as this was my first time in gaming, I knew of course that there were people out there who used bigger screens, but was very curious to see how many of our users actually used a 4k screen. Since I wasn’t sure if this resolution was necessarily needed or if it was something the company thought was ‘nice to have’, I asked my PM how many of our users used 4k screens, to which he said, ‘10% of our users’. I’m not going to lie, I was a little shocked to learn that that many of our users used a 4k screen, and so had to consider how the information would size on such a huge screen.
Framework
Before starting on designs, I wanted to make sense of our workflows as well as existing content. With the new features being implemented, I updated our user flow to showcase this.
Ideation and Inspiration
After updating our user flows, I began creating a moodboard. Since Playerbase is a course platform, I began looking to other sites like Skillshare and Masterclass for inspiration on how they listed their classes and teachers.
Lofi Designs
Explorations / Mid-Fi Wireframes
While in the middle of fleshing out the lo-fi wireframes, the scope of the project had changed. We just acquired ProGuides, another platform that allowed users to connect with coaches to improve their gaming skills. With this new platform, I had to work with Alek to figure out how to incorporate this into Playerbase, and what new features would be implemented. The lofi designs were very simple - the user had access to courses they bought and simply no courses if they didn’t buy any. With the new features, the user flow changed to include being able to explore various course bundles a coach had (whereas previously there was no bundle option), the ability to filter out certain coaches based on product offerings, and allowing games to have their own homepage.
UI
So when the scope of the project had changed to include more features, I decided that now would be a good time to actually start designing and implementing a few components that would have designs consistent across all screens. Here, I had designed a few buttons because the old buttons were not accessibility friendly and I wanted to address that. I also created a grid system, with the measurements listed for easier implementation for devs.
Final Designs
Playerbase is a platform that allows players and coaches to connect for training. Users can explore all our games and coaches, as well as filter out coaches by the products they offer, what type of training they provide (1 on 1 vs VODs), games, and language.
Conclusion
This was my first big project with Aim Lab. It was great seeing how the organization worked, and working closely with the engineering side for this. As I was the first designer for this platform, I was able to start building out a style guide since the site had some inconsistencies (built and designed by engineers first, sorry engineers love you all!). It never fails to amaze me that my designs get shipped and seeing it live was amazing. From the launch, we learned that we had to evolve the platform from only focusing on esports into a more broad learning platform for gamers, which is where Aim Labs comes into play. While the platform will eventually merge into Aim Labs, it is a project I remember fondly.