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