COLAB15 - WEB APP

ONLINE

ONLINE is a progressive web app that helps gamers schedule gaming sessions with friends!

Problem Statement

The problem that this product will address is that gamers need a more efficient way of coordinating times to play with friends because they are looking to have fun and combat their loneliness with social interaction within these digital multiplayer games.  

Problem Background  

The video games industry has consistently seen growth for the past couple of years, despite the most recent and ever-evolving pandemic, to eventually reach $203.1 billion via consumer spending (+5.4% year on year) according to a newzoo article. This growth is evidence of the importance that digital games have on forming and maintaining friendships. An example of this can be seen in this article from The Washington Post that details how video games helped friendships thrive during the pandemic, which caused a year of isolation and loneliness. 

Through consumer research in the form of surveys and interviews with 10 interviewees, we have learned that older gamers (+19) have a difficult time syncing schedules with their friends to create these gaming sessions, resulting in 44% of interviewees stating that they don’t play video games with friends as often as they would like. These users are tired of their current methods due to inefficiency and complexity, with methods such as utilizing different group chats from different platforms such as iMessage, Snapchat, Instagram, etc. The main issues that arise with these methods of planning are a lack of responses, late responses, or a significant amount of back-and-forth messages dedicated to planning. A frequent scenario that all of the interviewees were familiar with is having conversations with their friend group on what time the group will be online, only for nobody to get online due to other circumstances which leave the group yearning for answers. This is a problem worth addressing now because it was found through consumer research that gaming is a hobby that takes up a significant amount of time in the lives of all of these users, ranging anywhere from 15-20 hours a week, hence, solving the initial pain point of scheduling these gamer sessions with friends can be extremely valuable to these users.

Through consumer interviews, we have narrowed down specific reasons why gamers struggle to play games with friends: 

  • Conflicting and always-changing schedules
  • No specific form of communicating availability
  • Not having friends who play the same games as them

56% of interviewees also stated being open to playing with new and different players. However, users have also stated that there aren’t any tools by which they can go out and find these new players.

Overall, it is clear to see the importance that gamers place on maintaining and forming new friendships and how they use video games to accomplish this. 

Research Insights

User Pain Points

We conducted 10 user interviews.

To address this problem effectively we conducted user interviews to be able to ascertain the pain points of online gamers in the way that they schedule online gaming sessions with friends and how they make new friends if their friends are unavailable.  We were able to group the main issues into three categories; conflicting and always-changing schedules, no specific form of communicating availability, and not having friends who play the same games. During the user interviews conducted, we were able to find out the different pain points gamers have while trying to play with friends and any solutions they’ve already tried.

Conflicting and always-changing schedules

  1. Work schedules
  2. Family time
  3. Student life - classes and studying
  4. Significant others
  5. Schedules not aligning with friends

No specific form of communicating availability

  1. Unknown/long wait times for responses
  2. Lack of responses in general
  3. Conversations behind held on multiple platforms (iMessage, Snapchat, Instagram, etc)

Not having friends 

  1. Friends are offline
  2. Being new to gaming so no friends to play with
  3. Not having friends play the same games
  4. Not having friends with the same skill level in specific games 
  5. No safe way of making online friends

Feedback

Our research let us know the pain points of users and we were able to identify which we are able to address with the solution. The pain points are essentially maintaining and forming new friendships while playing online games. I found that all of the pain points boil down to this core issue around friendships. 

Landing on the Solution

The goal of this product is to help online gamers find times when they’re able to play with their friends. The hypothesis is that if gamers had a resource or tool that showed them the best times to play with their group or specific individuals after everyone puts in their availability, then this cut down on time spent planning a gaming session to better enjoy more time actually playing.

Explanation of the Solution

ONLINE is a web app that will take away the stress of figuring out what time everyone will be online to play. 

The ONLINE MVP will have two main features: 

  1. Planning game sessions with friends - Users will download the mobile application, create a profile, add friends and input their availability for the week to see what times align with each other to play. 
  2. Messaging friends - Users will be able to chat with individual friends or a group to further plan their gaming session. 

Design Learnings

ONLINE was birthed from the need of gamers to find an avenue to link up with their friends and also make new friends on their favorite gaming platforms. We ensured the design solution factored in Accessibility considerations in line with WCAG 2.0 and followed design best practices so all users are able to interact with the application without feeling out of place. 

We thought about creating a unique user interface that looked simple yet appealing to the end users. Ideally, gamers are known to prefer a dark ambiance especially for those with gaming rigs as they often spend quite a lot of time staring at the screen. Hence, the need for us to stick with a "dark mode" for a better user experience while providing a bright CTA as a complimentary color. 

After carrying out extensive research to gather insight on what our potential users need. A user flow to perform key tasks was mapped out, a paper sketch to give form to how we want the interface to look, wireframe showing the skeletal design of how the app will feel. We had a lot of iterations on the low-fidelity design as we carried out usability testing with potential users and that afforded us the chance to iterate our existing low-fi designs. 

Some of the initial feedback gotten had to do with 

  • Privacy when scheduling a gaming session with friends as the first design draft displayed the thumbnail image, ID, and time booked by other users, so we had to adjust the schedule screen to do away with such details and just leave it at the time unavailable
  • Revamping how the initial landing page was so as to accurately reflect key content that would increase usability and conversion. 
  • Adjusting the way users set up their gaming time availability as the previous design provided users with the chance to schedule one timing availability per day as opposed to being able to log in multiple time availability per day. 
  • Providing the message tab as part of the navigation menu options as opposed to leaving it in the user profile spot. 

We iterated the designs in line with feedback gotten and then proceeded to high-fidelity design and prototyping. We carried out another round of usability testing so as to iron out any friction users might experience on time. 

We judged usability testing with 3 key metrics namely 

  • Time on task
  • Exit and drop-off rate
  • Conversion rate
LOW FIDELITY DESIGN  ITERATION AFTER USABILITY TESTING
OTHER LOW FIDELITY SCREENS
SOME KEY HIGH FIDELITY DESIGN SCREENS

We also had to leave out a lot of features we had planned to ship due to time and resources constraint having deliberated what was feasible with Ehis and Benjamin. Alex provided a guide on key features to ship out in the version 1 of the progressive Web app while some of the features we would be rolling out in the subsequent updates are:

  • Ability to find new gamers based on games they play with added filter options such as experience level, time zone, and gender. 
  • Messaging feature so users could interact with friends in a group so as to coordinate gaming schedules. 
  • Create different groups with friends depending on their common gaming interests. 
  • Integrate a sign-in option with steam, Nintendo account, PlayStation Network, and Xbox live. 

Implementation Details

Tech Stack Used

Backend:

  • Java Spring Boot
  • MongoDB
  • Thymeleaf
  • Heroku

Frontend:

  • ReactJS
  • AWS S3
  • Tailwind CSS

Technical Tradeoffs

We had to trade high availability for the simplicity required for an MVP, hence the decision to pivot from the initially planned microservice architecture to a monolith. 

Future Steps

With our Co.Lab experience coming to an end, we will not be continuing with the creation of this web app. Our team will continue to stay in touch as we all work towards new goals in our personal lives, from personal projects, new positions, or job-searching!

Learnings

Product Manager Learnings:

Alex Huynh

As a product manager, I learned that it is important to focus on the problem and the users as much as you possibly can before diving into the solution space. 

I learned how useful and impactful consumer research is in identifying user pain points and what is truly the core problem to be solved. 

I also learned the importance of clear and concise communication when it comes to explaining complex ideas of problems and solutions and how crucial communication becomes when working with a team that is 6 hours ahead of you! 

Designer Learnings:

Akorede Dasilva

I learned not to get attached to my design solution when I am receiving feedback as I am designing for the users, not myself.

I learned the importance of carrying out user testing early and iterating the design to correct any design flaw 

I learned how to back up my design decision to key stakeholders especially in cases when they see things from a different viewpoint.

I learned what it takes to prioritize Accessibility for all when designing a product.

And lastly, I learned how to prioritize design features while factoring in project constraints.

Developer Learnings:

Ehimwenman Edemakhiota

I learned to think about the most important functionality first.

I was able to embrace the unknown, growth comes from stepping out of one’s comfort zone.

Deepened my web-based development competencies.

I am learning how to juggle demands at work, and my personal life, and tending to my growth.

Developers Learnings:

Benjamin Ibe

&

For me, the most important thing I learned is how to communicate with the team especially when I can not meet deadlines.

I had the opportunity to start learning ReactJS which was used for the frontend technology.

I learned how to reach out and seek help and guidance from my teammates

Full Team Learning

As a team, we learned that not everything will go according to plan and that’s okay as long as we work together to fix the issues that we come across. We’ve faced many problems during this journey from learning to navigate a 6-hour time difference, to have to build with a completely new language, and even learning how to adapt with one another.