Stylish Gamer Website
An eCommerce website that allows customers to buy and customize products related to their favorite video game brands and franchises.
Product Designer
Role:
Individual
Team:
3 weeks (Aug - Sep, 2023)
Timeline:
Adobe XD
Tools:
Google’s UX Design Certificate Program Personal Project 2.
SquarePlanet’s Web Design Course 2 - Landing Pages.
Project For:
Project Overview
•
This was my second project for the Google UX Design Certificate Program. The prompt I received for this project was "Design a flow to order custom video game merchandise." I researched my prompt and set my goal based on what I discovered.
Since the Google program focused mainly on UX design, I also took this opportunity to combine this project with SquarePlanet’s "Web Design Course 2 - Landing Pages." This course’s project involved designing a landing page for a website following the best UI design practices. So I combined these courses to utilize both good UX and UI practices when designing this project.
My goal was to design a flow that would allow users to customize various products such as mugs, posters, trading cards, and more but also provide quick and easy ways for users to use design presets that are related to different video games as well as mix and match presets and customization. This flow goes from start to finish where the user starts at the homepage and ends by completing their order and purchasing the product.
Understanding the User
•
Sticking out from the crowd
eCommerce websites that allow you to customize products aren't a new idea. During my research, I looked at different types of websites that allowed you to create custom products. All of them were similar in the fact you can customize products for personal or business purposes with the primary product being t-shirts. Nothing really stood out as having a unique theme. I understand that this is to appeal to a more broader audience but following this trend wouldn’t help a new website stick out.
Realizing this, I thought of ways to add to my prompt to make my project stick out from the crowd of similar types of websites. Being a gamer and having some gaming-related merchandise, I thought having a gaming theme on my website would help it stand out more. Also, video games have such a huge and diverse audience that if this website/company were real, it wouldn’t limit business as heavily.*
*See more about how I would like to improve this research in the Takeaways section.
A quick little competitive analysis
I decided to do a competitive analysis to see how competing websites* allowed their users to customize their products and how the website marketed itself.
*For this analysis, I focused on websites that allowed the customization of multiple different products since that’s what I planned to design my website to be able to do. I excluded websites focused on only t-shirts, business cards, etc., unless they were gaming-related.
Competitive Analysis
Printful
Multiple different products.
General customizing. No real theme.
Tons of customizing options.
Has “quick design” and “clipart” options that allow users to use premade art/designs in their designs.
Printify
Multiple different products.
General customizing. No real theme.
Tons of customizing options.
Has a “paid content” option that allows users to use paid designs in their own designs.
Zazzle
Multiple different products.
General customizing. No real theme.
Tons of customizing options.
Has premade template designs users can use.
Canva
Multiple different products.
General customizing. No real theme.
Tons of customizing options.
Has premade template designs users can use.
Are there any websites related to gaming?
The only customizing merchandise product websites that were related to gaming were the websites that allowed users to customize jerseys with their favorite e-sports player or team. Nothing related to actual games and creating designs.
And of course, there are plenty of websites that sell merchandise products related to video games but offer no customization.
Competitive analysis findings and my thoughts
While trying to customize products with all of these websites, I noticed that they seem to all be using similar customizing software because, for the most part, they all look the same.
With this probably being the case, it confirms what I was talking about regarding trying to stick out and being a new player in the market. It mainly comes down to a user picking a website based on brand name and/or reputation, as well as the quality of the products.
So, bringing a new angle to the market (or, in this case, a unique theme), like being focused on gaming, could stick out in front of the crowd.*
*See more about how I would like to improve this research in the Takeaways section.
What do gamers think of this?
With the competitive analysis helping me stick to my idea of my site being video game-related, I next wanted to interview gamers to see what they thought of this and what features they would like a website like this to have.
Interviews
I interviewed four people who considered themselves gamers, and each interview lasted less than 15 minutes. The question and follow-up questions mainly centered around how they felt about the idea and what features they would prefer if they liked it.
The questions I asked were:
Do you own any merchandise related to video games?
Have you ever wanted to have custom merchandise that was related to your favorite games?
Would you buy from a website that allows you to create and customize products based on video games?
What type of features and services would you expect from a website that allows custom gaming merchandise?
Have you ever experienced any issues when buying gaming-related products?
Interview findings
Sense of choice, many different customization options and having preset options to easily select from were the main factors.
All of the participants were open to the idea of being able to create customized products based on some of their favorite video games. One participant even felt it was a great idea because it’s hard to find products related to their favorite games that aren’t as popular.
Participants also expressed how they would want the website to include many different types of customizing options related to things like the style of the product, as well as have presets where they could select premade designs or have customized options ready to use (like having all the colors related to a game picked out and ready).
The pain points have been discovered
Through my research, I discovered three main pain points users could experience while customizing products related to video games. Also, just knowing this subject matter, I’ve included another pain point the company could face with this product.
Choice
1
Current gaming merchandise websites offer no customization. This means that the games these websites' products are based on are only for a select number of games (that are usually popular games).
Customizing options
2
Along with having a smaller number of games on which their products are based, these gaming websites currently offer designs and styles for their products suitable for a customer’s home or a casual day outside but don’t offer products designed to be ideal for professional environments.
Ease of use
3
Participants who were interviewed expressed interest in ensuring that the customizing process for every game included preselected design tools for users to utilize.
For example, if a user were to select a particular game to base their product's design on, then not only should there be premade copyrighted designs to choose from, but also simple design options like the game's colors and fonts listed so users wouldn't have to find it themselves.
Copyright
4
While copyright wasn’t a concern brought up by participants being interviewed, I know this could potentially be a huge issue for the company itself if not figured out before launch if this project was for an actual company. This is because the customization process will include the option to have users upload their own designs, which can lead to copyright issues.
Who am I designing for?
With the user research done and pain points discovered, I created three personas to provide me with a clear visualization of the users and to always remind me who I was designing for.
Persona 1: Lindsey Jenae is a user who likes to collect things related to video games and wants to expand her collection to include merchandise related to games that are more obscure and less popular with mainstream audiences that she likes to play.
Persona 2: Gus Haydn is a user who works in a very professional environment but wants to display items related to video games that are considered subtle and appropriate for his office.
Tip: Click on images for a full-screen view.
Starting the Design
•
Starting with a site map
After completing the initial user research, I created a site map before working on wireframes. My goal was to finalize the overall website's navigational decisions and ensure everything was accounted for. My chosen layout was designed to make things simple, quick, and informative.
Starting the paper wireframes
I started creating paper wireframes based on the site map with the goal of ensuring the website is simple, quick, and informative. I combined these details with the pain points I documented earlier to make this the best user experience. After completing the initial wireframes, I settled on a refined one for each screen I needed to design.
Here is an example of the homepage’s initial wireframes:
Now let’s make them digital
Once settling on the refined paper wireframes, I converted them into digital wireframes.
For the Landing page’s design, I focused on displaying the appropriate information found on landing pages. This includes having quick access to the most relevant parts of the websites, telling users how the customization works as well as showing them examples and reviews.
For the Games page’s design, I created it to provide users with a full list of all the games available. Users will be able to search for the game of their choosing, and of course, the list can be expanded on.
For the Customize Products page’s design,I designed it to look and function like most customizing website tools. However, these tools will include features desired in the pain points, such as selecting games and seeing premade and preselected options/designs.
Tip: Click on images for a full-screen view.
Homepage
Games Page and Customize Products Page
A little redesign
Due to the nature of this design, doing a usability test with a low-fidelity prototype wouldn’t provide the best results since the customization process isn’t fully developed. At this point, I decided to start SquarePlanet’s “Web Design Course 2 - Landing Pages” to learn more about designing landing pages. I used what I was creating here as the project for this new course and combined the UX/UI knowledge and skills I was learning for both courses to design a better product overall.
I took what I learned and redesigned the landing page a bit to align with the standards learned while taking SquarePlanet’s course. From there, I redesigned the other screens to match some of the design changes I made to the landing page.
Refining the Design
•
Let’s give it some style
Now that I was done with the redesign of the wireframes and was ready to begin refining my designs into mockups, I settled on a branding style for the app.
Creating mockups based on the redesign
A better landing page:
Expanding the customization process:
I developed the customization process in the mockups. I made sure to address the pain points of customization and ease of use in this design since they focus more on customization and the available tools and options.
Solving a potential pain point for the company:
Part of the customization process includes an “upload” feature. This could be a potential problem for the company itself regarding copyright.
The solution I settled with for this issue was a terms agreement popup where users would have to agree to the company's copyright terms when the upload option is selected.
However, this is just one solution of many, and if this was a real project, I would discuss this issue and how to solve it with the higher-ups of the company.
Testing the changes with users
Now that the whole customization process as well as the checkout was complete, I asked a few of the participants from the interview to partake in a usability test.
Since this is just a prototype of mockups and not a fully functional product, participants were asked to “customize” a product by following a preselected path of customization choices but to make note of all the customization options available as well.
At the end of testing, participants were asked how they felt about the customization process and what they thought about the selection of customization tools available.
Feedback I received
What worked
Participants found the design easy to navigate through.
Participants felt there were enough tools to satisfyingly customize their product.
Participants liked the preset options.
What needed improvement
Participants wished they could have used all the customizing options.
One participant thought an option for having users upload presets for games would be a useful feature (a potential future feature depending on if there would be copyright issues).
Interacting with the high-fidelity prototype
With the final testing completed, I was pleased with the feedback and decided to finalize the prototype. These are the different user flows the participants experienced:
Accessing the homepage and product page.
Customizing a product.
The checkout process.
Accessing the homepage and product page
Customizing a product
The checkout process
Interact with the full prototype
Developer handoff
In SquarePlanet’s course, I learned how to present my designs to developers. While this project is a personal project, I wanted to get more practice in presenting my designs to developers like it was an actual project because my designs are optically aligned and not aligned by bounding boxes. Here is an example of how I would present the homepage.
Takeaways & Refections
•
Impact
Due to this being a personal project, I couldn't show any real-life metrics regarding the design's impact. However, my designs adequately address the pain points found during research.
With my courses, I received a maximum score (100%) on all deliverables related to this project from the Google UX Design Certificate Program.
What I learned
This was my first time using Adobe XD to design a project, and it was interesting learning the ins and outs of the software. Another thing I learned was that, while there are customizing product websites out there, being able to take a similar formula and adapt it to solve the pain points that need to be addressed will benefit my design knowledge since I may work on similar projects in the future.
Since I combined two courses for the project, I was also able to apply what I have learned regarding UI design to improve the design of the website’s landing page and apply those improvements to the rest of the designs.
What could use improving
I could have benefited from more access to better user research. Having more data on how well video game-based websites sell products could have improved my designs. The prototype could have been a bit more in-depth regarding the customization process to show off how some of the other features worked, but overall, I’m satisfied with the result.
Thank You!
See More
