Epic Games Launcher

Group 321 (2).png

Epic Games Launcher users want to know that games are actually worth buying before they make a purchase.

Through the seamless addition of player reviews and friends list games, users have what they need without ever having to leave the app.

Project Brief

Context

Epic Games Launcher (EGL) is a popular desktop application used for purchasing and playing video games.

A major problem exists in the gaming industry: Due to a recent number of botched major releases, customers have lost trust that newly released games are worth the purchase.

Goals

  • Research the industry problem as it relates to the Epic Games Launcher.

  • Seamlessly integrate a feature(s) into the Epic Games Launcher to address the established industry problem.

Tools

  • Figma

  • Google Docs

  • Airtable

  • Whimsical

The Design Thinking Process

Empathize

The gameplan

To begin, I defined my research goals to compile the demographics of Epic Games Launcher, see what competitors are doing, and understand the perspective of the individual user.

The digital marketplace

Following my plan, I conducted market research to uncover insights about the current state of the gaming industry.

Getting competitive

I also took a look at what features competing game launchers and stores (both direct and indirect) had on offer to better understand what the overall gaming community was accustomed to.

Character creation

To give myself a starting point for a user persona, I created two possible, or “provisional” personas based on my research.

Story-driven

In order to better grasp the goals, needs, motivations, and frustrations of users, I sat down and had a conversation with several EGL users. These conversations were prompt-driven, allowing me to collect insights from stories rather than asking questions directly.

Detective mode

I used a method known as “empathy mapping” to identify patterns of similar themes from the interview transcripts, which I could then translate into needs.

Character upgrade

By combining market research, provisional personas, and user needs, I produced a final “persona”, or a prototypical user that embodies my research - Jake.

Jake is someone that I can refer to when making design decisions - if it works for Jake, it works for the design.

Define

First person perspective

User needs are converted into statements that define the space for which to design solutions. This is done using “Point of View” and “How Might We” statements to ensure cohesion from insight to problem statement.

Multiplayer

By combining the user needs from my research, business goals of EGL, and the technical considerations of creating a desktop app, I illustrated a clear overview of objectives across the project ecosystem.

Ideate

Psychic powers

Using the “How Might We...” statements as prompts, I produced initial solutions/features that could then be more closely examined and prioritized - both on my own and with a group.

Group Brainstorm (1) 2 (1).gif

Making sacrifices

Referencing user research, the original project brief, indirect competitor analysis, and the brainstorms, I derived a list of prioritized features needed to constitute a minimum viable product (MVP), or in this case, a minimum viable feature-add.

Features like a user review system and sorting/filtering by review score must be included. A feature like personally recommended games can wait.

I should consult the map

Referencing the MVP features, I created a blueprint for where my added features would fit into the structure of the existing app.

Let the power flow through you

Task Flows and User Flows define the expected path through the site, as users seek to accomplish specific goals.

As I implement features into the design, I can refer back to these flows to ensure that each feature empowers the user to do what they intend to do.

What is my purpose?

Knowing what tasks Jake would be looking to accomplish on the app, I created an in-depth explanation of every feature and its purpose.

Building blocks

With data-driven structural planning finished, the added features were able to start taking form, beginning with low-fidelity sketches of page layouts, based on the existing design system of the EGL app.

Prototype

#mood

Knowing that I had to recreate the app in Figma, I started with a mood board to better familiarize myself with the visual design of the EGL app.

Adding features

After recreating the necessary pages from the flows, I seamlessly integrated V1 of my prioritized features into the design.

In the next section, you can see how these features would be iterated upon as a result of testing and feedback from other designers.

[V1] Recently Recommended Games

[V1] Friends List Game Status (Now Playing & Recently Played)

[V1] Filter/Sort by Player Recommendation

[V1] Player Recommendation System (Overview)

[V1] Player Recommendation System (Submission)

Spinning webs

Using Figma, I created a series of connections necessary to the task flows. This prototype is an interactive environment in which to test the competency of the design.

Test

Playing the demo

In my usability testing plan, I chose to use the “Think Aloud” method. This allows for more raw information to be collected from participants as they narrate their thoughts while they complete scenarios (like the example below) based on the expected task flows.

Haptic feedback

To extract actionable insights from the testing, I used an Affinity Map.

Similar to the Empathy Map from the first phase, actions and feedback were transcribed, organized into clusters of various pain points, and translated into recommended design changes.

Level up

Based on the revision recommendations derived from testing, as well as suggestions from fellow designers, I revised the added features.

[V2] Recently Recommended Games - Consistent color for rating charts

[V2] Filter/Sort by Player Recommendation - “High to Low” added to sorting option

[V2] Player Recommendation System (Overview) - Consistent color and hover-over information for tags

[V2] Player Recommendation System (Submission) - Consistent tag color and full-fill selection

Branding

Check the kit

Building upon my style tile, I included every modular element of the app, including my own additions, in a centralized “UI Kit” to maintain the consistency of elements.

Reflections

Further testing needed

Although my updates to the rating system UX were based on testing data, the process feels unfinished without another round of testing to solidify that the changes were appropriate.

Existing design system

Working within an existing design system was enlightening. Less room for creativity, but clear visual guidelines to work within. It’s also a more realistic design case, in that most real-world projects involve updating or iterating an existing design as opposed to creating something completely new.

Next Steps

Virtually a reality

The new features can now be fully handed off to developers to be implemented within the existing app.

Because the design was created in Figma, developers can also use the application to gather the necessary resources and code. I can also collaborate with developers directly through the tool throughout the handoff process.

Other Work

 

Bouncebook

Stay active without waiting in line.

Group+311+(3) (1).png
 

Carly’s Kitchen

Getting hungry? Carly can help.

Group+322+(4).png