Brightcove Beacon is a platform that significantly reduces the time and cost required for video streaming companies to develop their branded apps. I helped the team define users, scope, and structure of the product, then led the design of the Monetize module.

DURATION
6 months
PLATFORM
Desktop
Type
1-N product
B2B
CMS
Monetization
role
Design lead
User research
UX strategy
Design exeution
qualifications to highlight
Ability to untangle complex problems
Experience with prioritizing conflicting user needs
IMPACT
500+
net new users

After one year since the launch of Monetize, the platform gained over 500 net new users.

82%
user retention

The platform achieved a record-high annual customer retention of 82% among all company products.

75
SUS score

We conducted a survey among 87 active users, resulting in a notable SUS score of 75.

context

The World of Xstream.ly

Xstream.ly is a video streaming company with the goal of growing audience with engaging content. The company operates with a 'team of teams' structure, involving extensive cross-team collaborations with various internal and external roles.

Design Process

Customer Problem

Xstream.ly aims to rapidly acquire viewers with their branded app, but the significant development cost hinders its progress.

The sheer amount of manual work in curating, publishing, and monetizing video content greatly reduces efficiency.

There are 3 key roles involved:

Laurel
Product Manager at X.treamly, an OTT branded network
“I am a trailblazer who takes others with me, like it or not!”
Current tools
Current tools
Current tools
  • Develop OTT offering
  • Deliver app experiences
  • Set KPIs for growth
  • Integrate and analyze app usage
goals
  • Deliver successful OTT products across multiple platforms on time
  • Grow and retain audience
  • Keep her products to be of highest priority to the company
Needs
  • Relevant video & app usage data
  • Reliable access to technical resources
  • Fast workflow for updating design
pain points
  • Dependency on other teams causing delivery to delay
  • Poor prioritization and changing priorities
  • Repeating work to bring viewer experiences across platforms
Sharyn
Content Producer at a X.treamly, an OTT branded network
“I always thrive to give the best for producing engaging videos.”
Current tools
aptitude & altitude
responsibilities
  • Oversee content production
  • Develop creative ideas for multi-platform objectives.
  • Implement video content strategies
  • Optimize OTT content
goals
  • Produce engaging content
  • Make sure content meets criteria for each delivery
  • Deliver content on time and budget
Needs
  • Up-to-date viewership analytics
  • Accurate digital rights and availability for content delivery
  • Streamlined workflow
pain points
  • Discouraging viewership
  • Redundancy in tools and workflows
  • Complexity in digital rights
  • Ever-changing policy and scope
Brandon
Pricing Manager at X.treamly, an OTT branded network
“ Just can’t help thinking how much tedious work is behind the subscribe button everytime I’m about to click on it.”
Current tools
aptitude & altitude
responsibilities
  • Lead and direct monetization strategy
  • Manage total monetization procedure
  • Maintain pricing history database
  • Perform financial evaluation
goals
  • Enhance profitability of the products
  • Guarantee accuracy of monetization
  • Ensure competitiveness of plan offerings
Needs
  • Integration of pricing tools
  • Effective analytics and data visualization
  • Current competitive pricing landscape
pain points
  • Heavy manual effort for matching pricing among multiple systems
  • Difficulty in analysing the impact of pricing changes
  • Dependency on the dev in changing monetization models

Value proposition

Brightcove Beacon enables video providers to grow and retain global audiences with flexible layouts, monetization options, and unmatched reliability. Customers would choose Beacon over others because it is:

Cost effective

Beacon greatly reduces overall costs by eliminating the need for software developers and developing apps for each platform.

All-in-one

Beacon allows creation of multiple apps with a single tool that accommodates diverse roles and workflows.

Ultra-monetizable

Beacon offers the most diverse pay models in the market to maximize customers’ revenue.

job mapping

Which areas to streamline?

Understanding the product's goal of streamlining user workflow, I developed a job map from interview data. Then, I led a workshop with Project Managers and UX strategists to pinpoint focus areas.

Red dots represent priority levels, determined by the frequency or importance of the job.

areas

info arch

Where Do They Live?

The information architecture was structured to concentrate each role's workflows within their own module, while enabling flexible interactions across different modules.

Content Producer
Product Manager
Pricing Manager

key experience

How They Collaborate?

The initial release prioritized the needs of content producers and product managers. It empowered them with tools to independently manage videos and viewer applications within their respective modules, while also facilitating cross-module collaboration.

diving deep

The World of Brandon

Following the initial release, I spearheaded the validation of concepts aimed at streamlining Brandon the pricing manager’s workflow. Additionally, I crafted interaction and visual design to ensure usability, especially for tricky tasks.

brandon avatar
Brandon
Pricing Manager at X.streamly, an OTT branded network
responsibilities
Lead and direct monetization strategy
Manage monetization procedure
Maintain pricing history database
Goals
Enhance profitability of the products
Guarantee accuracy of monetization
Ensure competitiveness of plan offerings
Needs
Integration of pricing tools
Effective analytics and data visualization
Current competitive pricing landscape
pain points
Heavy manual effort for matching pricing
Difficulty in analysing the impact of pricing changes
Dependency on the dev

Breaking down

From Problem To Actions

After matching user and customer issues, I deconstructed the main job "monetizing videos" into micro jobs, then condensed these into two actionable UX goals aligned with our value propositions.

Customer problem
How might we help X.Treamly to minimize expenses associated with the development, deployment, and maintenance of the streaming platform?
User problem
brandon avatar
How might we assist Brandon in streamlining the process of monetizing content with efficiency?
Main Job
Create and update SVOD plan
Micro Job
Set up monetization models
Micro Job
Create and update SVOD plan
Micro Job
Overwrite location and device of ad
tags
Micro Job
Ad ad tags to
videos
Micro Job
Add external plan name and
description
Micro Job
Specify plan availability
Micro Job
Assign a plan to playlists, movies, and TV serious
Micro Job
Associate plan with videos based on copy right restrictions
Micro Job
Make sure video content is monetized correctly
UX goal 1
Enable Brandon to create and manage a plan without vendors and tools
UX goal 2
Streamline the Brandon’s process of associating a plan with videos
Value prop
Ultra-monetizable
Offer diverse pay models
Value prop
Cost effective
Cutting development cost
Value prop
All-in-one
Minimize tool burden and manual effort

challenge in discovery

Discrepancy Between Old and New Research Findings

In the development process, we faced conflicting data concerning content monetization. Initial research indicated that the pricing manager was in charge of video monetization. However, fresh interviews I conducted for the Monetize module suggested that this responsibility lay with the video producer. This discord necessitated a crucial decision, as these two scenarios would entail radically different data structures and front-end designs.

approach

Sequenced Validation

Upon undertaking subsequent steps, it was discovered that the product primarily catered to small organizations where the content producer monetizes their content. Thus, after validating with customers, we chose to proceed in that direction.

Distill patterns
through deeper research
Align with
business goals
to narrow down solutions
Test assumption
with storyboarding

Larger orgs

Monetizer makes sure the correct plans exist and content is associated to the correct plans

Small orgs

Product coordinator uploads content and assigns the content to plans at the same time.

challenge in ideation

Complex Collaboration and Workflows

In the ideation phase, the team was overwhelmed by research data, and the design process was blocked by the complexities of collaboration and workflows.

approach

Leveraging Granularity

Using the job map as a guide, I broke down the primary job into four distinct micro-jobs, each with its own set of user flows. I assigned each flow to a Junior Designer, while I took on a flow myself. We then iterated on our respective flows based on user feedback gathered from usability tests, creating a collaborative and dynamic design process.

Micro Jobs
User Flows
Create/update monetization model
Create plan
Create SVOD plan
Create TVOD plan
...
Edit plan
Edit SVOD plan
...
Determine ad placement
Create ad tags
Add ad tags to videos
Add VOD tags
Add Live tags
...
Connect with Monetize
Make sure video content is monetized correctly
Add plan to video
Add plan to individual
Bulk-add to videos
Add plan to group
Add plan to playlist
Add plan to series
...
Review video and ad engagement analytics.
Review from Analytics
View performance
View engagement
...
Review from Videos
View performance
...

challenge in design execution

Complex Data Structure and Input

When we entered the design execution phase, the team was challenged by the complex data input and structure that a user needs to cope with in order to create a plan.

approach

Rigorous Bi-Weekly Design Sprints

To address the complexity in data input, I spearheaded bi-weekly design sprints. In these sessions, designers selected relevant stories, collaborated with peers, project managers, and developers, conducted usability tests, and refined designs based on the gathered feedback.

Before

Horizontal tabs

Invisible goal

After

Vertical tabs + stepper

Clear call-to-action and more flexibility

More dev work

Before

The user sees all data inputs upfront.

More mental effort

Invisible content

After

The users chooses which option they need first, then add data.

Less mental effort

Better visibility

Before

The user sees all data inputs upfront.

More mental effort

Invisible content

After

The user sees the data in a preview mode by default.

Less mental effort

Better visibility

Design patterns

Getting into Details

Reuse existing components for new and complex use cases
Plan in draft status
Plan with error/incomplete fields
Plan published
Plan published but with unpublished changes
Reuse existing components for new and complex use cases
Detail specs
detail spec
Hover state
hover state
Overflow
hover state
Scalability
scale
Overflow
quick edit
Conflicting rule sets
quick edit
Mixed value
quick edit

challenge

Navigating Complexity

I faced a flood of technical requirements requiring the collaboration of both teams. However, the current team structure resulted in a lack of joint effort.

Complex and ambiguous technical framework
Complex and ambiguous technical framework
Disconnected
development teams
disconnected development teams

Approach

Map data points
through matrix
Break the silos
through design workshops

With this step, I not only resolved longstanding issues in a 2-hour workshop, but also bridged two teams that had never previously collaborated, fostering future collaboration.

Iterations of key experiences

Create Plan

Before

1. The pricing manager clicks on “Create plan”.

Plan creation and local saving occur only after the user fills in all fields and clicks "Create" on the next page, resulting in potential risk of losing data.

Before

2. The pricing manager changes plan type on the plan detail page.

Confusion about type definitions prolongs task time.

After

The producer clicks on “Create plan” and selects monetization model.

The plan is created and saved with only the minimum required fields filled.

Risk prevention.

Confusion is resolved by providing description of each type.

After 2.0

The producer utilizes the side navigation to filter plans by type.

Mental effort is reduced with filtering.

More clicks

Iterations of key experiences

Add Content to Plan

Before

1. The pricing manager clicks on “Create plan”.

The producer can only associate one type of monetization model with the same videos.

Confusion about type definitions prolongs task time.

Lack of flexibility

Less friction for users with a simple pricing structure

After

The producer can associate different monetization model with the same videos under different rules.

Error prevention

Increased flexiblity

More friction for users with a simple pricing structure

phase 2

Final Design

Brandon
Pricing Manager
"I am thrilled to share that I now have the power to choose from a wide array of exciting monetization models and effortlessly create plans, all on my own. No more reliance on external help!"
Create plan
Select monetizaton model
Brandon
Pricing Manager
"I’m amazed that the time-consuming process of setting up plans that used to take days has been streamlined into a matter of minutes. “
Configure plan
Publish plan
Sharyn
Content Producer
"I now effortlessly incorporate video content into plans, considering time and geographical restrictions. It saves me time, adds flexibility, and enhances my content curation."
Add content to plan: advanced path
Sharyn
Content Producer
I can also swiftly add videos to plans during upload or in the CMS using bulk editing, completely disregarding any content restrictions.
Add content to plan: easy path

What I learned

Product makers fuel business success
by solving customer problems.
Unpacking

Through a process of evaluating the actual doers of adding content to plan before embarking on solution generation, we  redirected the development trajectory to ensure alignment with the actual buyers' needs.

Designers create a better experience
by distilling complex problems into simple solutions.
Making users comfortable with the complexity

Enhancing simplicity in the Saas space can be an admirable goal, but it is crucial to acknowledge that certain situations, such as crafting a SVOD plan, may demand a level of complexity. For tasks that occur infrequently and carry significant consequences, embracing a certain degree of intricacy can safeguard against errors and provide invaluable flexibility.