top of page
fight or flight mockups (7).png

Fight or Flight

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


Jan 2023-Feb 2023


Adobe XD, CanvaPro, Excel, Google Slides, Paper & Pencil

Watch a demo of the final product

MacBook Air_Screen Shot 2023-02-24 at 2.38.57 PM.png
fight or flight mockups (8).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!

Copy of user research and project overview (3).png

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.

I compiled a comprehensive case study of my design process for "Fight or Flight" that can be viewed via the link below.

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.

Copy of user research and project overview (4).png
ff- interview questions (1).png


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.



  • Competitive Audit

  • Site Map

  • Paper Wireframes

  • Digital Wireframes

Competitive Audit & Analysis

Although it was not required of me to create an in-depth analysis report for the Google UX Design Certificate, I did anyway. For all competitors, I used the SWOT analysis, wrote business bios, and even included pie charts.

Cover Page.png
Competitor Analysis.png
Business Description (2).png
Competitor Analysis (5).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.

ff-site map.png


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

  • 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.

Research Plan

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.

Executive Summary.png

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.

ff-Affinity Diagram.png

Actionable Insights

I then discovered actionable insights. I brainstormed solutions to user problems that came up during the testing phase.


I proceeded to eliminate a step in the checkout process, add an option to remain logged in, and build a rewards program. 


High Fidelity

  • 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.


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.

iPad Mini in 4 colors_Screen Shot 2023-02-27 at 4.51.24 PM.png

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!

bottom of page