Blizzard Games Page
Re-Design
Web Design, Mock-Ups, Visual Rhetoric
Take a Look!
Challenge
Assess the shortcomings of an outdated page and adapt the content in a way that emphasizes the importance and quality of a digital product
Solution
A simplified layout and UI that is consistent with other parts of the site and makes it easy for users to find exactly what they want, while also giving information about each product
Results
Each section of the page feels important and encourages the user to continue learning or purchase the product
Why the old page didn't work
This UI seems to be from an older version of the larger Blizzard site, as the Games page doesn't match the cleaner aesthetic. Additionally, small cards all aligned in little rows doesn't really communicate how diverse and grand Blizzard games are. Instead, it looks like they're all unimportant and unoriginal.
Also, there's no mobile site.
User Interface Sketches
At first, I thought I could save the card idea by making the cards themselves more interesting, but it didn't solve much. Then, I tried having the art be the main focus of each section so that the characters could make the games more identifiable.
Visual Rhetoric
Since the main goal of this project was to make the games look more important, I chose to use a few visual rhetoric strategies to help me convey that message.
Every segment features a prominent character's high-quality 3D rendering, either from in-engine or from a cutscene. This allows the user to quickly identify each game if they've seen it before. Additionally, they all satisfy the rule of thirds with the titles.
Speaking of the titles, I chose to match the large, bold, sans-serif font used earlier in the site to make the titles appear grand and important
Adapting for mobile
Since the old page didn't have a mobile interface, it was important that I implement one into the new design. Luckily, the art-centered layout transitioned well to mobile with the omission of the games' descriptions (which can be found on the game site anyway). The nav bar at the top was condensed into a 'hamburger' menu and the Battle.net link changed to its logo.