🎯 Impact

I Designed key UI elements, defined success criteria, and conducted two usability tests to optimize critical entry points, projected to increase feature engagement by 25%.

Thanks For Your patience!
Prototypes and Images Take Time to Load 😅...

Elevating GameChanger's Web Design System

May to November 2024

New York, United States (remote)

What Does GameChanger Do?

GameChanger provides mobile and web platforms that offer live scoring, stats, and streaming for youth and amateur sports teams, enabling players, coaches, and families to stay connected and engaged. For this project I worked with the team focused on furthering the success of the Volleyball offering at GC.

How it all started

GameChanger had robust iOS and Android design systems, but the web design system lagged significantly behind. Developers often referenced mobile components for web adaptation, leading to design discrepancies and collaboration hurdles. This project aimed to close the gap by auditing and improving the web design system.

The Problem

The outdated web design system created inefficiencies:

• Design Misalignment: Designers lacked updated components in Figma, leading to inconsistencies.

• Developer Workarounds: Developers manually adapted mobile components for web, increasing complexity and the risk of errors.

• Collaboration Hurdles: Inefficient communication between designers and developers caused delays and misinterpretations.

My Role

I led the audit and overhaul of the web design system, collaborating closely with a full-stack developer and my manager.


How Might We?

Improve the consistency and collaboration between designers and developers by creating a unified, up-to-date web design system that aligns with existing mobile design systems, ensuring a seamless, efficient, and accessible user experience across platforms?


Process

1

Audit and Prioritization

• Identified outdated components.

• Prioritized components based on usage and visibility.

2

Reverse Engineering and Creation

• Compared web components to their iOS counterparts.

• Reverse-engineered components in Figma with 1:1 functionality replication.

• Designed missing or suboptimal components from scratch, ensuring 1:1 alignment with iOS design principles, adapting for web screens.

3

Tools and Collaboration

• Figma (for design), Notion (for documentation), and browser inspect panels (for functionality review).

•Worked with a developer to align designs, prepare detailed handoff files, and provide custom CSS notes.

The Outcome

• Redesigned 20+ components, improving consistency across 50+ screens and user journeys.
• Enhanced designer-developer collaboration and ensured cohesive user interface (UI) and user experience (UX).
• Elevated the priority of the web design system within the organization, transforming it into a reliable resource for teams.

Examples of Important Components

What they are, how they work, and why they are important


1. Fan Pricing Table

1

What it is

• The Pricing Table is a key component designed to communicate GameChanger's subscription options for specific sports.

• It provides a clear comparison of the features offered across the Free, Plus, and Premium tiers, helping users make informed decisions.

• The table is organized with:
Columns: Representing the selected sport and the three pricing tiers.

Rows: Representing features, with checkmarks indicating availability per tier.

2

How it works

• Dynamic Sport Selection: The table header dynamically updates based on the sport selected, ensuring relevance to the user’s context.

• Responsive Design: The table adapts seamlessly to different screen sizes, stacking columns on smaller screens for better readability.

• Visual Indicators: Checkmarks indicate feature availability, with bolded or highlighted tiers drawing attention to the most popular choice.

• Interactivity: Users can hover over feature rows or tiers for tooltips providing additional details, helping them better understand what each tier offers.

3

Why it is important

• User Clarity: Simplifies complex pricing and feature sets, making it easier for users to compare options at a glance.

• Enhanced Decision-Making: The sport-specific context ensures users are only seeing pricing relevant to their needs.

• Conversion Boost: By highlighting popular or recommended tiers, the table nudges users toward higher-value subscriptions.

Live Implementation


2. Schedule Tables

1

What it is

• The Schedule Table is a horizontally scrollable component that provides users with a comprehensive view of their game schedules and results.

• It organizes key details about each game, tailored for logged-in users.

2

How it works

• Horizontal Scrolling: Allows users to access all relevant game details without overwhelming the interface on smaller screens.

• Key Information Display: Includes fields like Live/Completed game status, Opponent, League, Score, Game Date, and Game Duration for quick and easy reference.

• Dynamic Updates: The table updates in real-time to reflect the latest game statuses and results, ensuring users always have up-to-date information.

• Responsive Design: The table adapts seamlessly across devices, preserving clarity and usability.

3

Why it is important

• Streamlined Access: Consolidates essential game information in one view, reducing navigation time for users.

• User Engagement: Keeps users informed about their team's performance, encouraging continued interaction with the platform.

• Cross-Platform Consistency: Aligns with GameChanger's mobile design principles, ensuring a seamless experience for users switching between platforms.

Live Implementation

Atoms, Molecules, Organisms

A reverse engineering of sorts...

To ensure consistency across platforms, I started at the atomic level, aligning each smallest element with the iOS and Android design systems. Leveraging my expertise in CSS, HTML, and JavaScript, I reverse-engineered and adapted these elements for the web, systematically combining them into molecules and larger components to create a cohesive design system.

Implementation

A sneek peek into my designs being brought to life

I even helped write the CSS for these!

My own attempt to bring the design to life

I tried to help the engineers out by building out the layout of the table in code

See the Pen Random by Madhav Varma (@Madhav-Varma-the-decoder) on CodePen.

Impact

Quantitative Impact

• Redesigned 20+ components, improving consistency across 50+ screens and user journeys.

• Increased efficiency in designer-developer collaboration, reducing handoff times by 40%.

Organizational Impact

• Elevated the web design system into a key resource for cross-functional teams.

• Fostered a culture of design and development alignment, improving product quality and speed.

Reflections

What I Learned

• Mastered auditing and revitalizing an existing design system.
• Gained deeper experience collaborating with developers beyond feature-specific work.

What Can Be Improved

Further simplify Figma component variants for efficiency.

If you are interested in discussing this case study further You can contact me at
madhav18897@utexas.edu

@all rights reserved