top of page

GAMING CENTER WEBSITE

ComWorks

Apply UI principles to redesign navigation and features on website

The Problem

ComWorks is a gaming center based in LA that also provides printing services. Users were unclear of the business features due to a lack of hierarchy of information. The current website was dysfunctional with many broken links making it impossible to navigate the website. 

The Solution

Redesigned ComWorks' website navigation utilizing UI elements to establish information architecture for increased user satisfaction. Identified an opportunity for ComWorks to implement a computer reservation system that would benefit both social and competitive gamers and incentivize them to game with their friends at a local cafe.

Target Audience

18-35 year old gamers in Los Angeles, CA

UX Researcher | UX Designer

Roles

June - July 2023

Timeline

Figma, Slack

Tools

Platform

Desktop

ComWorks Original Site

Navigation Issues- 

User is confused by the placement and purpose of the menu feature on the right side

User is unclear of what services are provided - are these games for sell or for playing?

Users are unsure what information the images are providing due to lack of labels

My Redesign

User has easier time with navigation by clarifying headers

Users wanted to reserve their computer seat in advance

 

Users wanted to easily see game choices available

Competitive Analysis

I looked at other local gaming centers to understand the market. Ultimate ESports, Localhost Fullerton and eCyberdeck all offered an option to reserve online in advance, whether it was to book an event like a birthday party or a private room.

ComWorks was the only local gaming center who did

NOT have a feature to reserve computers in advance.

User Interviews

I wanted to generate as much research as possible by asking open-ended questions.

  • What are your favorite (and least favorite) parts about gaming?

  • Describe your ideal environment for playing video games. 

  • Tell me about your experience at an Internet cafe. 

  • Describe the process of how you would choose an Internet cafe. 
     

“The reason why I go to Internet cafes is to game with my friends. I actually don’t think I can recall a time I went to an internet cafe by myself.  Otherwise, I’d just stay home and game in my PJ’s.”

 

“It’s really a bummer if there aren’t enough (computers). It happened to us before - I think there was an event of some sort. Now I try to call ahead and make sure there are enough available and no events going on that day.”

 

“(To choose a place) I go to the website/Yelp and go straight to the gallery pictures to see if it’s clean and if it’s big enough for my group.”

 

“I want there to be no problems when I game - (cafes) need to have quick game set-up and no lag time.”

Key Findings

When I sifted through the interviews, it became clear that there were a few common themes gamers experienced.

The top four "I" Statements:

  • I like to be comfortable when I game. 

  • I want to get into my game quickly without interruption. 

  • I find it frustrating when there are not enough computers. 

  • I want to have fair and friendly competition.

Personas

Kelsy - a Social Gamer

  • Trait: Natural planner

  • Motivation: Important to game near friends

  • Needs: Enough seats for friends

Tom - Competitive Gamer

  • Trait: Focused

  • Motivation: Minimal distractions in environment

  • Needs: Right equipment for games

User Journey Map

Kelsy wants to ensure that the cafe can accommodate her group so they can game together. She wants to check the availability ahead of time so that she doesn’t waste time the day-of. She calls ComWorks, but is met with an automated voice system that directs her back to the website. She begins to feel frustrated with this experience as the website does not have clear information and she is unable to speak with a worker to get the information she needs.

Problem Statement

I realized  that calling is not a viable solution. 

 

Kelsy needs a reliable way to reserve computers because she wants to ensure there are enough computers for her to game with her friends. 

 

Because if there are not enough computers, Kelsy could have a negative experience waiting at the cafe or might end up leaving altogether.

How Might We's

I began to wonder - How might we remove the need for the user to call the cafe so they aren’t met with the same frustrating situation like Kelsy did. What if it was possible for users to see what computers are currently available or to be able to book computers in advance? What if they can specify how many they would need and be able to pick which one it could be. 

 

There’s a membership log-in on the website, so how might we utilize this function to make it easier for returning users to reserve & checkout? 

User Flow

A User Flow’s purpose is to demonstrate the process a user will take through the proposed solution. 

 

For instance, Kelsy is with her 3 friends and they are looking for something to do right now. She would open the ComWorks website. She would then look at the currently available computers under the reservation tab. She would decide how many seats she needs and look at the available seats. Do these meet her expectations of being available and close enough to her friends? If it does, she can proceed to selecting seats. 

 

But let’s change the scenario and say Kelsy is looking to book time at an internet cafe in advance because it takes awhile to coordinate all her friends’ busy schedules or it’s for a special event like a birthday. If this is the case, she would go to the website, select the FUTURE day and time, browse seats & select the seats.

 

For both scenarios, after selecting seats, she would receive a summary page and review if the information is correct. If so, then she would sign-in to her existing account or register to create an account. After that, she could proceed to payment options & she will receive a confirmation email once booked. 

 

For either of these scenarios, if she did not like the options given or they did not meet her needs, she could MODIFY her details, or RETURN to the home screen. 

Usability Test Plan

Users were looking for a clearer way to ensure enough computers to game with their friends, so I implemented a reservation system. I conducted a moderated usability test to learn more about my users and identify any potential difficulties with the checkout process.

 

Scenario: Imagine being a social gamer who wanted to game with 3 friends at an internet cafe in-person on July 24th from 6-9 pm and complete some tasks.

 

Goal: I wanted to see how users would navigate through the website and if the flow, call to actions, and labels made sense. Were the users able to complete the task? Are they satisfied? Is the information was positioned when and where the user expected to find it? What types of errors/pain points occur? 

Tasks

  1. Show me how you would ensure that the cafe offers a game that you and your 3 friends could play together. 

  2. Show me how you would calculate how much it would cost the group to visit the cafe. 

  3. Show me how you would ensure there are enough computers for your group on your desired date.  

  4. Show me how you would go about reserving a spot for 3 hours. 

  5. You previously booked some computers, but your plans have changed and you cannot make it anymore. Show me how you would go about it. 

Usability Test Results

I also discovered that users needed visual feedback and higher color contrast. One user said, “It’s hard to see which computers are selected. These are too dark.” (As they pressed the button multiple times) “Does this (Show Available) button work? Why didn’t anything happen?”

 

I also discovered that users wanted to be able to freely maneuver around the website so I made it easy for them to click out of overlays and gave them multiple options for navigating with buttons and/or tabs. 

But the biggest thing I discovered was that users did not engage with the sign-in/create account process at the end of the checkout.

 

With this in mind, I began to reconsider the USER FLOW so that the user would find creating an account to be useful. An account would allow the user to make a reservation, as well as easily manage their reservations at a later time. It would make the payment process easier for the user if we already had a name and email on file as well. 

Reservation System Design

Calendar View - 

Users preferred calendar view to visualize dates

Current Availability - 

User can see the available computers

The Next Steps

Reflections

Lessons Learned

This was my first design in Figma and I've come a long way since. After this project, I learned the importance of creating a design system as it will save time and keep branding consistent. In this specific design process, I learned the importance of usability tests when I had to revise my user flow because users were not engaging with the feature I created. 

Next Steps

In the future, ComWorks should continue to develop and utilize these features more. What more could they do with the account information? How could they use that to track peak hours, staffing needs, or user preferences as they continue to grow and scale? 

 

Since ComWorks main user base are gamers, I would be interested to explore more of the eSports world and tie in events and social media into ComWorks’ website more. This will allow for a true feeling of a gaming community and hopefully build more return users.

bottom of page