Livit:
Live Video Streaming

Details
2015
Sketch
Photoshop
After Effects

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. They also wanted me to look through the apps existing UX and UI and give it some polish. 

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.

 

Screen Shot 2015-07-09 at 10.58.31 PMScreen Shot 2015-07-09 at 10.58.31 PM
Screen Shot 2015-07-09 at 10.58.52 PMScreen Shot 2015-07-09 at 10.58.52 PM
Screen Shot 2015-07-09 at 10.59.04 PMScreen Shot 2015-07-09 at 10.59.04 PM
Screen Shot 2015-07-09 at 10.59.15 PMScreen Shot 2015-07-09 at 10.59.15 PM
Screen Shot 2015-07-09 at 11.00.24 PMScreen Shot 2015-07-09 at 11.00.24 PM
Livit_Flats_OGLivit_Flats_OG

Revisiting The Main Feed

The original feed was a bit bland and didn't really have any of the quirky visual style that the app creators wanted it to feel like. 

So (see below) I updated utilizing that bold blue color for the top nav and adding Livvy (the monkey) as the subliminal refresh animation. I think Yelp's refresh is so great and cute. It's that delight that I wanted the users to feel with this app. I also bumped up the size of the bottom buttons and altered the icons within them a bit to give that bubly feel.

Navigation

The three main buttons are from left to right; GLOBAL STREAMS, GO LIVE, and STARS.

  • The Global feed shows all streams that are going on currently throughout the world.
  • Go Live let's the user jump into their own live stream
  • And Stars allows the user to find their favorite celebrities or top Livers within the app.

 

On the top right the user can access their own profile.

Global Feed

The screen to the left would be visible if no streams are going on (which would hopefully never be seen, but needed to be created just in case.) You can see it let's the user know why the empty state is there with a CTA to start their own stream.

Once there are streams to be seen, the user can toggle between a list view and a map view depending on their preferences.

User Profiles

I updated the user profiles view to match the new style throughout the app. Originally in their first release, there was an annoying issue where if the user dove into mutiple user profiles, the only way to get back to their profile was to continuously click the back button...sometimes 5-10 times. 

Annoying.

So with a quick addition of a HOME button the the top right that solved everythying.

I also was able to gain more real estate by reorganizing the user information a bit (followers, friends, etc.)

Notice how the three bottom buttons are always visible to allow for quick and easy navigation / streaming abilities.

PreStreamPreStream

Approval Modal

Before a user starts a stream the app needs authorization to use the phones camera, the mic, and the location. The stream obviously cannot function without the camera and mic but location can be optional.

Livit_Handoff_Wireframe InitialLivit_Handoff_Wireframe Initial
Livit_Handoff_Wireframe Initial5Livit_Handoff_Wireframe Initial5

Landscape Viewing

The same screans needed to be redesigned to fit landscape recording and viewing. Something that seems as easy as relocating a few elements is actually a lot tougher to do in order to not clutter the view and not seem too forced.

Handoff

Handoff was a feature that the app creators needed my help with. The idea is that a user can start a stream, and then have the ability to choose between any of their viewers to toss their live stream over to. That would in turn grant this new user the ability to take over the stream. 

Viewers would be shown a "picture n picture" like experience with the ability to toggle between the two streams. 

At any time the original user can take back the live stream so that the experience is back to just one live stream. They can also tap the clap icon on the right to boost up the streams "Hotness" factor. The more claps the higher that bar goes.

Above you can see different wireframe stages we went through and the overall thinking in terms of user flow and thinking. Also notice the updated streaming experience utilzing darker commenting bubbles and a better watch list view/functionality.

Below you can see a quick prototype I made to convey what I had in mind for interaction and functionality. 

HANDOFF-PROTO_STREAMER_smallHANDOFF-PROTO_STREAMER_small

Groups

The next feature we created was Groups. Groups not only allowed you to create private groups to stream your videos to but also allowed you to chat within them. 

Going  10ft

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.

mockmock
LivvySwing_x2_smallLivvySwing_x2_small
appstorebadgeappstorebadge