Chen Zhang Design Portfolio

Design Exercise: An Online Livestream Experience for Sport Events

Design a livestream sport game experience for fans so that they can both watch live sport events and interact with other fans

Design Assumptions 

Product Values 


  • Watch live sports events online (game content, video quality and no delay or lagging)

Unique Product Key Value Propositions

  • Interact with other fans
  • Get latest updates for other games
  • Get game stats and data analytics for teams and players


Sports Fans

  • Males are the majorities 
  • Mostly young users (under age of 30), but target audience can vary from age of 15 to 60

Product Platform

Web: This is what we're focusing on for this exercise.  

Tablet & Mobile: I assume we should have native apps for these two form factors, and both iOS and Android. With the popularity of mobile devices, the livestream use case should be in high demand for users on-the-go. 

BUsiness & Monetization Strategy

I assume that our business model is based on either subscription or advertisements, or even both.  In order to acquire users to use our product at the beginning, we can have free 1-month or 2-months trials.


Free users probably only have limited access to livestream games, and will see ads in the page and video. Subscription users will have all access to all livestream games and no-ads experience. 

  • Ads
Webpage ads
Video-embedded ads
  • Monthly Subscription







  • TV  


  • Other online livestream services
    • Twitter Live  
    • NBC Live
    • YouTube TV
    • ESPN Go
    •  Fox Sports Go

Success Metrics

  • Quantitive Feedback from usage data analytics  

User Acquisition

First-time users
First-time registered users
How long do they stay and watch the livestream games? 

User Retention & Engagement

Daily Active Users (DAU)
After free trial, how many free users convert to paid subscription users? 
Click-through Rate for the chat UI, other game live update UI and data analytics UI 
  • Qualitative Feedback from user testing

Ideate & Sketch


Sketches for Workflow and Wireframe Option 1

Sketch for Option 2

Refine & Design Detailed Wireframes

High-level Workflow and Main Use Cases Diagram

Fans can have various funnels to land on the livestream game page.

The basic level of the product value proposition is to provide a smooth and high-quality livestream video experience.

In addition to that, in order to increase the user engagement, we should provide other sport game-related features, such as vote and interact with other fans, live updates from other games, game & player data analytics etc. 



2-column UI 

2-column UI

With this design, I reserve most of the space to the two most important features and use cases: livestream video and interact with other fans. 

Livestream Video UI: Some standard video player UI widgets should be included, such as full-screen icon, volume controller, video quality controller, go forward/backward icon etc.

Vote & Chat UI:  In order to provide an engaging interaction experience to differentiate our product with other competitors, the feature that vote for your favorite team or favorite player should work well for our fans. Emoji and GIF can also be used here to add the playfulness and fun for our target users – sports fans. 

Ads: For free users, there may be one or two embedded ads. For paid subscription users, no ads in the UI or livestream video. 

Livestream Game Schedule: Fans can mark a game as Favorite, and they'll receive a reminder later, which is a good way to increase our user retention. 

Game Stats and Data Analytics: This is another key feature differentiator in this page. In the context of sport games, it's useful for fans to know their favorite team and player live stats, such as lines ups, substitutions, standing etc. 


3-column UI

3-column UI

This 3-column layout creates more spare grid space to show more content, but adds more information density at the same time.  

Other Game Live Updates: This content can help fans check other live game scores and stats without leaving our product.  

If there're no live games playing at the same time, then this section should be hidden. 

Twitter Social Media Updates:

UPDATE: Twitter already had a livestream services, so putting Twitter updates here will probably lead users to go to their site and use Twitter livestream service. I believe we'd better remove this section. 

This is a new section with more space created from the 3-column UI. In my opinion, Twitter contents definitely adds more value for fans' interaction with the community, but I put this section on the bottom part due to my concerns such as: Should we allow users post tweets here? Do users leave our product to go to Twitter for social interaction? Is it conflicting with our product goals? 



Even though this design only has two simple requirements, this page can have a lot of features and contents to provide to sport fans. We should make design decisions in considerations for business goals, usability and technology feasibility. 

In terms of the design decisions between 2-column, 3-column and live game updates , I think it would be good to do A/B testing to compare the usage data metrics. In order to better understand the why behind the data, we can conduct a few in-depth usability testing sessions to get more user insights to make product decisions.