flurry_portfolio_03.jpg

Flurry - UI/UX

Flurry.live

Video streaming App

Flurry is a live video streaming app that brings people together. Flurry allows users to get up close and personal with their favorite broadcasters. Working at a fast-growing startup company enables me to get involved in many design fields, not only designing user interfaces, prototyping user experiences, designing branding materials, but also working closely with the lead designer, frequently interacting with the engineering team, and the marketing team.

flurry_portfolio_03.jpg

Background

I worked at a startup company called Flurry.live, a video streaming app for teenagers. I was asked to help enhance users’ experience. I worked closely with the lead designer to understand the problems they’re solving so I could translate it into a delightful UX Design. The app needed to do quite a few new features, including double guesting, mute audio/flip camera, media, and more.

  • Company/Client: Flurry live Inc.
  • Time: 3 months, summer 2016
  • My role: UI/UX Designer
  • Tools used: Sketch, Flinto, Invision, Photoshop, After Effects
  • Methods: wire framing, user testing, prototyping, kickoff meeting
 
flurry_portfolio_14.png

Feature 1: Double-guesting

Goal

  • Enable double-guesting to join on screen while broadcasting
  • Make live streaming a more friendly and engaging experience
  • Increase user engagement and user growth

 

Design Process

Guided by the needs of the users, I designed based on different user scenarios - broadcasters, guest broadcasters and viewers.

Given this task, I firstly analyzed the existing guest broadcaster join on screen experience, and brainstormed if I could create a new workflow that fits into the current app architecture. In conclusion the workflow is intuitive, the major problem is distribution of each component on the live screen.

My initial concept was to redesign the screen by enlarging the guest video pane. I suggested the current guest video pane was too small, which was not engaging enough for users. I communicated with the lead designer about my concept, and we rejected this early concept due to our time constraints of a complete screen redesign.

 

Design Solution

  • Followed the existing guest join on screen experience
  • Add another video pane below the first guest video pane.
  • Downsized the empty video pane while second guest on screen to better use the limited screen

 

Result

The result was successful. It delivered an intuitive experience, well aligned with our initial user behavior - it kept the consistency of the user experience within the app. My design was successfully implemented into the app and got shipped out. After launch, our community team received positive feedback from many users. Our users enjoyed using the feature, and we got good comments on double guesting feature at App store.

 

flurry_portfolio_07.gif
showcase.jpg
showcase 1.jpg
flurry_portfolio_06.gif
 
 
 

Feature 2: Flip camera/mute microphone

Goal

Design an experience when host and guest flip their camera and mute microphone while broadcasting

Design Process

Based on iOS design guideline, I designed multiple versions of the flip camera interface. After multiple versions of design ideation, here is the final design. There were lots of testing involved with our engineering team on the exact timing when users tab on the button and cameras flip.

Result

After launch, our community team received positive feedback from many users. They are actively using this feature.

 
flurry_portfolio_06.jpg
 Workflow for muting microphone

Workflow for muting microphone

flurry_portfolio_08.gif
flurry_portfolio_10.gif
flurry_portfolio_09.gif
 
flurry_portfolio_04.jpg

Feature 3: Drawing

Goal

Design an drawing tool for hosts while broadcasting

Design Process

In order to keep our users entertained, our team had several meetings to brainstorm ideas, aiming to providing a delightful experience for our users. My task was to design and prototype a drawing tool. This task also involved a selection of iconography to keep the consistency of the design style guide. After lots of user testing and meetings with our team, we chose to keep ‘undo, color, and reset’ as our main tools in the drawing menu.

flurry_portfolio_04.gif
 Workflow for drawing tool

Workflow for drawing tool

 
flurry_portfolio_03.gif

Feature 4: Media Share

Goal

Design an experience when hosts share their photos while broadcasting

Design Process

My work was to design a sequence of workflow for hosts sharing their photos while broadcasting. In the case, I was challenged to come up with solutions of displaying more than two functions in the Game tool.

flurry_portfolio_05.jpg
 
flurry_1s.jpg