Steam, with a Gender-Neutral
Approach
As part of my university’s final project, I conducted a research on the gender-neutral design topic in Steam,
a service platform published by Valve that provides various services for gamers worldwide in their gaming experience.
Client:
Steam
(University Final Project)
Product:
Desktop App
Role:
UX Designer
Time:
Aug 2020 - July 2022
Overview
Background
There is a gender bias towards men
in IT field which causes overall
interaction designs in digital products
to be masculine. This gender bias
negatively impacts women by the
loss of ambient belonging
female users experience when
they use a digital product.
Why Steam?
Gaming community is an entertainment community
which is known to be male dominated. In comparison,
59% of PC gamers are male, while 41% are female.
However, only 4% of these female gamers use Steam
(Galyonkin, 2015).
Problems
How do we design a good
gender-neutral interaction design
for Steam?How do we evaluate a gender-neutral
interaction design for Steam?
Goals
Design a gender-neutral
interaction design for Steam.Evaluate the gender-neutral
interactions design for Steam.
Responsibility
Conducting interviews, low and
high-fidelity prototyping, conducting
usability studies, and draw
conclusion for this research project.
Methodology
I conducted this research using User-Centered Design (UCD) as the main framework, which can be broken down
into 5 steps as follows.
1
Plan
2
Define
3
Specify
4
Design
5
Evaluate
In addition to UCD, I also analyzed 5 communication aspects in design that are commonly used
when designing for a specific gender preference.
Image
Color
Layout
Mood
Tone
Define and Specify
User Research
Summary:
User research was conducted using questionnaire to understand and empathize with the user. Based on
the questionnaire, we determined 2 user groups, male and female Steam users, aged 20-24 years old.
Early assumption towards this research matched with the results of the questionnaire. Both user groups
agreed that Steam has a masculine feel in the design. Both users also graded Steam’s SUS score low,
indicating a problem from Steam’s usability aspect.
Pain Points
After gathering and analyzing feedback from users, I noticed that in the current version of Steam, both
user groups (male and female) raised an issue regarding Steam’s overall UI design. While male user group
points out how “outdated” the interface, female user group points out how the interface can be
“overwhelming” and “complex”. What’s more interesting was both user groups didn’t raise any issue
regarding Steam’s functionality as a platform.
I simplified their pain points into 3 categories:
1
Visuals
Steam doesn’t have a good looking
user interface design.
2
Personalization
The list of video games sold
in Steam does not match the
user’s preference.
3
Accessibility
The category feature
in Steam doesn’t help
the user in finding
the games they want to play.
UI Analysis
Using Steam’s UI during the time of this research, I analyzed the 5 communication aspects used
in Steam’s UI. The result matches with the design theory regarding masculine design,
further reinforcing the feedback from users regarding Steam’s overall design vibe.
Image
Sharp, geometric shapes. Gives off
a metallic vibe.
Color
Mostly blue and black hues, sharp color
saturation
Layout
Components are laid out vertically and centric.
Tight space in between components.
Mood
Metallic, modern, minimalistic.
Tone
Modern and direct. Formal and
comprehensive tone of voice
Feature Analysis
I also conducted a feature analysis in Steam to determine which features are frequently
used by users. After gathering the data, I narrowed down the features that serves
as the scope for this research into 2 features.
Steam Store
Buy a video game
Filter video games being
sold in Steam
Steam Library
Manage video game
collections
Play video game
Scope
User
Male and female Steam users
Functionality
Steam Store and Steam Library
Development
Steam PC platform
Research Method
Literature Study
Male and female Steam users
Questionnaire
39 male respondents, 12 female respondents
Direct Observation
Steam PC platform
User Needs
Visuals
An easy to use and satisfying
user interface for Steam
Personalization
View the video games that fits
the user’s preferences.
Accessibility
View the categories in Steam to
help users finding the games they want to play.
Usability and UX Goals
Effective to Use
Quantitative metric: Completion Rate
Easy to Learn
Quantitative metric: Single-Ease Question (SEQ)
Satisfying
Quantitative metric: System Usability Scale (SUS)
Giving Steam a Makeover
Digital Wireframes
I created the digital wireframe directly in Whimsical. Since the focus of this research is redesigning
Steam’s UI, the wireframe serves as a “sketch” of the UI before I implement it as a mockup.
From left to right: wireframe for Steam Library, Steam Store, and User Preference
Mockups
From the wireframes, I made the mockup for the redesigned version. Below is the
comparison between the original design at that time (left) and the redesigned version (right)
Steam Library
Steam Store
Steam Store - Preferences
You can check out the prototype here!
(make sure to check “Fit Width” and view it in full screen)
Colors, Typography, and Design Guideline
Before designing, I took time to create a new, simple “design system” for Steam. It was quite difficult
at first because Steam does not have a publicly available design system that i can look at. However,
they did have a brand guideline here, which contains their brand color. I decided to use said
color and adopted Material Design to create the design system used for this research.
The main reason I chose Material Design compared to other design system is that aside from
its flexibility and ease of use, Material Design’s design principles coincidentally aligns
with gender-neutral design principles.
Typography sheet used in this research, using Lato and
Roboto as the typeface
Color palette used in this research, created with
Material Design.
Evaluation
Usability Testing Results
9 Participants
5 Males and 4 Females
Evaluation Procedures
Introduction and briefing
Preliminary interview
Exploration
Task completion
Post-interview
Post-questionnaire
Metrics
Completion Rate
SEQ
SUS
User Testing
Findings summary:
Results showed positive feedback from participants towards the high-fidelity prototype. Qualitative
feedback showed that users like the proposed high-fidelity prototype, while quantitative feedback showed
high scores for each usability and UX metrics, such as completion rate, SEQ, and SUS. In addition, both
participant groups said that the proposed high-fidelity prototype design has a neutral vibe to it.
Usability and UX Metrics
Effective to Use
Both participant groups
achieved 100% completion rate
based on 4 tasks given.
Easy to Learn
Both participant groups achieved
high average scores for SEQ,
6.7 (male) and 6.25 (female).
Satisfying
Both participant groups achieved
high average scores for SUS,
92.5 (male) and 81.25 (female).
Conclusion
Summary:
UCD can be a viable option to use when designing a gender-neutral UI for Steam. This is proven by
the usability and UX goals achieved during the usability testing of this research.
During the design implementation process, Material Design is a viable option for a gender-neutral
design for Steam based on the feedback of users after usability testing.
Going Forward
Next Steps
1
Project can be developed further using
more female user samples.
2
Other features, such as Steam Community,
can be developed further using
gender-neutral design concept.
Impact
I hope that should this project would be
implemented, Steam would have an increased
user engagement, especially in female users.
Women has been an underrepresented user group
in Steam’s user base. As video game starts to
become more mainstream, Steam should consider
whether or not their design has included every
possible user base.
What I Learned
Gender-neutral design (with UCD) could be
an alternative solution for an effective,
easy to use, and satisfying UI for both
male and female users.
