PredictEV

Date

August '18 - February '19

Role

User Interface Designer

Summary

PredictEV is a social network focused on sports predictions and related predictive content. Sports enthusiasts and betting amateurs cast sports bets through a live stream while providing commentary, similar to how a regular sportscaster would.

As their designer, I created their first design/interaction components to the key features of their app (e.g betting, chatting, “championing”, and viewing live predictions).

PredictEV

Date

August '18 - February '19

Role

User Interface Designer

Summary

PredictEV is a social network focused on sports predictions and related predictive content. Sports enthusiasts and betting amateurs cast sports bets through a live stream while providing commentary, similar to how a regular sportscaster would.

As their designer, I created their first design/interaction components to the key features of their app (e.g betting, chatting, “championing”, and viewing live predictions).

Research

Studying live-streaming interfaces.

To get a better idea of how to design this live-streaming platform, I studied popular video apps like TikTok, Instagram Live, and Periscope. In particular, I observed the way in which live-streamers could interact with their viewers.

Based on my research I rationalized my designs around three core observations.

Interaction Design

All other live-streaming services placed their interface elements to the borders of the pages in order to focus the viewer on the streamer.

In some cases, some apps would utilize elaborate drop down and swipe-up interactions as a way to conceal.

Chatting is the main communication tool.

The chat functionality was the main communicative tool where live streamers and viewers interacted. Streamers could either respond audibly through the stream or send a message.

Online betting UIs

In addition, I studied online betting platforms to better understand the terminology and conventions surrounding betting.

A brief glance

Ideation

Drawing from my insights from current live streaming apps, I sketched out some initial concepts on how I might incoroporate sports betting into live-streaming.

High Fidelity Deliverables

Shown below are some of the final design components for this project. These early interface elements served as key building blocks for future experience design, envisioned product strategy, and investor presentations.

Beginning to Live Stream

These set of initialization screens were designed to allow live streamers to search and find the game that they wanted to discuss about. From there, they were given the option to make an initial prediction or skip right to live streaming.

Making a Prediction

Making predictions is the central function of this app. I designed a standout button to initiate this, using the boldest brand colors. Pressing on this button opens the prediction modal. I modeled this based off of betting slips I had studied and other online betting platforms.

With this interface, live-streamers have an option to make any number of bets without having to leave the stream. Streamers can easily scroll through a number of different bets based on the game they are viewing at the time.

Chat

I designed chat to run synchronously with the live streamer, so that streamers could stay aware of their chat while on-air. The chat bubbles were designed with semi-transparency so they would not hinder anything on the live screen. In addition, chat bubbles served a second use for notifying the streamer when a viewer has championed their prediction.

How to conceal secondary functions?

I was careful not to flood the interface with too many button or chat bubbles. For secondary functions, I explored concealable modals and interactions to surface/reconceal quickly. I designated a swipe-up interaction to reveal a modal depicting streamer’s current predictions. Swiping left on this modal would then reveal a list of viewers that are currently supporting the streamer’s predictions.

This modal's interaction allows streamers to briefly glimpse at how their bets have fared and then quickly refocus on streaming. However, one constraining factor was that it complicated the predicting interface, which also utilized a bottom-half modal.

Viewer Previews

I additionally created some elements for the viewing experience. Continuing with the concept of concealable modals and quick resurfacing interactions, I created a similar component for the viewer to check their predictions while watching a stream.

We anticipated viewers wanting to quickly browse through different streams, through a swipe-through interaction. To complement browsing, I created a preview modal on the bottom displaying the key information about the stream.

Next

Louvre