top of page


- 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

屏幕快照 2019-12-17 下午12.36.42.png

home page

game detail


Personal information

Orignal website


1. Home page

屏幕快照 2019-12-17 下午1.31.57.png
屏幕快照 2019-12-17 下午12.50.03.png

2. Game detail page

屏幕快照 2019-12-17 下午1.32.04.png
屏幕快照 2019-12-17 下午12.50.27.png

3. Community page

屏幕快照 2019-12-17 下午1.32.09.png
屏幕快照 2019-12-17 下午12.50.37.png

4. Personal information page

屏幕快照 2019-12-17 下午1.32.15.png
屏幕快照 2019-12-17 下午12.50.44.png

5. Navigation flow chart

屏幕快照 2019-12-17 下午1.14.41.png

03 User testing

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.

屏幕快照 2019-12-17 下午2.23.08.png

User 01 : Joyce

屏幕快照 2019-12-17 下午2.23.01.png

User 02: Aliza

04 reDesign


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

1. Home page

屏幕快照 2019-12-17 下午2.23.16.png
屏幕快照 2019-12-17 下午2.23.23.png

2. Product detail page

屏幕快照 2019-12-17 下午2.23.29.png

3. Community page

屏幕快照 2019-12-17 下午2.23.38.png

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. 

屏幕快照 2019-12-17 下午3.03.24.png
屏幕快照 2019-12-17 下午3.03.31.png

2. Design Choice

屏幕快照 2019-12-17 下午3.03.39.png

3. Responsive Redesign 

    Annotated mockup of the information page

bottom of page