CESAR CORRAL-CASTILLA
fl_banner.jpg

Facebook Live Themes

 

 

Facebook Live Themes

To create and facilitate a process to develop "Live Themes" for the Facebook Live platform + design 2 themes that would encourage users to broadcast for longer.

Duration: Summer 2016 (~10 weeks)

Client: Facebook

 

 

OVERVIEW OF CHALLENGES

 
 

Understanding the Live medium and how to design for it

Considering Facebook Live is an up and coming platform, understanding how to design meaningful and engaging live experiences with the right amount of interaction between the broadcaster and the audience was paramount. Other challenges included understanding what would encourage Facebook users to go live, what would turn them off, and heavily simplifying ideas.

Generate a broad range of ideas, while keeping technical constrains and project goals in mind

The resulting theme ideas will be part of Facebook Live’s first wave of Live Themes released to the public. Because of the experimental nature of the project, we were tasked to generate a large number of concepts and ideas, keeping in mind technical and conceptual complexity.

Develop an execution process and collaborate with an external agency to deliver within a tight deadline  

After the pitch process, ustwo New York teamed up with The Mill from day 1. The ustwo team was responsible for the product, UX and execution process, while The Mill took ownership of art direction and visual design. Delivering within the 10-week deadline was possible through tight day-to-day collaboration and trust between the teams. 

 
 

 

PROJECT HIGHLIGHTS

 

Understanding Live as a medium

Our engagement with the Facebook Live team started when we were invited to pitch for the project, detailing the process we would use to create ideas for "Live Themes". I was the designer responsible of conducting research, defining a perspective and gathering ideas during pitch work.

More specifically, I focused on:

  • Understanding user behavior when broadcasting live
  • Developing initial best practices and design considerations to follow during the project
  • Identifying key parameters that affect the context and execution of a live broadcast
 
fl_p2.png
fl_p1.png
 
 

Other deliverables for the pitch included:

  • Themes: overarching "themes" that we found after running ideation workshops
  • 3 Live Theme Concepts: 3 distinct concepts that focused on activities that are best suited for live broadcasts, user engagement, and technical feasibility.  
  • Process Overview: how the ustwo team would tackle the distinct phases of the project (ideation, prioritization and refinement)

After pitching for the project, the FB Live team communicated that they found our user-focused process, product thinking and execution skills to be in line with what they were looking for. We were awarded the project alongside The Mill, an agency with strong visual and art direction skills, to collaborate and develop the Live Themes.

 
 

 

Running the Kickoff Workshop

The ustwo team kicked off the project by setting up a "kickoff workshop" with the goal of bringing everyone together, sharing relevant research and gather live theme ideas.

More specifically, the workshop covered:

  • setting up a "team mentality" by having the different teams know each other
  • defining the goals and metrics of the project
  • discussing research done by the Facebook Live team on user's perception of broadcasting live
  • ideation sessions to generate potential ideas for Live Themes 
 
 
fl_w1.png
 
 
 

 I was involved in developing the ideation exercises of the workshop. These included:

  • Presenting "themes" found during pitch research
  • Divergent and convergent sketching exercises (e.g., crazy 8's, storyboarding)
  • Remixing concepts by applying the different parameters (e.g., companionship, emotiuon, lenght) found during pitch research
  • Discussing and identifying ideas based on project goals 
 
 
fl_w3.png
14034960_325031977843640_6907516475848205683_n.jpg
sketches_cropped.jpg
 

 

Developing ideas further

After the full day workshop, the project team (ustwo and The Mill)  used the ideas generated from the kickoff workshop and started further developing them during phase 1. The team collaborated closely via multiple rounds of prioritization and ideation while discussing the strength and technical feasibility of ideas.

 
IMG_0991.JPG
IMG_0996.JPG
 

 

Developing a Live Themes Framework

Considering that the ustwo team was tasked with being the owner of the UX and execution process, we were constantly defining and iterating on guiding principles and attributes that the live themes needed to follow when generating ideas.

We developed a "Live Themes" framework that consisted of:

  • Attributes "Hexi": to see how our ideas fare against key attributes
  • Conceptual/Technical Complexity Chart: to understand theme usability and feasibility
  • Live Research Framework: to understand user's needs and behavior when going live 
 
fl_framework.png
 

 

Prioritizing and selecting final Live Theme ideas

While generating ideas, we focused on creating ones that targeted the key metrics defined for the project: Increased number of broadcasts, increased length of broadcasts and increased watch time per viewer.

During this process, we identified and learned about key components that can be considered while creating live experiences. Some examples include: 

  • Overarching themes: Conversation Starters, Contextual Settings, Showmanship & Entertainment, Getting to Know the Broadcaster, Games
  • Participant roles: themes should have a set goal, audience needs a clear role, making the broadcaster look interesting, etc.
  • UX interactions: battle, voting, leaderboards, etc.
 
fl_ideas.png
 
 

At the end of Phase 1, we teamed up with Facebook's PO to select 2 ideas to develop and refine during the rest of the project.

More specifically, we prioritized ideas based on:

  • Familiarity: no novel concepts, but activities that can be done by everyone
  • Simplicity: ideas based on simple interactions and low use of complex technology
  • Scalability: ideas that could work with different types of content using a single defined structure
  • Visual Engagement: ideas with opportunities for highly unique and beautiful visual design
 
 

 

Refinement and Micro-Interactions

After discussing and prioritizing our strongest ideas, we selected 2 concepts to move forward with: a selection-based questions activity (which we called This Or That) and a discussion-based ranking activity (called Top 5). I was responsible for designing the core flows and secondary interactions for This Or That.

 
fl_this_or_that.png
 
 

In addition to defining core mechanics for the live theme, we explored additional layers and mechanics to enhance the broadcaster/audience experience. These mechanics were meant to be optional and tested with varying groups of users.

More specifically, we explored:

  • different core modes (e.g., 3 rounds only, unlimited rounds)
  • increasing audience engagement via voting
  • points system
  • ability skipping difficult questions

In addition of user flows, motion prototypes were created better communicate and understand the core concept and pacing of the theme.

 
 
 

 

Art Direction and Visual Design

While the ustwo team was refining flows and secondary interactions, the team at The Mill worked on art direction and visual design for the 2 Live Themes. They were responsible for:

  • exploring different Visual Design directions
  • create final and refined UI elements
  • iterate on various motion pieces (such as battle animations, points animations, etc.)

All visual design explorations shown below were created by The Mill

 
 

 

After a Visual route was decided, several updates were made to simplify and streamline the mechanics, as well as further UI explorations. More specifically:

  • Interface and component layouts
  • Fonts
  • Intro + tutorial pages
  • Theme icon

Further UI Explorations + Release

 
FB_fe.png
 
 

This Or That was released on the Camera Effects Platform on April 18th, 2017 during Facebook's F8 Developer conference and was covered by TechCrunch. This Or That is currently available on the Facebook app.

 
tot_release.png
 
 

 

WHAT I LEARNED

 
 

Successful communication and feedback mechanisms are based on understanding exactly what information you need

Because of the large number of people involved in this project, I had to constantly go the extra mile to make decision-making as simple and clear as possible. This meant truly identifying the least amount of information I needed to move forward and familiarizing myself with team members' workload.

Trust between team members is a majorly important component of a successful project

Completely dividing ownership of the two concepts, as well as having The Mill as the Visual Design partner, meant having complete trust for my teammates and how they tackled their work.

 
 

 

THE TEAM + MY RESPONSIBILITIES

 
 

The team consisted of:

ustwo New York (UX+Process focus):

  • 1 Project Manager
  • 2 Product Designers

The Mill (Creative+Motion focus):

  • 1 Project Manager
  • 2 Art Directors
  • 2 Visual/Motion Designers
  • 1 Copywriter

Facebook:

  • 1 Product Owner
  • 1 Project Manager
  • 1 Design Contact
  • 1 Engineering Contact

My responsibilities included:

  • Ownership of the pitch proposal
  • Research
  • Workshop planning
  • Defining an execution process alongside the 2 other ustwo team members
  • Prioritizing areas of focus for Live Theme ideas
  • Communicating our work and presenting to the Facebook Live team
  • Defining UX Flows + creating wireframes
  • Creating Motion prototypes
  • Offering feedback to the visual design work done by The Mill