Steam Games Website Redesign
Brief
Steam Games is looking to redesign their website to make it easier for their users to navigate the site.
problem
How can we get users to find the games they want to
purchase quickly?
solution
Organize categories, create filters and simplify search for easier access to video game selections.
Timeline: 2 weeks
Platform: Website
Tools: Pen, Paper, Sketch, Post-its, Adobe Illustrator, Lucid Chart, Airtable, & InVision
Team: Louisa Garcia (me)
My Role: Lead UX / UI Designer
1. Research
BRAND RESEARCH
Steam is a digital distribution platform developed by Valve Corporation,
which offers digital rights management (DRM), multiplayer gaming,
video streaming and social networking services. Steam provides the
user with installation and automatic updating of games, and community features
such as friends lists and groups, cloud saving, and ingame voice and chat functionality.
Heuristic Evaluation
I evaluated the product/website with heuristic evaluation. I used the LEMErS method of: learnability, efficiency, memorability, error management and satisfaction with a rating scale
from 0-4 and 4 being the most critical. I found that efficiency and satisfaction were two most common violations found.
Click to enlarge.
Competitive and Comparison Analysis
With the same process used for the heuristic evaluation, I decided to see how Steam stacked up to their direct and indirect competitors and what I found is that, feature for feature, they just about measured up the same, it was in the design of those features that made the difference. The majority of competitors made the search and checkout streamlined and quick.
SURVEY
After researching the brand, I wanted to see what gamers' habits and behaviors were.
How often do you game?
How much gaming experience do you have?
When do you play online games?
Do you play online with friends?
Card sort
Users sorted categories found on the Steam website into groups they would expect to find them
user persona
Meet Zack Brown.
Zack is a university instructor for game design. After work and on weekends,
he plays online for about 3hrs and divides that play time with friends. Because
time is limited, he tried to get as much game time in before bedtime
Click to enlarge.
“I hate to be the guy who keeps
my friends
waiting online.”
journey map
This is Zack's current journey with Steam Games.
Click to enlarge.
2. Ideation
sketching wireframes
This is where I began my first attempt at figuring out what this redesign could be.
From the card sorting, I organized categories and nested tabs that would make
it easier for Zack to find and purchase the game he wants without delay.
What I learned was that users wanted an obvious filter system on the product page, not a tucked one.
3. Design
High Fidelity wireframes
After testing with my sketched wireframes, I created the high fidelity prototype to test. What I found was that users enjoyed the minimalistic look, and were satisfied to find the items they needed under the store tab.
Current Design vs the Redesign
HOMEPAGE: I organized the content and kept it minimal for easier access to important pages.
PRODUCT LIST PAGE: Gamers, like Zack, had trouble finding the add to cart button so I gave it priority.
STORE TAB: Rather than have separate tabs for each category, I nested the categories into one tab based on what users sorted and used the tabs for other items gamer grouped next to Store.
SEARCH BAR: Most users went straight to the search bar when they knew what game they wanted, so I added an option to quick buy and also a way to browse all games.
SHOPPING CART: The current shopping cart was very distracting, so I took an Amazon approach and kept the task minimal so as to keep users from not purchasing the item.
SIGN IN: When users purchase a game, they need to sign up or sign up, but there was no guest check out for anyone wanting to buy a game for a friend, so I added Amazon pay as an option.
4. Test
testing
High fidelity prototype needs more testing to ensure ease
of use with the redesign and the filter system. Also to test
the increase of sales due to quickness & guest checkout.
Video Demo
I created this demo video of the Steam Games website redesign.
prototype
I used InVision to prototype the website.
5. Iterate
next steps
An integrated guest checkout