Yahoo Sports Redesign

UX/UI Design

 

Overview

I worked with a team of pm, engineers, and UX researchers to redesign Yahoo Sports experience for native mobile (iOS and Android) and web. As a design lead, I played a key role in redefining the UX/UI of the product.

 

High-Level Process

Define : product goal - timeline - competitor analysis
Ideate : user journey - sketch - whiteboard
Design : wireframe - prototype - validate w/ user test
Finalize : high-fidelity visual design - micro-interactions
Implement : build review - pre-release user test

 


Before the Redesign

 Original UI for iOS

Original UI for iOS

  Original UI for Android

Original UI for Android

Challenge

What makes sports fun and exciting? How can we leverage the great video contents we own? How could we optimize the layout of the existing app?
 

Design Solution

What makes sports exciting is that it's full of action, movement, and the interesting fanbases. We wanted to capture that movement the first thing when open the app. The video highlight of the day autoplays at the top so you won't miss any action! We've also designed a quick way to access your favorite team's info, schedule, and news.


Wireframes

How could we deliver a cohesive experience across web and native apps? We began by wireframing different layout approaches. 


Final Design

 Onboarding flow for the first time users

Onboarding flow for the first time users

 Team screens

Team screens

 List of leagues - Dark header version

List of leagues - Dark header version

 Leagues and details screens

Leagues and details screens

 Match screen for different states (i.e. pre, live, and post)

Match screen for different states (i.e. pre, live, and post)

 

External Video & News Support

 External live video streaming flow

External live video streaming flow

 Different versions of the headlines

Different versions of the headlines

 Notifications

Notifications

 

Modular Card Structure

 

Quick Favorites Access Bar


News Card

 Original design (left), new design for larger phones (middle), new design for small phones (right)

Original design (left), new design for larger phones (middle), new design for small phones (right)

 Checking for the scalability and density of the stream

Checking for the scalability and density of the stream

Match Header Scroll Interaction


Game Picks

 Default state (top), selected state (middle), during live game (bottom)

Default state (top), selected state (middle), during live game (bottom)

Iconography

Early Concepts

 Drop-down to navigate between leagues?

Drop-down to navigate between leagues?

 

Prototypes

Prototypes were created to communicate the interaction and user flow. 

Pixate Prototype #2
Pixate Prototype #1

 

Previous

Newsroom App

Next

Seoul Metro Map