Introducing Gaming2Go: Your one-stop mobile app for purchasing top-quality gaming equipment on the go.
Project Overview:
Gaming2Go is a mobile app designed for gamers to conveniently purchase top-quality gaming equipment to enhance their gaming setup.
The Problem:
It’s no secret gamers take great pride in creating setups that meet their specific needs, whether they game professionally or just enjoy having a dedicated space. However, finding the right equipment can be quite tedious and challenging, especially as the gaming industry evolves, leaving those with older models behind. Both seasoned gamers and beginners struggle with navigating the numerous options, keeping up with the latest technology, and finding the best deals.
My Role:
Lead UX/UI Designer
Project Duration:
March 2024 - May 2024
The Solution:
Gaming2Go is designed to solve these problems by offering a user-friendly app that caters to all types of gamers. For those who like to stay ahead, the app provides access to the newest and most cutting-edge products. Newcomers to the gaming world will find tailored options that suit their specific needs and help them get started with ease. Additionally, Gaming2Go ensures that all products are compatible with a variety of systems, making it easy for users to find equipment that fits seamlessly into their existing setups. The app also offers competitive prices and exclusive deals, ensuring gamers can upgrade their gear without breaking the bank. With Gaming2Go, finding the right gaming equipment becomes effortless, affordable, and keeps gamers at the forefront of technology, enhancing their overall gaming experience.
My Responsibilities:
User Research
Wireframing
Prototyping
Empathize & Define
User Research
User Persona
Problem Statement
User Research
Starting this project, it was crucial to address the challenges from a gamer's perspective. During the interview process, I reached out to gamers of all levels to better understand the problems they face when purchasing equipment for their setups.
Below are some of those findings.
Gamers often find the cost of equipment expensive, making it difficult for many to purchase what they want and/or need.
Those who use older models often feel excluded, as companies tend to focus on new technologies, making it challenging to find compatible equipment for their systems.
Narrowing down what they need becomes tedious, as companies often group products under the same name, making it difficult to identify the right fit.
User Persona
Problem Statement:
Michael is a passionate gamer who needs an app to find affordable and compatible equipment because he wants to avoid overspending on his gaming setup.
Ideate
Market Research
How might we
Market Research
How Might We?
When it comes to purchasing gaming equipment, most websites categorize products into broad groups such as headphones, speakers, and monitors but lack specialized filtering options. This can make browsing time-consuming, as users must sift through a wide range of products under each category to find what they need.
While some sites offer advanced filtering options, these often come with complex and unintuitive interfaces, making the search process more frustrating and inefficient. Additionally, as technology advances and new systems are released, companies typically focus on these latest innovations, leaving gamers with older systems struggling to find equipment that is both tailored to their needs and compatible with their existing setups.
How might we design an app that enables gamers to shop for affordable equipment while streamlining the experience to reduce complexity and overwhelm?
Prototype & Test
User Flow
Wireframes
High Fidelity Prototype
Low Fidelity Prototype
User Flow
Summary:
When users open Gaming2Go, they are greeted by a homepage with easy access to various product categories. They can search and browse components like headphones, view details, and add items to their cart. If they are not satisfied, they can return to the browsing page (indicated by a dotted arrow). From the cart, they can review their selections, proceed to checkout, or make changes (also indicated by a dotted arrow). After confirming their order, users receive a confirmation, marking the end of their shopping journey.
WireframeS
Digital Wireframe
With the user flow established, I began creating "paper" wireframes to visualize the process and layout. Multiple iterations were considered, but below is the finalized baseline that was used moving forward.
Using the baseline, I constructed my first digital wireframe utilizing Figma.
Testing
After creating my first digital wireframe, I conducted a moderated usability study. I chose a moderated format to gather real-time feedback, observe the participants' body language, and ask follow-up questions to identify areas for improvement. The changes made are highlighted with a red square.
Changes after 1st round of testing:
Added a favorites icon for user to like their favorite items and view later
Added a filter icon to help users narrow down their search more effectively.
Changes after 2nd round of testing:
Added a navigation menu to include additional features for enhanced user experience.
Added a home icon to allow users to return to the homepage at any point during their journey
Added a search icon to provide users with faster and more efficient results.
Added shipping address feature that enable users to verify and update their address details as needed
After my first round of testing, I was able to update my wireframe based off the feedback I received before conducting my second usability study. The changes made are highlighted with a red square.
Low Fidelity Prototype
*press on the phone screen to view prototype
Mockup
After my second round of testing, I made the final changes and began creating my first low-fidelity prototype. This prototype allowed me to animate the user journey through the app and test the screen transitions to ensure smooth page flow
High Fidelity Prototype
With the low-fidelity prototype established, I moved on to creating my mockup, which you can view below, along with insights into the visual design.
The concept behind the app was to evoke a futuristic vibe, immersing users in the atmosphere of the gaming world. Shades of purple and pink were combined to enhance this futuristic feel, complemented by matching text styles.
Final Prototype
*press on the phone screen to view prototype
Learning Outcomes
Tackling this project was both eye-opening and enjoyable, as it required me to step into roles that were entirely new to me. Adapting to the world of UX and learning about the design process challenged me to approach the project with a fresh perspective. It was important for me to set aside my personal beliefs and assumptions about what would work, which was easier said than done. I learned to approach the process with an open and empathetic mind, allowing me to discover solutions that I might not have considered on my own, and to embrace constructive feedback that not only helped me throughout the design process but also aided my personal growth as I embarked on this new career path.
I also realized that it's sometimes okay to trust your instincts and stay true to your original designs, as to me, this can add a unique touch to what you're creating. While it's beneficial to draw inspiration from outside sources, the approach they took to design their app might not be the best fit for you. There’s no such thing as a 'correct blueprint' in design, so don’t be afraid to stick to your vision, as long as you accomplish the project's overall goals and ensure user satisfaction.