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 eiciently
which will aect all users by removing redundant
screens and optimizing the process of finding
specific games. We will measure eectiveness 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
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
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 ainity mapping, task analysis, and
evaluating information architecture:.
15. What Are The Steps to Buy A Game?
Steam User Flow
Our User Flow
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
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 beer than 50
dierent 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