Allen Boguslavsky // Winter 2016
STEAM WEBSITE REDESIGN
Project Brief
The goal of this project was to redesign the
website for the game website Steam, and consider
any extra functionality or features that can be used
to enhance the user experience.
Although this project was pitched as largely a
visual or aesthetic project, I decided to take it
further by understanding the user base and its
concerns, since I had a good sample size of users.
Research
From looking through the Steam client and asking around
for opinions, I determined that the most important uses of
the website were to advertise games (embedded into the
Steam client), and to explore the users games and personal
recommendations. Both ideas are equally as important.
“You can do so much more with the client - its more
personalised than the website.
ISSUE
A Large downfall of the website is how impersonal it is.
“The website exists solely to let you download the
desktop client.
ISSUE
The website does not give the other user other
reasons to use it.
“The client has all my games - why would I need to use
the website?”
ISSUE
User is more interested in accessing the physical games
they own, rather than browsing games on the website.
“The website is unattractive.
ISSUE
The website is not visually appealing enough to keep
the users attention.
1
2
3
4
sketches
Sketches (low fidelity)
The initial sketch phase consisted of sketching as many ways
to address user problems / use cases as possible. The two
main points of focus were ‘Games Showcase’ and ‘Community
& Me’, which best fit what users seemed to want to see.
Sketches (high fedility)
By the end of the sketch phase, I had two strong directions
that I was hoping to consolidate, which were: an emphasis on
game showcase, and an emphasis on the user and their
profile.
wireframes
Homepage
1
2
3
4
5
6
Full-width featured games
Just displays game banners. The interaction mimics the flipping
of an editorial, with one feature peeling back to reveal the next.
Deals
Highlights the day’s deals; price being very prominent.
Recommendations
Highlights recommendations for the user based on the last or
recently played games, and by friend’s favorites.
Game Search
Search based on genre and category or by direct serach.
New and updated
Highlights the new and updated games.
Footer
Contains copyright information.
1
2
3
4
5
6
Game page
1
2
3
4
5
6
Full-width featured games
The main game graphic displayed, including basic game
information.
Expandable details
Slides open for the user to view more details when they choose to.
Media
A simple slider of game media. When clicked, a lightbox will
display the media on a larger scale.
Reviews
Includes critic and user reviews, as well as accolades.
More like this
Suggests other games similar to this game.
Footer
Contains copyright information.
1
2
3
4
5
6
Game page (expanded details)
1
2
3
4
5
6
Game description
The full game description, alongside key features and tags.
Product information
General product information that includes the genre, developer,
publisher, and release date.
Properties
Details additional properties of the game, such as whether or
not it’s multiplayer, and any compatibility with Steam perks.
Friends who have the game
Displays friends who own the game. In the case that the game is
a co-op, the user will be able to see who they can co-op with.
System requirements
Lists the system requirements for all compatible operating
systems.
Languages
Lists the languages supported by the interface, audio, and subtitles.
1
2
3
4
5 6
visual style
Moodboards
I came up with two possible moods for the visuals. The first
being a more traditional dark ‘gaming’ theme that evokes a
mysterious mood, and a second theme that is more neutral
and has a hand-crafted mood.
Style board
I chose the darker colour scheme visualised in my moodboard,
based on my user base (gamers) and the more mysterious look
and feel it gives.
design
Final design (homepage)
The final homepage design sees a reduction in the quantity
and size of hero image sections, and a more refined slanted
design for the individual game sections.
Final design (game page)
The final game page sees a re-organisation of the reviews and
accolades section, and follows the new slanted structure.
Final design (game details page)
The game details area is for the most part very similar
to that of the wireframes, with a few refinements made.
end