redesign

- Redesign the user interface of Steam game website

Steam is a video game digital distribution service platform developed by Valve Corporation.  As a gamer, I have been using steam for many years. I saw some improvements in UI over time, but still, I think it can be better in many places.  Therefore I decided to redesign some of their pages in order to build a better user experience.

Date: Sep.2019

Type: Course project: User experience  and user interface

Place: Brown University

Project by Yutong

01 Finding Problems 

 

In this project, base on the main function of the Steam Game Platform,  I choose 4 pages to redesign:

▸ Home page

▸ Game detail page

▸ Community page

▸ Personal information page

 

I use heuristic evaluation to analyze the usability of each page. 

Overall rate base on the 10 heuristic evaluation:

★★★★☆ Visibility of system status 

★★★★☆ Help users recognize, diagnose, and recover from errors 

★★★☆☆ Error prevention 

★☆☆☆☆ Consistency and standards 

★★★☆☆ Match between system and the real world 

★★★★☆ User control and freedom 

★★☆☆☆ Recognition rather than recall 

★★★★★ Flexibility and efficiency of use 

★☆☆☆☆ Aesthetic and minimalist design 

★★★★☆ Help and documentation 

02 wireframe

home page

game detail

community

Personal information

Orignal website

 

1. Home page

original

2. Game detail page

original

3. Community page

original

4. Personal information page

original

5. Navigation flow chart

03 User testing

 

The use of the Wizard of Oz evaluation allows me to get a sense of how someone will use the interface without actually developing the interface.

User 01 : Joyce

User 02: Aliza

04 reDesign

 

Base on the user testing in part 03, I then redesigned the wireframe I made earlier.

1. Home page

2. Product detail page

3. Community page

4. Personal information  page

05 Visual

 

1. Overall style: Flat design

The application of flat design not only reconciles the goals of minimalism and skeuomorphism, it also is uniquely adaptable to usability considerations. By shedding unnecessary styling, it makes for speedier pages, cleaner code, and easy adaptability.Layout, Visual, and Text lectures. 

2. Design Choice

3. Responsive Redesign 

    Annotated mockup of the information page

S   h   e   n     u     o   n   g