ROLE  Concept, Visual

DURATION  February – March 2016

[unex_ce_button id="content_smote2ml6,column_content_132m0gxyx" button_text_color="#ffffff" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="" button_padding="15px 60px 15px 60px" button_border_width="1px" button_border_color="#ffffff" button_border_radius="1px" button_text_hover_color="#ed441d" button_text_spacing_hover="2px" button_bg_hover_color="#ffffff" button_border_hover_color="#ffffff" button_link="/wp-content/decks/lung-steam-deck.pdf" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]PROCESS DECK[/ce_button]

As of February 2015, the game management system Steam boasts over 125 million active users.
 

A dynamic and visually strong web presence promoting the popular game management system Steam. 

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.

01 Understanding

Despite its popularity, Steam's website is dreary and doesn’t live up to its popularity. 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.

“You can do so much more with the client - it’s more personalised than the website.” 

A large downfall of the website is how impersonal it is. 

“The website exists solely to let you download the desktop client.” 

The website does not give the user other reasons to use it.

“The client has all my games - why would I need to use the website?”

User is more interested in accessing the physical games they own, rather than browsing games on the website. 

“The website is [unattractive].”

The website is not visually appealing enough to keep the user’s attention.

02 Design

I chose a darker colour scheme, based on my user base (gamers) and the more mysterious look and feel a darker scheme gives.

03 Solution

The most important uses of the website were to advertise games (embedded into the Steam client), and to explore the user’s games and personal recommendations.

[unex_ce_button id="content_rnd8ncpqg,column_content_o2zl4plhg" button_text_color="#849295" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="" button_padding="15px 60px 15px 60px" button_border_width="1px" button_border_color="#849295" button_border_radius="1px" button_text_hover_color="#2c3137" button_text_spacing_hover="2px" button_bg_hover_color="#849295" button_border_hover_color="#849295" button_link="https://invis.io/3F6KEJYPJ" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]SEE PROTOTYPE[/ce_button]

 

Dominating Visuals 

Beautiful gameplay is an attractive factor for gamers. Game visuals are pushed through page elements such as the homepage hero, deals, and recommendations.

 

Personalised Recommendations 

See what games to try out next, based on recently played games and friends’ favourites.

 

Expandable Details 

View game details when and only when you want to; focus on the game’s first impressions - visuals and reviews - first.
 

Useful Reviews 

Get an idea of how games have fared through user and critic reviews. There are options to upvote and downvote comments to increase the precision of reviews.

steamsteam

04 Fin

This redesign aims to better the aesthetics and simplify the user experience for users of the Steam website.

In taking on this project, I was able to consider the user base and their preferences, and thus break out of my stylistic comfort zone in creating a visual style that is mysterious, strong, and dynamic.

[unex_ce_button id="content_u4qd0hmsh,column_content_50oye6dy0" button_text_color="#ed441d" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="" button_padding="15px 60px 15px 60px" button_border_width="1px" button_border_color="#ed441d" button_border_radius="1px" button_text_hover_color="#2c3137" button_text_spacing_hover="2px" button_bg_hover_color="#ed441d" button_border_hover_color="#ed441d" button_link="/wp-content/decks/lung-steam-deck.pdf" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]SEE THE PROCESS[/ce_button]