Examples of UI redesign, UX flow, and brand design for ESPN native apps

1. A sample collection of workflow, explorations, process
and execution for ESPN native applications
ESPN Native Applications Case Study

2. ESPN Native Applications Case Studies
2
Fantasy Baseball: Legacy Screens

3. ESPN Native Applications Case Studies
3
Fantasy Baseball: Legacy Screens

4. ESPN Native Applications Case Studies Up to 500 screens per app, per device.
Fantasy Football, Fantasy Baseball, Tournament Challenge, the ESPN app.
Before After
Before After
Fantasy Baseball: UI Conversion

5. ESPN Native Applications Case Studies
5
Before After Before After
Fantasy Baseball: UI Conversion

6. ESPN Native Applications Case Studies
6
Empty Watch List > All Batters > Player Card > Added to Batter Watch > Added to Pitcher Watch >
Fantasy Baseball: Add Players Flow

7. ESPN Native Applications Case Studies
7
Predictive Search / Auto Complete Contextual Navigation
Fantasy Baseball: Add Players Flow

8. ESPN Native Applications Case Studies
8
Fantasy Baseball: Manage DL Flow

9. ESPN Native Applications Case Studies
9
In Game, Collapsed In Game, Expanded Post Game, Expanded Info Post Game, Expanded Stats
Fantasy Baseball: FantasyCast Game States

10. ESPN Native Applications Case Studies
10
Live Bracket / Round of 64 Live / My Bracket Live / My Groups Bracket Final / Correct Selection
Tournament Challenge: Bracket States

11. ESPN Native Applications Case Studies
For tables within ESPN native apps, we created a responsive
web solution and then used the handset breakpoint
in the native shell on mobile.
Fantasy Baseball: Responsive Tables

12. ESPN Native Applications Case Studies
Fantasy Baseball: Player Page States

13. ESPN Native Applications Case Studies
13
ESPN App
Sport, Personal, and Content Navigation
Notifications and alerts
Language and country identification
Personalization On-boarding: Team, Sport, Player
Contextual favoriting
Watch Live flow
Authentication
In App Purchase flow (Android)
Purchase Flow redirect to web (iOS)
ESPN Fantasy Apps
League Creation
League Messaging
Social Share Points: Draft, Pre Game, In Game, Post Game, Logo Change
Manage Lineups: Starting Lineup, Trade, Drop, Injury, Waivers, Watch
Achievements
Mock Draft flow
Live Draft flow
Tournament Challenge
Native Bracket flow: iOS
Responsive Bracket flow: Android
Social Share Points: Bracket Creation, Predictive Winner
Second Chance Flow
Pre Game, In Game, Post Game states, aligned with Bracket Selections
Examples of Additional UX Flow Explorations and States

14. ESPN Native Applications Case Studies
14
Brand Voice, Content Placeholder UI, Partnership Creative
Fantasy Baseball: Voice and Personality

15. ESPN Native Applications Case Studies
Fantasy Baseball: Full UI/UX Audit,
Documentation, Style Guides