01 / OVERVIEW
Overview
Draftsy is a multiplayer sports gaming platform built around three distinct games:
Draftsy
The flagship multiplayer draft experience with high-stakes roster construction and dynamic turns.
Stacks on Stats
A statistics-driven gameplay mode centered on player data metrics, performance tracking, and stacks.
Perfect Picks
A rapid prediction and picking-focused experience with intense head-to-head competitive rivalry.
I joined as the sole designer to rethink the product from the ground up: from its UX and information architecture to its visual identity, interaction patterns, motion language, gameplay, notifications, chat, and app-store presence.
The product had previously evolved around a more conventional SaaS visual language. The founders wanted something fundamentally different.
They wanted Draftsy to feel vibrant, competitive, energetic, and unmistakably sports-driven, something that felt native to the visual culture surrounding American sports. My role was to translate that ambition into a complete product language.
02 / THE PROBLEM
The Problem
Draftsy's previous design language communicated "software." But the product itself was not really about software.
It was about sports, competition, players, picks, stats, rivalry, and entertainment.
The founders wanted the product to visually connect with the culture their users were already familiar with:
- American sports broadcasts
- Sports media graphics & lower-thirds
- Live scoreboards & stadium tickers
- Deep statistics & player analytics
- Fantasy sports leagues
- Sports betting interfaces
- Team identities & franchise colors
- Broadcast overlays & instant replays
- Highlight graphics
- Competitive multiplayer game experiences
03 / THE DESIGN DIRECTION
The Design Direction
The new direction was built around three guiding pillars:
01. VIBRANT
The interface should have energy. Color shouldn't simply indicate hierarchy. It should contribute to the feeling of competition, tension, and excitement across every screen.
02. SPORT-FOCUSED
The visual language should feel familiar to people who consume American sports media, drawing cues from established mental models: scoreboards, stats, broadcasts, team graphics, and game cards.
03. EVER-EVOLVING
Sports culture constantly changes. New seasons, teams, players, games, moments, statistics, and stories create an environment that is never visually static. The product therefore needed a design language capable of evolving seamlessly with live content.
04 / THE TRANSFORMATION
From SaaS to Sports
The most significant shift was moving away from the conventions of SaaS UI. The goal wasn't to make every screen "louder": it was to make every interaction feel more native to the product's world.
- Neutral visual hierarchy
- Software-oriented generic components
- Restrained, timid color usage
- Conventional standard cards
- Functional, cold presentation
- Minimal personality & static screens
- Strong game identities & color systems
- Sports-inspired broadcast graphics
- Expressive high-contrast typography
- High-energy compositions
- Motion-driven reactive interactions
- Richer statistical information hierarchy
05 / GAME IDENTITIES
Three Games, One Platform
One of the central design challenges was that Draftsy isn't one game. It is a platform containing three different experiences. Each game needed to feel immediately distinguishable, while ensuring users never feel like they've opened a completely different application.
06 / SYSTEM ARCHITECTURE
Designing the System
The solution was not to give each game an entirely separate UI. Instead, I created a common product grammar that allowed the platform to behave like one ecosystem with three personalities.
SHARED FOUNDATION (CONSTANT)
GAME IDENTITY (VARIABLE)
07 / FULL END-TO-END SCOPE
Rebuilding the Core Experience
I redesigned the application end-to-end. Rather than treating each feature as an isolated screen, I mapped the complete architecture across all customer touchpoints:
- Main Experience: Priority dashboard, active lobbies, and completed history
- Navigation: Tactile mobile navigation with quick actions and alert badges
- Notifications: Actionable push and in-app live game events
- Game Discovery & Entry: Fast matchmaking, lobby creation, and token staking
- Multiplayer States: Real-time opponent turn status and countdown timers
- Gameplay Mechanics: Drafting, stat stacking, and pick submission
- Multiplayer Chat: In-game player messaging, banter, and reactions
- Account & Verification: Clean email verification and profile management
- Startup Flow: Onboarding sequences establishing the sports atmosphere
- Store Presence: High-conversion App Store & Google Play visual assets
08 / PLAYER LIFECYCLE
The Player Lifecycle
A multiplayer product doesn't end when the user closes the game. A player's experience continues between sessions. Every stage introduces critical UX states that were accounted for as part of the core product rather than edge cases.
09 / CORE COMPONENT
Game Cards
Game cards became one of the central components of the new system. They needed to answer a question immediately:
Cards communicate game type, real-time status, active players, turn state, outstanding actions, token payouts, invitations, and completion badges. The cards became mini dashboards for each game.
10 / PRIMARY INTERFACE
The Main Experience
The main tab was redesigned around player priorities. Instead of presenting games as a flat collection, the experience distinguishes between:
This makes the product feel active. The interface communicates that something is waiting for you without requiring you to manually search through the application.
11 / ENGAGEMENT LAYER
Notifications as a Gameplay Layer
Notifications were treated as an integral part of the game system. The important shift was moving from "Something happened" to "Something happened, and here's what you should do next."
12 / GAMEPLAY MECHANICS
Gameplay
The core gameplay experiences were redesigned across all three games. The interface constantly answers: What game am I in? Who am I playing with? Whose turn is it? What can I do? What happens next?
The design prioritizes state visibility and action clarity so players never feel lost during fast-paced competition.
13 / PROGRESSIVE ONBOARDING
Contextual Tooltips
Each of the three games received its own in-game tooltip system. Rather than overwhelming new players with instructions upfront, the interface introduces information contextually around actions that matter at that exact moment.
14 / SOCIAL LAYER
Chat
Competition is social. The redesigned chat system creates a shared communication layer across all three games, integrating seamlessly into active gameplay sessions.
- Player identity badges & level ranking indicators
- Game-specific channel context & live event broadcast cards
- Unread message badges & real-time participant counts
- Engaging empty states encouraging trash talk and sports banter
- In-game chat overlay drawers that don't obscure gameplay
15 / FIRST-TIME USER EXPERIENCE
Startup Experience
The first interaction with Draftsy needed to communicate the new personality immediately. The startup flow was redesigned to introduce the product, establish the visual language, and move users toward the multiplayer experience with minimal friction.
16 / SECURITY & ACCOUNTS
Account & Verification
I redesigned the account-management experience around changing and verifying a linked email address. An unverified account isn't just an account-management issue, it can become a product-level notification and onboarding state.
17 / MOTION DESIGN
Motion Design
Motion became an important part of moving Draftsy away from a static SaaS aesthetic. Rather than using animation purely for polish, I treated motion as part of the product's personality, making the interface feel alive and reactive, closer to the energy of sports media than traditional software.
MOTION PRINCIPLES
- Snappy, mechanical state changes without sluggish easing
- Real-time countdown pulse and urgency cues
- Haptic-synchronized feedback on picks and selections
- Broadcast-style wipe transitions between match phases
KEY MOTION MOMENTS
- Draft pick selection snap & confirmation lock
- Token payout counters & victory splash explosion
- Live score ticker transitions and lead changes
- Notification tray drop-in & swipe dismiss
18 / VISUAL DESIGN
The Visual Language
The visual system draws inspiration from the visual vocabulary surrounding American sports. Not by copying broadcasts directly, but by borrowing familiar principles:
INFORMATION DENSITY
Sports audiences are accustomed to processing scores, statistics, rankings, player stats, and live updates quickly without cognitive friction.
STRONG COLOR IDENTITY
Teams and leagues use color to establish instant recognition. Draftsy uses the same principle at the game level across Purple, Blue, and Orange.
GRAPHIC ENERGY
The interface incorporates stronger compositions and visual moments instead of relying exclusively on conventional UI containers.
COMPETITIVE HIERARCHY
Important information needs to feel important immediately through high-contrast typography and clear action triggers.
19 / STORE PRESENCE
App Store & Play Store
The redesign extended beyond the application itself. I created the visual storytelling system for Draftsy's App Store and Play Store presence. The objective was to make the store presence feel like an extension of the new product identity, allowing users to understand the energy of Draftsy before downloading it.
20 / DESIGN SYSTEM
Design System
To support the redesign, I developed a comprehensive, reusable design foundation spanning the entire product, engineered so Draftsy can continue evolving without losing its identity.
CORE UI FOUNDATION
- Buttons, inputs, form controls, and sliders
- Modal sheets, bottom drawers, and sticky headers
- Player avatars, rankings, and status badges
- Navigation bars, tabs, and toast messages
GAMEPLAY SPECIFIC UI
- Multi-state game cards & dashboard tiles
- Turn timers, countdown clocks, and progress bars
- Draft snakes, stat stacks, and pick dials
- Win/loss celebratory splash overlays
21 / RESPONSIBILITIES
My Role
I worked as the sole designer on the redesign, owning the entire experience from the earliest structural decisions through to final visual execution.
Rather than designing within an existing visual system, I helped define what the new system should be.
22 / IMPACT & GROWTH
Impact
The redesign is currently being rolled out as Draftsy continues to onboard users and prepare for its next stage of growth.
Because the product is actively acquiring users and the company is preparing for a Series A fundraise, quantitative post-redesign impact metrics are being measured in real-time. Rather than manufacture metrics, the success of this project is evaluated through the transformation itself:
- SaaS-oriented interface → Sports-native product language
- One generic experience → Three distinct game identities
- Static UI → Expressive interaction and motion
- Feature-by-feature design → Unified, scalable product system
As adoption continues, the redesign provides a solid foundation for measuring improvements across user activation, daily engagement, game participation, player retention, and multiplayer activity.
23 / THE OUTCOME
The Outcome
Draftsy now has a visual and interaction system capable of growing with the product. The three games have their own identities. The platform has a common language.
Gameplay, notifications, chat, onboarding, account management, and marketing now operate within the same design system.
24 / REFLECTION
Reflection
The biggest lesson from Draftsy was that a visual redesign can sometimes be a product-positioning exercise disguised as UI design.
The founders weren't simply asking for brighter colors or better screens. They were asking for the product to communicate a different idea of itself.
That required looking outside traditional product design references and into the visual culture of the people who would actually use it. Sports broadcasts, fantasy platforms, statistics, team identities, competitive games, and media graphics became design references alongside conventional UX patterns.
The result was not a sports-themed SaaS interface. It was a product language built around the culture of competition itself.