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
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
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
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.
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
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.
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.
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
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.
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