Heuristic Evaluation
ABOUT THE PROJECT
Improving a video game digital storefront
The experience users have with a company’s digital product can have a big impact on how they feel about that brand. During some preliminary research, we found a reoccurring dissatisfaction amongst users who were using STEAM the digital app. One had to simply look at the reviews and forums.
We walked through and examined a purchasing journey a brand new user would go through purchasing a video game - we identified the usability issues and proposed a redesign.
Project
Project: Heuristic Evaluation @ BrainStation.
Timeline: 2 Weeks.
Role: Evaluator, Designer.
Platform: Desktop.
Tools: Figma, Adobe Photoshop.
Heuristic Evaluation
Buying options & CTAs are not consistent with other websites
Consistency & Standards
“Add to cart” button doesn’t appear within the overview of the product which is standard for most familiar websites such as Walmart, Amazon, etc.
Severity Rating: 3/4
Major usability problem: important to fix, should be given high priority
Recommendation:
Move “Add to cart” CTA underneath product overview
Page contains too much visual clutter & competing areas of attention
Aesthetic & Minimalist Design
There is a lot of visual clutter on the page with too many areas competing for attention. The buying options could be simplified and a visual hierarchy established to allow the user to take the desired action more quickly.
Severity Rating: 3/4
Major usability problem: important to fix, should be given high priority.
Recommendation:
Simplify buying options
Move pricing & % off location
DLC & Bundles should clearly communicate what they offer the user
Match Between System & Real World
The language “bundle” & DLC has the ability to cause confusion for new & amateur gamers as “DLC” is primarily gaming terminology. Each DLC shown should clearly communicate what they offer to the customer so they can take the best action that serves them.
Severity Rating: 3/4
Major usability problem: important to fix, should be given high priority.
Recommendation:
Add copy that communicates what these DLCs are, and why they are being applied at checkout
Image & price are inconsistent throughout each step of the buying journey
Consistency & Standards
Purchase price & game image is inconsistent across the buy flow for this game causing the user to potentially double check their selection or re-add the item to card.
Severity Rating: 3/4
Major usability problem: important to fix, should be given high priority.
Recommendation:
Update game image & pricing to be consistent throughout purchase journey
“Join Steam” is not consistent with other familiar websites “Sign Up” pages
Consistency & Standards
When attempting to purchase, the user is redirected to a sign in page with a simultaneous request to “Join Steam”. The page is disjointed, unnecessary, and the contrasting information requested is confusing to the user.
Severity Rating: 3/4
Major usability problem: important to fix, should be given high priority.
Recommendation:
Move sign in to the center of the page
Add “Create account” or “Sign up” CTA
Increase in memory load stopping user flow
Recognition Rather Than Recall
After user verifies email, they are directed to this page that requests the user to return to a phantom account creation window to complete account registration and suggests to “safely” close window. But upon page closure, these actions leave the user without direction.
Severity Rating: 3/4
Major usability problem: important to fix, should be given high priority.
Recommendation:
Automatically login in the user after they verify their account
OR
Add a CTA to redirect the user back to the sign in page
Most importantly, we observed navigational difficulties that appeared to have a significant impact on the users ability to find and purchase a newly released game from a franchise. We noticed that there was a repetitive usability issue, Consistency and Standards, that kept users from having a smooth buying experience. This was prevalent when moving from page to page where the game image kept changing, and the pricing format changed with minimal explanation. Users would constantly have to stop and re-check their inputs to ensure they are not making errors. While users often struggled with the navigation and information architecture throughout the site, their problems were more frequent as obstacles that slowed them down in completing the task of purchasing the product rather than being prohibited from the task completion. Fortunately, much of the information barriers, navigation, visual design, and cognitive model difficulties that were observed during the heuristic evaluation, may be easily addressed.
Visual Identity
We tried to innovate in terms of concept and visual design, but we needed to respect Steam’s brand and guidelines to make sure we were not breaking any of their design system’s rules.
TYPOGRAPHY
COLOURS
Redesign
Product Page
Consistency & Standards:
Moved “Add to Cart” button to the right of trailer
Added “Buy Now” & “Add to Wishlist” CTA based on competitive research
Updated trailer size to fit within column spacing
Expanded margins from a “block grid” to a “column grid”
Moved game title to the right and added H1 textile
Applied 8-pt grid to all elements to have a consistent visual hierarchy
Aesthetic & Minimalist Design:
Removed all non-essential copy & buttons to reduce visual clutter
Product Page (DLC Bundle Info)
When a user scrolls down on the product page they find the Downloadable Content (DLC) for purchase.
Aesthetic & Minimalist Design
Utilized competitive research and rebuilt the DLC Bundles into cards which simplifies the information & reduces visual clutter
Removed percentage savings pricing and added price callouts to each card
Removed all non-essential copy & buttons to reduce visual clutter
Expanded margins from block grid to column grid
Applied 8pt Grid to all elements for better visual hierarchy
Shopping Cart Page
Consistency & Standards:
“Purchase for myself” CTA was updated to “Checkout” as a primary CTA to address consistency & customer expectation
Utilizing competitive research, purchase summary was added to the right of item details
Removed all non-essential copy to reduce visual clutter
Expanded margins from block grid to column grid
Applied 8pt Grid to all elements for better visual hierarchy
Error Prevention:
Enabled “Purchase as a Gift” CTA as a secondary CTA
Moved “Continue Shopping” CTA as a tertiary CTA to allow user to “go back” & continue to browse
Email Verification Page
Visibility of System Status:
“Log in Now” CTA was added to redirect user to sign in page addressing Visibility of System Status heuristic
A green check mark icon was added for visual feedback of email verification success
Copy was moved to centre of page to grab the users attention and become the main action for the user
“Email Address Verified” copy was updated utilizing H1 textile
Applied 8pt Grid to all elements for better visual hierarchy
Sign In/Sign Up Page
Consistency & Standards
“Join” Steam” image, copy, and button were removed with a “Create Account” secondary CTA added below “Sign In” CTA to address Consistency & Standards heuristic
“Sign In” form was moved to the centre of the page to draw users attention & be in line with competitors websites
Form field colour was updated to address accessibility concerns with contrast
“Sign In” copy was updated to H1 textile
Applied 8pt Grid to all elements for better visual hierarchy
Feedback & Insights
Reddit - Most Common Request for Steam’s Website
When doing research we came across this Reddit post, which has been upvoted by 4101 people.
As we found this after we already redesigned our screen, it is nice to know that what we developed is a real need & request from users.
