The team redesigned the Steam gaming interface to improve the checkout process and make it more accessible. Through user research, they found the current checkout involved excessive steps and screens. Their redesign consolidated information, reduced clicks to purchase a game from 20 to 11, and reduced navigation screens from 7 to 1. User testing found the collapsible navigation and hover features provided needed information more easily. Next steps include further accessibility testing and improvements to cart and payment flows.

1. Iterate UX
Challenge
Presentation
TEAM 8
Redesigning the Steam gaming Interface
with consideration for accessibility

2. Team 8
Tanika Roberson
UX Designer
Michael Onwuchuruba
UX Designer
Ashley Cooper
Mentor
Christina James
UX Designer

3. The Challenge
Topic Redesigning the Steam online PC gaming store
front’s gaming interface with consideration for
accessibility
Problem Statement A PC Gamer who uses Steam to purchase games
feels frustrated about the excessive steps during
the checkout process
Goal Statement Our redesign of Steam’s checkout process will let
users find and purchase games more eiciently
which will aect all users by removing redundant
screens and optimizing the process of finding
specific games. We will measure eectiveness by
comparing the time to check out for finding specific
games.

4. Design Phases
Research
Learned about user
needs and their pain
points
Define
Create point of view that is based
on user needs and insights
Ideate &
Prototype
Brainstormed and
came up with creative
solutions and built a
representation of a
few of our ideas
Testing
Returned to the user and
tested our ideas for
feedback

5. RESEARCH
Artifacts: Survey, Competitive Analysis, Heuristic
Evaluation
01

6. Findings based on user survey results
Age
25-34 (46.7%)
35-44 (23.3%)
18-24 (23.3%)
Income
<$20,000 (30%)
$50,000-74,999 (23.3%)
Frequency of Steam Usage
A few times a month (53.3%)
Daily (30%)
0-2 hrs per day (70%)
2-4 hrs per day (16.7%)
Who Are Our Users Gamers?

7. What Are Their Needs & Pain Points
Learned about our users:
● Wants
● Typical uses of the platform,
● Challenges/successes
while on the platform
● Work-arounds to overcome
challenges
● Processes/steps used to
purchase a game
Affinity Map

8. What Are Their Main Interactions
● Accessing, buying and
downloading games
● Managing game downloads
● Wants control over online
features
● Avoid using the site when faced
with challenges
● Variety of content
Findings based on site heuristic evaluation and user survey results
Current Steam homepage

9. How Does The UI Present Content?
Current Steam homepage

10. Evaluating User Interface
● Every possible page
navigation is visible in a
scrolling segment
● Similar pages not being
combined
● 4 Independent
lists in view (3 non-collapsible)
● Inconsistent brand identity
on certain pages
Solutions
● Move Left sided list
(recommendation, discovery,
browse, etc.) inside the
floating list
● Make top navigation a left-sided
extender menu
● Add search function on header
● Main Navigation/Header
should stick on scroll
● Consistent brand identity
● Easily accessible high yield
information
How Does The UI Present Content?

11. What Are The Competitors Offering Users?
Competitive Analysis

12. DEFINE
Artifacts: Archetype, Task Analysis
02

13. What Are The User’s Core Needs and Behaviors?
Archetype

14. Problem Statement
Nick is a casual PC Gamer who needs
an easily navigational way to find sales
and download games because the
current system is frustrating and full
of excessive steps.
Problem statement based on results from ainity mapping, task analysis, and
evaluating information architecture:.

15. What Are The Steps to Buy A Game?
Steam User Flow
Our User Flow

16. IDEATE &
PROTOTYPE
Artifacts: Sketches, Low to Mid Fidelity
Wireframes, Style Guide, Mockups,
Prototyping
03

17. How We Solved
Our User’s
Problems
Based on the discoveries
from challenges listed in
the survey, our task
analysis, and our user’s
core needs/behaviors, we
focused on these areas:
● Homepage
● Search Feature
● Game Details Page
● Checkout Page
Wireframes
Sketches

18. What Solutions Did We Implement?
● Created and applied style guide.
Reorganized UI to prevent content
overload
● Reduced user clicks from 20 to 11
to quickly purchase 2 games
● Reduced screen navigation
from 7 to 1 for purchasing 1 game
Default navigation list is collapsible
and user can expand
PROBLEM: Need easily navigational way to find sales and download games because the
current system is frustrating and full of excessive steps
● Content overload
● Excessive steps to
purchase a game
● Every possible page
navigation is visible
in a scrolling segment
USER PAIN POINTS: PROPOSED SOLUTIONS:
Style Guide

19. Current Steam Design Our Redesign
Steam Homepage
Steam Search Feature
Our Homepage
Our Search Feature

20. TESTING
Survey, Competitive Analysis, Heuristic
Evaluation
04

21. What Was The User’s Opinion of Our
Solution?
Performed remote user testing with 4 users to evaluate our solution and uncover any
problems/opportunities
User Quotes
● “Collapsible left categories is
so much beer than 50
dierent random things”
● “The Hover feature has all the
information I actually need”
● “I think this might be faster and
I love the color tag system”
● “The collapsible bar should
save state on exit of steam”
Our prototype: Steam homepage

22. Next Steps
Design and
Implement cart
functionality
and payment
flow/screen
Screen for and
interview users
who use accessible
features in gaming
Design and test
accessible
design system
across app

23. Thank you for watching
Click on our pictures to connect with us on LinkedIn
Tanika Roberson
UX Designer
Michael Onwuchuruba
UX Designer
Ashley Cooper
Mentor
Christina James
UX Designer
Q & A