Fight or Flight
Overview:
As part of the Google UX Design Certificate, I created a responsive website that allows users to quickly and easily purchase and play the "Fight or Flight" games.
My Role
Sole UX/UI Designer from start to finish
Duration
Jan 2023-Feb 2023
Tools
Adobe XD, CanvaPro, Excel, Google Slides, Paper & Pencil
Watch a demo of the final product
.png)
About the Project
I was tasked with creating a responsive website for a popular video game. There was no site that existed for the business so I had to create one from scratch. The stakeholders expressed that they want the site have a way for users to purchase and play their games on a desktop. Throughout this project I conducted user research, usability tests, created mockups, prototypes, infographics, presentations, reports, and more!
.png)
Understanding
the User
-
Empathize and define
-
Pain Points
-
Interviews
-
Empathy Maps
-
Personas
-
Problem Statement
Problem Statement
Putting myself in the user's shoes, I developed a problem statement that would most accurately describe the pain points I would be addressing while designing the site.
User Interviews
I conducted in-person interviews and asked mostly open-ended questions to allow for the most detailed responses possible. This allowed me to clearly identify user pain points and to create personas.
.png)
.png)
Empathizing
After the interviews, I determined that there were three main pain points that needed to be addressed. The users want to quickly get to game play, have a log in area, and have a streamlined checkout process. I was then able to create an Empathy Map to better understand the user.
Creating Personas
After carefully combing through all of the interview responses, I compiled personas that best represented our users. One persona is an experienced gamer and another is new to gaming. Therefore, I wanted to make sure that I cater to both personas in the site.
Ideate
-
Competitive Audit
-
Site Map
-
Paper Wireframes
-
Digital Wireframes
.png)
.png)
Site Map
This site map focuses on the pages of app that need to be created. I like to keep site maps as streamlined as possible to avoid confusion for the user. When I started creating wireframes and mockups later on, I made some changes to the sitemap based on usability testing and design feedback.
Wireframes
Now that I had a full picture of our users and competitors, I referenced the site map to create wireframes. I began with sketching paper wireframes and moved on to create digital wireframes in Adobe XD. I sketch a lot before moving to digital wireframes.
Low Fidelity
Prototype
-
Low Fidelity Prototype
-
UX Research Study Plan
-
Usability Study
-
Analyze and Synthesize Results
-
User Journey Map
-
Iterate on Lofi Designs
Low Fidelity
Then, I connected the digital wireframes to create a low fidelity prototype. This is often where the fun really begins for me! I truly enjoy seeing all the hard work I've put in up to this point really take shape and become more tangible.
Time to test the Low Fidelity prototype on users! At this stage, I created a research plan that included conducting an unmoderated usability study. The study's main objective was to see how easy or difficult it was for the user to begin gameplay and place an order. I took detailed notes on each user as seen below. After the test, users were asked to complete a survey I created.
Affinity Diagram
I analyzed and synthesized the results and found patterns and themes that I organized into an Affinity Diagram. This helped me see what needed to be iterated on in the prototype in order of importance.
Actionable Insights
I then discovered actionable insights. I brainstormed solutions to user problems that came up during the testing phase.
Iterations
I proceeded to eliminate a step in the checkout process, add an option to remain logged in, and build a rewards program.
High Fidelity
Prototype
-
Design kit
-
Mockups
-
Prototype
Design Kit
I used Google's Material Design Kit as a building block for my own design kit. I played around with the color scheme and typography several times until I was satisfied with the visual design. I also created a mood board for inspiration.
Mockups
Now onto my favorite part! I used all of my inspiration from my mood board and the knowledge I gained from the testing phase to create mockups. The users expressed a need to read product descriptions before buying, so I created visually appealing product pages with videos to give the user a full picture of the product before purchase. I created all the visuals and motion graphics myself.
High Fidelity Prototype
I continued on to create a high fidelity prototype in Adobe XD. I added several videos to keep the site engaging from the very beginning of the user journey. It was wonderful to see all of the visual and motion graphics I created really come to life!
Final Thoughts
-
Next Steps
-
Takeaways
After completing the final design, I thought of more designs I can implement to the app in the future. Designs that include adding more accessibility features, conducting another usability test, and adding to the rewards program.
I successfully created a way for Fight or Flight's users to play and purchase their games quickly and easily. I learned that designing sites takes constant iteration and research. And, most of all, the user comes first!
