OTT App Builder

ROLE:

Lead Designer

RESPONSIBILITIES:

UX Research
UX Design
UI Design

TIME FRAME:

2022

RESULT:

Won a WHOLE LOT of new Broadcasting contracts

This is one of those 0-1 projects that started with a strong business goal: create a product to win contracts from broadcasters.

‍

These users were clamboring to get their video content on TVs to provide a "lean-back" experience for viewers. I was charged with designing "the Wordpress of TV Apps" to provide the easiest possible solution.

Objective

As often happens in tech, I was assigned a big task that needed to be done QUICKLY. JWP was courting some customers that really wanted to get their videos on people's TVs.

One of these customers was Symphony. This is a platform that allows customers to access the most incredible classical music performances from anywhere in the world.

But they were running up against a wall: their customers didn't always want to listen on their phones or computers. At the end of the day, customers wanted to unwind on their couches! This is referred to as a "lean-back" experience. To provide this, they'd have to create an app a la Netflix or Hulu. The problem was that they didn't have a big dev team to build out all the infrastructure.

Symphony would sign a big new contract if we gave them a tool to allow them to create a TV App ... without a big dev team

A Solution for Susie Symphony

"I need a super easy way to build a TV App from all the videos in our media library!"

Understanding the user's needs

The next step was to determine what the user actually needed to accomplish. I collaborated with Marco the PM on a round of user interviews to learn more about the people who would actually be using this tool.

A flow started to take shape in my mind as users described their daily responsibilities.

USERS NEEDED TO:

  • Add, categorize, and rearrange videos
  • Configure settings
  • Create and manage "libraries", pages within the app
  • Allow 3rd party apps like Applicaster to import the app configuration

"This is how I expect to edit the app"

Add or remove videos
"I'll add new videos to our library and remove expired stuff"

Rejigger the layout
"It's Mahler's birthday so I'll place him front and center"

Switch to Applicaster
"I need to import all the changes I just made"

Deploy the app
"Now viewers will be able to enjoy the fruits of my labor!"

Low-fidelity

Now we understand what users need.
The next step is creating the simplest possible design!

After a few rounds of good old-fashioned sketching, I began to converge on a bilateral split:

Left side: Contains everything visible to end-users in 3 tabbed pages: the media list, libraries (separate pages for movies, tv shows, etc), and branding options. Susie will spend most of her time curating this section.

Right side: contains all the “set it and forget it” configuration options that Susie won’t need to fuss with too often.

Once I knew where everything was going to live, I began defining the flows that would allow Susie to accomplish her goals.

"I want to add a new shelf of Mahler concerts"

STEP 1

"I click the dropdown"

STEP 2

"I locate the Mahler playlist"

STEP 3

"I click 'Add'"

STEP 4

"A new Mahler shelf appears!"

After a lot of internal testing and debate among the dev team, a high-fidelity design took shape:

Things I'm proud of:

Intuitive mapping of controls

Don Norman has convinced me of the power of "mapping": the idea that a thing's controls should mimic the layout of the thing itself.
‍
Since Susie isn't highly technical, it was important to me that the interface for this feature look very much like a video app she already uses on her own TV. So I designed a series of rearrangeable shelves that look exactly how they'll look in the app!

‍

Fullscreen mode

Susie Symphony needs to edit the layout of this app constantly to keep it relevant and fresh. This means reordering shelves! While this is easy to do in the content table featured above, the available real-estate on the page is pretty small and there are lots of peripheral elements like headers and navbars that don't support the task at hand.

To provide a more ergonomic experience, I created this fullscreen mode that eliminates distractions

Infrequently-used settings are neatly tucked away

One problem I have with technical software is that all settings are treated as equals. So often, arrays of "set it and forget it" settings just sit around slowly gathering dust and taking up valuable screen real estate.

‍

The result of this is OUTRAGEOUS VISUAL CLUTTER. The user has to take on an insane cognitive load to find the one little setting they were looking for.

‍

Result

Symphony's app in real life:

When development was complete and a brief demo was given, Symphony put together their TV app with minimal friction, and DID renew their contract!

They also gave us a lot of feedback and ideas for next steps. They wanted to be able to showcase live events that hadn't occurred yet, and create little landing pages for all their different concert halls and venues.
‍
This was just a first pass that led to lots of changes throughout the years, but it served a really important purpose, secured us a new market, and allowed the Broadcast team to take its place as JWP’s moneymaking furnace. A success all around!

let me figure out how your product should work

🌈 So your users don't have to 🌈