SHARING YOUR MOMENTS LIVE.

WHEN: 2015
ROLE: SOLE DESIGNER
PLATFORM: iOS

Livit is a live social video streaming app that allows your friends and followers to watch whatever it is you're doing in the present.

I was brought on to the Livit team after it had already been out in the wild for a few months. The guys at Livit approached me to help them with rebranding the app to have a more approachable and fun aesthetic and to also think through new features. The overal user experience of the app needed some updating as well.

 I was able to create a consistent style throughout the app based on this little character we created called Livvy (a monkey). The UX has been greatly improved by cleaning up some user flow flaws and creating a more clear and consistent UI.

floating-phone_livit_2
livit_feed_2 copy

THE FEED

The main feed was meant for catching up on streams ("Livs") that you may have missed. Each stream thumbnail would indicate who the streamer was, how many views, and how many claps a particular stream garnered.

HOME STREAM NO LIVE_2

Feed with no live vids

HOME STREAM REFRESH_2

Pull to refresh

HOME FEED

Updated feed with live stream

STREAMING & VIEWING

The streaming experience needed to be simple and intutive relying on gestures, but also show information on who was watching, and allow for more functionality.

The watcher experience needed the same simple UI but with slightly different functionality.

STREAM VIEW_2

Streamer experience

STREAM VIEW TYPE_2

Communicating with watchers

WATCH STREAM_3

Watcher experience

Streaming a previously uploaded video from the feed

Watching a live video from the global map view

global_banner

DISCOVERY

The global tab was meant mainly for discovery. Showing Livs that are currently being streamed throughout the world. It consists of three main tabs - MAP view, LIST view, and a STARS view (influencers).

GLOBAL STREAM EMPTY STATE

Empty state

GLOBAL STREAM MAP

Global Map View

GLOBAL STREAM LIST

Global List View

Tapping through the multiple global viewing options - Stars / List / Map

livit_groups

GROUPS

The next feature we created was Groups. You could add your friends and followers, create a group name, chat, and start private Livs within your group.

groups creation flow
handoff banner

HAND-OFF

Hand-off was a feature created to allow users to share their stream with a viewer. Imagine being at a concert and you're right up front at the stage. You have a friend, or a viewer, who has a perspective from the way back of the entire production. You can share your stream with that person so that the other viewers can swap between both views.

Livit_Handoff_Wireframe Initial

Early wireframes of the Handoff flow

Livit_Handoff_Wireframe Initial5

Higher fidelity of the Handoff flow

handoff_1
handoff_2
handoff_2 copy
handoff_4_2
livit_landscape

FLIP THAT PHONE

If a streamer decided to shoot landscape, we needed to reformat the UI to fit that format. A tough task to do given that the viewport height has shrunk greatly.

STREAM VIEW LANDSCAPE_1
WATCH STREAM LANDSCAPE_2

The challenge was allowing the same functionality as the vertical viewing orientation, still keeping the UI in relatively the same place, and also not complicating the overall viewing experience.

mock

WE'RE GOING 10 FOOT

The obvious next move was to bring Livit to the television. We began working on an AppleTV version of Livit. I had to do some research on the standard best practices for tvOS and create the best solution and experience for Livit on the television set.

Screen Shot 2015-07-09 at 11.00.24 PM

WANT TO KNOW MORE ABOUT THIS PROJECT?

Contact

hello@stephencalvillodesign.com

Currently in

 Los Angeles, California

Copyright · Stephen Calvillo Design Forever