Steam

Add-on Feature

Working within strict design constraints to enhance an existing product's value

Objective

To strategically add value to an existing digital product by introducing a new feature while operating under the constraint of preserving all existing branding and visual identity within a defined time frame.

This challenge focuses on innovating within established design parameters to improve user experience and functionality without altering the brand's core aesthetic or style guidelines.

Team

  • Solo Project

Duration

  • 77 Hours

Tools

  • Figma

  • Canva

  • Zoom

My Role

  • Research

  • Define

  • Design

  • Testing

Overview

Even with published system requirements, many users still ask "Will this game run on my computer?" or "Is my computer good enough?"

For non-technical users, determining whether software will run smoothly on their machine can be difficult and time-consuming. This often results in disappointment and product refunds.

Solution

Create a ‘device performance rating’ feature that provides users with a clear assessment of how well their system will run specific games or software, eliminating guesswork and technical complexity.

Skip to Prototype

  • Competitive Analysis

    User Interviews

I began my research by analyzing competitor products through a comprehensive SWOT analysis, documenting their strengths, weaknesses, opportunities, and threats while identifying accessibility features and gaps.

My findings revealed that competing desktop applications offered very limited accessibility settings, while Steam provided extensive user accommodations including adjustable chat text sizes, customizable library display options, and adaptive icon scaling based on monitor configurations.

Competitive Analysis

Click to view full image

I interviewed 6 regular Steam users to understand their game and software purchasing habits, with the objective of identifying ways to reduce disappointment and refunds caused by poor system performance.

User Interviews

Purchase Drivers

Key factors included gameplay enjoyment, rich storylines, multiplayer functionality, and game lifespan.

Checking System Requirements: High-End Systems

Users with mid to high-end systems rarely verify system requirements before purchase.

Gaming Performance is Paramount

All participants agreed that gaming performance is crucial.

Checking System Requirements: Low-End Systems

Users with low-end systems consistently verify system requirements before purchase to ensure compatibility.

Insights

Primary Usage

Steam is used primarily for gaming and social purposes

Performance-Based Refunds

At least 3 participants refunded games, claiming poor optimization by developers.

How might we empower users with low-end computers to confidently play their desired games by providing a tool that both accurately predicts performance and filters out unnecessary technical details from system requirements?

Problem Statement

  • Personas

    Storyboard

    Feature Set

    Sitemap

    User Flows

The two personas I developed represent a power user and a casual user, each with distinct goals and needs that align with the primary user groups who would benefit most from this feature.

Personas

Feature Set

I envisioned this add-on as an optional feature that users could choose to utilize, accessible across all Steam products regardless of ownership status. These core requirements became my primary development focus. I initially named the feature System Requirements Rating but later refined the naming for better clarity.

Click to view full image

User Flows

I created user flows to demonstrate how users matching my personas would interact with this feature. The process includes an initial opt-in step, followed by feature access from either the product page or user library. Users can opt-out at any time if the feature no longer meets their needs.

Click to view full image

  • Low-Fidelity Wireframes

    Mid-Fidelity Wireframes

    Branding

    High Fidelity Wireframes

Through rapid sketching and using user flows and Steam's existing interface as references, I strategically positioned the new feature within key pages for optimal user accessibility.

Low-Fidelity Wireframes

  • Store Front/Home

  • Product in Store Page

  • Product in Owner’s Library

  • Opt-In/Opt-Out

Mid-Fidelity Wireframes

I focused on screen structure, ensuring optimal positioning and spacing. The feature would be housed within Steam Labs, where upcoming features are introduced for users to explore and test.

  • Feature Home - Steam Labs

  • About/Opt-In

  • Terms of Service

  • Start Scan

  • Scan Pass

  • Scan Fail

  • Opt-Out

I underestimated the complexity and detail density of Steam's interface, which proved time-consuming to replicate accurately.

Consequently, I focused on creating the most essential screens needed to effectively test the core feature functionality, prioritizing quality over comprehensive coverage.

High-Fidelity Wireframes

  • Steam Labs - Feature Add-on

  • About/Opt-In

  • Terms of Service

  • Start Scan

  • Scanning

  • Scan Complete

  • Feature on Home Screen

  • Feature on Product Page

  • Opt-Out

  • Opt-Out Complete

  • Usability Testing

    Iterations

    Reflections/Next Steps

    Prototype

I conducted usability testing with 5 participants using a Figma prototype for the System Compatibility Tool feature. Participants completed three key tasks:

  1. Navigating to the feature and signing up

  2. Assessing system performance for a specified game

  3. Opting out of the feature.

The tool received high praise from participants, described as "highly-valued" and "intuitive." Tasks 1 and 2 achieved a 100% success rate, demonstrating strong core functionality.

However, the opt-out process lacked clarity, forcing users to rely on intuition and guesswork. Additionally, the sign-up process received mixed feedback, indicating a need for improved clarity and user experience.

Usability Testing

Key Successes ✅

  • Core Value Proposition: Users immediately understood and appreciated the automatic system compatibility assessment, recognizing its value in eliminating manual requirement checking.

  • Intuitive Interface: Users consistently found the compatibility ratings displayed on game pages to be simple, clear, and easy to understand.

  • Enhancement Opportunity: Users expressed interest in more detailed compatibility information, such as side-by-side spec comparisons and failure explanations, viewing these as valuable additions rather than critical gaps.

Critical Issues to Address ⚠️

  • Opt-Out Process Failure: Users struggled significantly with the opt-out mechanism (average ease: 5.3/10, with one user rating 1/10 and requiring assistance). The process lacked a clearly labelled, dedicated exit option separate from the sign-up flow.

  • Sign-Up Process Issues: The on-boarding experience proved problematic for many users (average ease: 6.6/10) due to confusing layouts, unclear interface elements, and excessive text content.

  • Feature Discoverability: Some users experienced difficulty initially locating the feature's entry point within the Steam interface.

I addressed the most critical usability issues identified during testing, creating a comprehensive change log that documents all design revisions, rationale for changes, and implementation details for future reference and iteration cycles.

Revisions

NavMain
Change PROFILENAME to PROFILE

STEAM_STORE_HOME_HIFI
Change font colour to #32A7EB for ‘System Compatibility Tool (New)’ in sidebar Hardware for higher visibility
Capitalized each word in the banner for ‘Try The New System Compatibility Tool’

STEAM_LABS_HIFI
Update NavMain component to use Store_rounded variant
In Card1 frame:
Add text above image ‘System Compatibility Tool’
Change vertical gap from 11 to 0
Shortened description text

Change Log

  • COMPATIBILITY_TOOL_INFO_PAGE_OPTIN_HIFI
    ButtonCard1
    Change button text to ‘Opt In & Scan Hardware’
    Content
    Removed some body text for better readability

    COMPATIBILITY_TOOL_HARDWARE_SCAN_HIFI
    Change description for hardware scan

    COMPATIBILITY_TOOL_HARDWARE_SCAN_COMPLETE_HIFI
    Change description to a step-by-step instruction on how to use the tool
    Change button ‘Done’ to ‘Go to Store’
    Update NavMain component to use Store_rounded variant

    STEAM_STORE_HOME_HIFI_TOOL
    Change banner text to ‘Opt Out Of System Compatibility Tool’
    Change font colour to #32A7EB for ‘System Compatibility Tool (New)’ in sidebar Hardware for higher visibility

    STEAM_LABS_HIFI_OptOutLanding
    Use updated frame for ‘System Compatibility Tool’ with added text. See STEAM_LABS_HIFI change.
    Change button text to ‘Opt Out of System Compatibility Rating Experiment’

    COMPATIBILITY_TOOL_HARDWARE_SCAN_OPT_OUT_HIFI
    Updated description text with changed paragraphing for better visibility

    COMPATIBILITY_TOOL_HARDWARE_SCAN_OPT_OUT_COMPLETE_HIFI
    Change button ‘Done’ to ‘Go to Store’

⚠️ Problem (Figure 1):

Some users experienced difficulty initially locating the feature's entry point within the Steam interface.

✅ Solution (Figure 2):

Enhanced feature visibility by highlighting it in the sidebar and standardized the feature banner with proper capitalization for visual consistency.

Figure 1 - Original

Figure 2 - Revision

⚠️ Problem (Figure 3):

The on-boarding experience proved problematic for many users due to confusing layouts, unclear interface elements, and excessive text content.

✅ Solution (Figure 4):

Updated button text to clearly indicate opt-in and hardware scan actions.

Reduced overall text content to improve readability.

Figure 3 - Original

Figure 4 - Revision

⚠️ Problem (Figure 5):

The on-boarding experience proved problematic for many users due to confusing layouts, unclear interface elements, and excessive text content.

✅ Solution (Figure 6):

Created clear user instructions for navigating the new tool.

Changed the "Done" button to "Go to Store" for improved clarity and next-step guidance.

Figure 5 - Original

Figure 6 - Revision

⚠️ Problem (Figure 7, 9):

Users struggled significantly with the opt-out mechanism. The process lacked a clearly labelled, dedicated exit option separate from the sign-up flow

✅ Solution (Figure 8, 10):

Added clearly labeled text for opt-out actions to improve feature exit clarity.

Figure 7 - Original

Figure 8 - Revision

Figure 9 - Original

Figure 10 - Revision

Key Takeaways

I discovered the critical importance of structured planning and progress tracking through task timing and completion dates, which significantly improved my organization and maintained morale during project delays.

Recognizing AI's growing influence, I learned to strategically leverage these tools for efficiency and refinement while maintaining critical evaluation—always verifying outputs and customizing them for specific project needs.

Weekly mentor check-ins were essential for maintaining project alignment and meeting submission deadlines, proving invaluable for accountability and guidance.

Real-World Application

Applying my skills to an application I use daily allowed me to design a creative solution that addressed a genuine user-identified need, which was particularly rewarding when participants found it valuable.

Design Complexity Challenge

The primary unexpected challenge was the extensive detail required for high-fidelity Steam mock-ups. Recreating the platform's complex interface with its numerous existing elements significantly extended development time beyond the core feature design.

User Behaviour Insights

I discovered a compelling contradiction—while few users actively check system requirements, there's universal agreement that gaming performance is critically important to their experience.

Reflections

I am proud of both this design and my overall UX journey. Reflecting on my growth, I'm excited to continue developing my skills.

For this project, my next steps include:

  • Feature Product Library Integration within users' game libraries for seamless access

  • Enhanced Feature Capabilities to expand functionality with detailed compatibility breakdowns and personalized performance recommendations

  • Ongoing Usability Testing to validating new features and improvements through continued user research

Next Steps

Click around and explore the app

Interactive Prototype

More Projects