Emily Yeh
Product Designer, UI/UX, Occasional Illustrator

BlueStacks TV + Facebook Live

BlueStacks TV + Facebook Live

fb live.png
 
 

The Team

Product Manager, 10 Engineers, Product Designer, Marketing Director

 
 
 
 
 

My Role as Lead Product Designer

    • Seamlessly integrate Facebook Live into BlueStacks TV
    • Work with the product manager to clarify business and product goals
    • Create the UI and UX with the product manager and engineers
    • Collaborate with marketing team to make press content
     
     
     
     
     

    The Goal

    Seamlessly integrate Facebook Live into BlueStacks TV and release it in 17 different countries

     
     
    bsfb.png
     
     
     

    User Research

    A lot of the research for Facebook Live is based on the research done for  BlueStacks TV. The target user is similar, but the biggest difference is that there's no need for them to know about Twitch.

    Target User: "New to Casual Streamers"

    • Students from ages to 16-26 
    • Consistently plays app games
    • Uses a PC
    • Uses Facebook frequently

    User Persona

     
    n.png
     

    Main Use Cases

    • Share app gaming experience with friends
    • Demonstrate app game skills
    • Get input from viewers during stream
    • Conducts tournaments for apps like Clash Royale
    • React to a Youtube video
    • Demonstrate makeup tutorials
     
     
    usercae3.gif
     

    Demo of some main use cases for Facebook Live integration with BlueStacks TV

     
     

    Features

     
     
     
     
     

    Workflow

    Technical Constraints

    After establishing the features we went over the technical constraints with the engineers:

    • BTV Window size can only reach up to 320x570dp max before getting cut off by bottom task bar
    • Keep UI consistent with current BTV Workflow
    • Facebook Go Live Dialogue and Login popup cannot be altered or taken away
    • Nothing can appear on top of live preview
    • Localization for 17 different languages

    Wireframes

    The workflow needs to be consistent with BlueStacks TV. At the login screen the user can click "Stream to Facebook Live" and login with their Facebook account. After login they can set up their stream and decide who to stream to. When they click "Go Live" the Facebook Go Live Dialog popup will appear, where they can add the video title and tags. Once they're done they can click "Go Live" to go live.

     
     
    fb wireframe.png
     
     

    Stream Setup Variations 

    When we first tackled the stream setup, we wanted to fit all the required elements within a single screen:

     
     
    fb mockups.png
     
     

    Early Setup Iterations

    After testing these variations, we found that fitting everything within a single screen was too overwhelming for the user. We also realized that asking the user where they wanted to stream appeared redundant. When people open Facebook, they usually scroll through their newsfeed to see content. Unless they want to stream on a specific page it was always going to be posted on their timeline.

    We broke the steps down to two cleaner screens.  We also got rid of the "Stream to..." section and changed the visibility option to "Who do you want to stream to?". There the user can choose to stream to friends, the public, specific pages, or groups.

     
     

    Simplified setup iteration

     
     

    Users were able to navigate through this simplified workflow much faster. Turns out breaking down and simplifying the steps reduced cognitive load and made the setup easier to understand.

    Layouts Workflow Variations

    Layouts became a major feature for this project. This is where users could choose from 4 different layout variations. In the first iteration, the popup was kept small and contained within the window:

     
     
    btvfb.png
     
     

    Early layouts experiment

    When layouts started gaining more value, we redesigned and enlarged the popup to give users a more focused view of their layout options. This variation also allowed us to easily add more layouts for the future:

     
     
    final filter.png
     

    Demo of selecting a layout (left) and final layout iteration (right)

     

    Final Workflow

     
     
     
    FB_1.gif

    Final going live walkthrough

     

    Final results on FacebookLive

     
     

    What We Learned

    After the release, we observed several live streams and interviewed streamers who used our product. We found that streamers who showed Clash Royale received a significant amount of viewers (3-4k views). We also noticed high engagement with the layouts popup, and the most popular layout showed the webcam and app view sharing equal space.

     
    image.png
     

    Feedback from Streamers

    • Most found it easy to setup their stream and Go Live
    • Wanted more options for layouts
    • Wanted to see more detailed stats of their live stream

    Next Steps

    Based on the streamer feedback and data analysis we came up with our next steps:

    • Explore more stream stats 
    • Explore more layout options
    • Add filters for Facebook live
    • Improve the stream quality
    • Remove Facebook go live dialogue
    • Add advanced settings