The Gaming Lounge
A solution to Live Service Game Management.
Where
What
Why
Saitama, Japan
Native Mobile App (iOS)
Porfolio Project
Role
Category
When
Designer, Researcher
E-commerce, Electronics June 2023 – Aug 2023
Why I made this project
I’m a huge fan of all things involving video games. This app’s purpose would make shopping for games or gaming items very easy and allows people to easily find and order from local shops around them.
Market Research
The Claim
The video game industry has been rapidly growing in the last 4 year. The market is now estimated to be at $334B worldwide.
The Problem
Due to more games being made in a year, it could reduce the quality of video games and people could lose their interest in them.
Competitive analysis
I analyzed 3 of the most popular apps within its space – looking both at the ordering experience and the negative app comments in order to find patterns.
Yodobashi
GEO
Bic Camera
The good
All apps allow users to search for items that can be delivered or picked up from nearby and local stores (Japanese electronics shops).
The bad
Two of these apps were mentioned to have old UI that was a bit frustrating and one app had problems with adding items to the cart.
Problems from the comments
User Survey
I conducted a quick survey through social media among people who are often purchasing electronics online.
What's the most important factor you take into account while shopping for electronics?
15 participants
Notable comments
The research shows
There is a growing need for electronics that are well-made, good quality with the price being not overpriced for the quality that you are receiving.
Personas
I created two personas for this app based on two types of users. The first one is the store owner and the second is the client.
Let's begin designing!
Once I went through all my research data, it was time to start sketching out my ideas with the first flows and the initial low-fidelity wireframes.
Flow Diagram
To show all the necessary functionality, I have created a simple flow diagram of the main tasks the user can do. One of the flows is shown below. The fail state flows were also created, but not shown because of spacial constraints.
Main Client Flow
Lo-Fidelity Wireframes
After having finished the flow diagrams, I started to create the low fidelity wireframes of the main flow.
High-Fidelity UI Design
Once I have finally finished the initial flow, I started creating a couple of the main screens of this app. I started by defining the colors and fonts.
Font
Plus Jakarta Sans
Regular, Medium, SemiBold, Bold
AaBbCcDdEeFfGgHh
Color palette
Accent 1, Accent 2, Primary,
Secondary, Tertiary, Background
Modern & simplistic feel
The style was done by using decorative PNGs/JPGs of electronics in simplistic ways. I made basic controller buttons, too.
40 high-fidelity designs were made
Also including two different navigation patterns (a tab bar and a hamburger menu) that could be used for an A/B testing in further design stages of the app.
I was also testing simple white backgrounds with soft blurred squares floating on main screens and an aurora-styled blurred background with product and listing screens and the onboarding screens. I was looking for a modern & simple gaming-feel.
Alignment and grid
I chose an 8-point grid for this project and set the margins for within groups at 8 and 16. Margins between groups were set at 24, 32, and 48.
High-fidelity prototype
I have connected my high fidelity designs into a clickable prototype. This will allow me to test it on a first group of users of this app.
Prototype validation
I have validated my prototype with 3 users. Each of the users were given a subset of the main flow prototype design dedicated to completing a successful checkout with a single product. I wanted to make sure users found it very simple and easy to choose a category and product, add it to the basket, and finally complete the checkout.
This was tested in-person where I introduced the app to the user and asked them questions about it. The questions that I asked were dedicated to figuring out whether if the tabs and buttons were simple enough for the user to successfully purchase the product.
Study results
66% of users (2 out of 3) were unaware that you could tap on the image of the product, but only could press the “add to basket” button. They didn’t expect for the category page to do much. That means that the success rate of this task was just 33%.
prototype update concept
Due to time constraints, I wasn’t able to do a second round of usability study on the updated prototype. However, I’ve updated it by changing the button with a “product details” button in the category page. I’ve decided to just keep the “add to basket” button just in the product details page.
Accessibility check
This app has been evaluated to have the contrast in order to match the AA standards of WCAG. In some cases, I found that the contrast could be improved.
One example was the main purchase button I originally designed. I wanted to differentiate this button from all other CTA buttons with the lighter blue color that I liked, but it was proven to not be accessible at all. I modified the contrast on the final version of the background color.
Project summary
During my project, I managed to evaluate the market of my app, do some quick user survey on Twitter, perform an in-person mini usability study, create some lo-fidelity wireframes, research competitors, build them out to high-fidelity designs, and connect them into a prototype flow. I also did a QA audit in order to create great accessibility with consistency and color contrast.
I learned a lot with this project such as doing market research, user surveys, and even producing a competitive analysis.
