Epic Games Launcher
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.
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.
Carly’s Kitchen
Getting hungry? Carly can help.