Skeleton Key: A Videogame Deal Finder

Skeleton Key is a deal finder website for video games. Our website is intended to help gamers on a budget find the best deal on their desired game. There are several online retailers (Steam, Nintendo E-Shop, Xbox Games Store, PlayStation Store) that offer deals you can only exclusively get from them. Using our website, the user could compare across retailers to find which one is offering the game at the most affordable price.

Viewport: Laptop 1728x1711

Approach: Goal-Directed Design

Duration: 13 weeks (Spring 2024)

Tools: Figma, Teams, Canva

Role: Interaction & UI Designer

Team Size: 5

Goal: Help gamers easily & quickly find games at a discounted price

Introduction

Skeleton Key is a project created during Spring 2024 for my Senior Capstone at KSU. I was grouped with four other Interaction Design Students, Gio Diaz (Lead), Michelle Hayden, Sanai Kaufman, and Erin Weir.

The goal of our product is to help gamers easily and quickly find discounted games across multiple game retailers. Users can simply search for their desired game, and see where it’s being sold for the cheapest.

For example, let’s say a user wants to buy Baldur’s Gate 3 and they own both a PC and a PlayStation; They could buy the game from either Steam or PlayStation Store. They decided to purchase the game on PlayStation Store, but then later checked out Steam and realized they could’ve purchased Baldur’s Gate at 20% off! This can be extremely frustrating for a gamer, and the goal of our product is to avoid this experience.

Research + Modeling Phase

Our first task in the design process was to come together as a team to discuss assumptions (how should our product behave? who is the user? where does our product fit into the user’s work/life?). From there, we constructed a problem statement.

Problem Statement: The current state of online video game shopping has focused primarily on exclusive software + deals only offered on specific platforms. What existing products/services fail to address is cross-platform price comparison, and exclusive platform deals. Our product/service will address this gap by providing 1. Price comparison between platforms 2. A cross-platform wish list.

We began research into the domain and our competitors (Steam, Honey,  and GOG.com); we asked some of the following questions:

  • How do users shop for deals online?

  • What services are offered and at what price keep people paying for subscriptions?

  • What are the shopping habits of gamers?

    • What resources gamers currently use to find game deals?

    • How many games do users buy per year?, or any particular time of year they buy games?

    • How often are new games released?

  • What are people gaming on: consoles vs. pc vs. streaming?

  • What makes a good review section for products purchased?

Figure 1. Conducting a virtual user interview

Figure 2. Behavioral continuum mapping

The results of this research and user interviews (of which we conducted five) led us to developing our proto persona Gabriel Godoy. We synthesized everything we learned during the research process to model our persona Gabriel.

You can read more about Gabriel below:

Requirements

We began considering the users’ expectations of our product; how they expect the website to function/look/feel. Then it was up for the team to figure out what was required to achieve that. With Gabriel’s goals in mind, we developed a vision statement.

Vison Statement: The new design of Skeleton Key will help users achieve budgeting goals, wish list management, and deal saving by allowing them to view game prices across multiple retailers, track spending, and create wish lists. And with greater organization tools and deal awareness, and without problems like notification spamming, poor algorithm suggestions, and overpaying for a game that they currently experience. This will dramatically improve Skeleton Key’s customer satisfaction ratings and lead to increased purchases of games.

In figure 3, you can see the beginnings of our brainstorming. As a team, we brought each of our ideas for features + aesthetics to the table. We then began building from here, taking small parts from each members’ contributions.

Figure 3. The beginning stages of brainstorming the look/mood/feel as well as features for SkeletonKey.com

Designing & Prototyping

I collaborated with Gio, our team lead, on our style guide; I helped build a color scheme, and consistent sizing + spacing along an 8pt grid. In our first drafts of UI designing we went towards a more retro 8-bit playful style, however we shifted to something more modern and sleek as the end result.

Our biggest difficulty when we first started designing was making consistent components. Instead of building out a design system as a team, we all began to build separate disjointed components. This led to lots of visual inconsistencies as we got further in the design process (inconsistent card width/height, varying icon styles and line weights, too many font use cases, inconsistent color uses). I brought this concern to the attention of our team, and we began resolving these issues by communicating more effectively as a team. We would design together virtually or in person, and we would constantly leave notes asking for, or giving, feedback. Having to course-correct pretty late did lead us to losing some time to fine-tune or work on further elements of the project but, in all, it was a learning experience that made us stronger as a team.

Contributions

I maintained the organization of our design file by:

  • Ensuring color/font styles were made + applied to every element

  • Creating pages/sections and applying consistent name conventions to make design elements easy to find for the team

  • Ensuring consistent styling in buttons, margins, hover states, icon size, etc. across each member’s design sections

  • Applying auto-layout to frames + components to create visual consistency across pages

Additionally, my attention to detail contributed to a consistent look and feel throughout our website. I ensured that component interactions and flows between pages worked smoothly and seamlessly. If fellow teammates were struggling with prototyping an interaction; I would work with them to troubleshoot and resolve the problem. And vice versa, if I needed help I’d meet individually with members to get their help. If someone needed help with sizing/spacing, I advised them and sent them resources. I believe that my biggest assets to the team were: my attention to detail, ability to be a team player, and ability to communicate my own needs and hear out my teammate’s needs.

Conclusion

In conclusion, each member brought forth their strengths and creativity to build Skeleton Key, a video game deal finder.

I learned a lot throughout this 13-week process:

  • The importance of establishing a clear + consistent design system early in the design process

  • How crucial constant team communication is

  • The importance of time and task management

I’ve applied everything I’ve learned throughout my studies to contribute towards a Senior Capstone project I can be proud of.