Overview

With life's many distractions and so little time, basketball fans with busy lives aren't always able to sit down and watch an entire basketball game, especially with multiple games playing each day. NBA Dash condenses games and news into an easily accessible, digestible feed so that users can catch up on the go, on their own time. 

Details
Role

UX Design | UI Design | Visual Design

Timeline

5-day sprint during General Assembly UX Immersive

Tools

Pen & Paper, Pop App, Sketch, InVision, Keynote

iOS Mobile App Design
  Key insights:

  • Watches highlights daily, for all teams and games that occurred that day
     

  • After watching, looks up detailed stats online 
     

  • Is usually on the go, so prefers to watch on mobile but often waits until he can get on his computer to watch and look up stats at the same time 
     

  • Re-watches specific game footage to learn players' techniques

User's current flow

I asked the user to go through the steps he normally took during his basketball watching routine. Watching him allowed me to examine his world and see from his point of view.

Through contextual inquiry, I discovered that it took multiple clicks and browser windows for the user to complete his tasks. It was clear that it these tasks were much easier done on a computer, not a mobile device.

User Interview
contextual inquiry
user persona

Using the information and insights gathered from research, I created a persona to illustrate the target user's background, behaviors and goals.

 

This persona would serve as a reference for the upcoming phases of the design process, helping to ensure that all decisions moving forward would be based on this target user.

Next, I drew quick whiteboard sketches to come up with ideas for the solution. Based on the intended user flow, I created:

  • A home feed, so the user could access and quickly browse through the latest videos
     

  • A detailed viewing screen, so the user could watch a video while sumultaneously viewing stats for that specific game
     

  • A favorites tab, so the user could save videos for reference later for learning techniques
     

  • A social feature, so the user to re-post clips and share them with friends

To begin, I aimed to create a simple flow in order to allow the user to achieve his goal with the least amount of friction, in the shortest amount of time. 

removed several steps from his current flow, allowing access to everything in once place, from the home screen of the app.

user flow
initial sketches

Sketching ideas wasn't enough to begin designing high fidelity mockups. I needed to validate my solutions before moving forward. The quickest way to do this was by creating a paper prototype for users to test.

 

Why a paper prototype?
 
  • If any changes needed to be made,  no time would be wasted on trying to achieve a pixel-perfect design
     

  • Asking users to complete tasks with the paper prototype would uncover how they would interact with my actual product

Some takeaways after user testing:

  • A social feature was unnecessary. The user liked to share NBA news with friends, but only so he could show off in-person
     

  • The user expected to see even more detailed player stats by tapping on the players' photo
     

  • The user expected current video being played to be fixed to the top of the screen, so that he could scroll through the stats without missing any of the video

paper prototype

Based on what I learned from testing my paper prototype, I moved on to digital wireframing. This allowed me to increase fidelity and see where users might still have issues. Again, I found more changes to be made before going into high fidelity.

Paper

Wireframe

Whiteboard

Sketch

Digital

Wireframe

wireframes
Viewing Screen Iteration #2
Viewing Screen Iteration #1
Iteration #1 - Digital Wireframes (left)

Though there are next and back buttons, the user wasn't sure what to expect by clicking on them.

Iteration #2 - High Fidelity Mockup (right)

An expanding menu was added, showing which video would play next, without cluttering the screen. This made the user feel more comfortable about clicking ahead, knowing what was to come.

viewing screen iterations
Home Feed
Iteration #2
Home Feed
Iteration #1
Iteration #1 - Digital Wireframes (left)

The user had a hard time differentiating between videos on home screen. Were the descriptions for the videos above or below them? 

Iteration #2​ - High Fidelity Mockup (right)

The video description was designed with a subtle arrow pointing at the video that it was meant for, in addition to a black strip that further breaks up the space between.

home feed iterations
from rough sketches to a high fidelity prototype
project takeaways
  • When I was first tasked with this project, I was worried that I didn't know enough about basketball in order to create an app centered around it. I learned that this didn't matter as I much as I thought it did, because my goal was to understand the user, not basketball itself. My empathy for the user was what drove the design; my product was focused on how and why he watched basketball, not what I assumed he needed.

  • I can now put a face to Lebron James' name.