The Challenge : Create an Ecommerce website where busy gamers can order their gear with ease
Project Duration: July 2024-August 2024
The Product: The American Game Gear Exchange (A.G.G.E)
The Problem: As generations of gamers get older, their jobs and their personal lives take up a majority of their day. They still want to game with their free time. When some of their gear breaks, they might not have the time of day to go and buy the new gear. With this ever growing phenomena we must come up with specific solutions.
The Goal: The goal of this project is to create a website where you can buy your gaming gear in a quickly and efficiently.
Competitive Research Summary
My research started with a competitive audit where I looked at similar websites to what I was doing. The sites I looked at the most were Amazon and Gamestop.
I assumed that though I can't make a carbon copy of these websites I can take a ton of inspiration from them, but these assumptions were proven false. For what i was trying to do, these websites were too complicated and covered too many bases. I needed to make a website that fits my target audience and is functional with just a few clicks.
Persona
Sitemap/User Journey
The goal is to help users find what they need in a quick and efficient manner.
Most of the time, the user knows what they need and what they are looking for, so the journey map may not be as long as it would be if they were just browsing.
My original site map was designed to keep everything as concise as possible while complimenting the search feature.
Paper Prototype
In the paper wireframes I really focused on layout more than content as I needed room to place everything I wanted to without if feeling cluttered. Especially if my goal was to have as few clicks as possible. That meant that there may be a little more on each page than there would be normally.
Digital Prototype
After translating my paper wireframes to digital, The spacing of everything started to make more sense.
Keeping the home page short and simple helps to keep the click count as short as possible as most people will be using the search function anyways.
Low-fi Prototype
After finishing up the low-fi prototype, I saw that the content was way too big for the screen size. With each item almost taking up the full screen.
As I continued into the mockup and hi-fi prototype I was more conscious about it.
Mockups
For the colors I wanted to keep it simple and non distracting as well as keeping it under WCAG guidelines. But i felt as though white was too simple and the website lacked a personality. So I decided upon the Cream and Navy color combination.
The Typography I kept extremely simple for the same reason as the colors. I felt that just using a sans serif font and differentiating it with text size and Boldface would be fitting of the website I was aiming to make.
What I’ve Learned
I’ve learned that fresh eyes are a designers best friend, and that you can become detail-blind when looking at something for too long. Unfortunately I didn't have any fellow designers with me on this project as I was taking this course, but even a once or twice over from my parents and my friends made me see a ton of missed details that I couldn’t see in the moment.
1
The sizing of with content, images, and the footer are much too large. So I would fix the sizing to improve hierarchy and overall readability/scroll-ability.
Next Steps
2
Finishing other screens, for example: Profile, Essentials, Pre-owned, Sell, and possibly a new screen between checkout and confirmation to increase user satisfaction.
3
I also want to put categories on their own page because, with my free version of Figma I can’t have two actions on a single click when it comes to navigation.
