PROJECT OVERVIEW

"Filters" is a feature of BlueStacks TV, which is a live stream desktop app that our company has been working on for a while. After launching BlueStacks TV, we product team went interview our users and one of the key feedback from them is that they want a certain kind of personalization so that they have a better control over their stream. After several sessions of brainstorming and discussion, we decided to start off with "filters", which is basically a both functional and decorative overlay on top of streams that streamers can personalize.

WorkED together with Emily Yeh

June 2016 - August 2016 @BlueStacks      

San Jose, CA

 

Persona

Josh

  • 21, from Arizona, college student
  • Casual Clash Royale streamer, no specific goals, just for fun
  • Spend about 10 hours per week on gaming 
  • Started using BlueStacks because of friend recommendation
  • Enjoy interacting with viewers although not getting too many
  • Like BlueStacks over other streaming tools because BlueStacks is simple and straightforward without technical barriers 

Design Goals

After launching our mobile app streaming tool, BlueStacks TV, we conducted user interviews with our users all over the world. We decided to add this feature "filters", which is a both functional and decorative overlay on top of the gameplay, since one of the key feedback we got is that our users would like to have certain kind of personalization of their stream. Plus, when streaming a mobile app on our emulator, there is always empty black space on screen, which makes the stream less visually appealing.

Wireframes

Workflow

Our original workflow to start streaming  is pretty simply. Users basically only have to make sure everything looks ok on the "get ready" screen and click "start streaming" button.

 After a brainstorm session within the design team, we narrowed down to the above 3 workflow candidates. 

Option "Split" adds an extra step in the getting ready workflow. On the second screen, we provide some default templates for streamers to pick. They can also further customize the template on a separate screen if they want. This option gives "filters" high focus, but might seem annoying for those users who don't care about this concept.

Option "Filters Button" is a more subtle way to display this feature. We just add a button on the original interface, which is already busy due to limited real estate though.  "Filters" might not draw enough attention this way, but we can solve that problem by adding a update popup when users see "filters" for the first time.

Option "Filters on App Player" saves space on BTV, but might interfere with gameplay.

Filter Popup

Design Iteration

Initial Design

After a quick user testing, we realize that picking what they like from each category is taking too much time and effort for our target users, who are casual streamers who prefers our product over others due to our one-click stream feature. We decided to create pre-defined filters for users and provide further customization options at the same time.

Iteration 2

We created this concept of “Filter Template", which consists of multiple overlay elements that we curated ourselves.  So streamers don't have to go through each category to pick what they want.  In this way, streamer don't have to figure out the layout of the elements themselves, which saves great effort and time. 

Customize.png

We also provide the option to customize the template by removing some elements.

FINAL DESIGN

Before you start your stream, you can choose a filter by clicking the "EDIT FILTER" button

Click one of the filters, you can see a preview instantly

When you are streaming, you can also change the filter by clicking the "FILTERS" button.

After clicking the button, this popup would show up.

Click done. You will see the filter applied on the right side.

You can click the "PERSONALIZE" button to further customize the filter.

PRODUCT VIDEO

Filter examples