© 2017 by Moshe Shmuel.

Yaveo was the first Spanish language streaming service targeted at bilingual, bicultural U.S. Hispanics. It also happened to be DIRECTV’s first streaming service that set the course for the company’s OTT streaming future and eventually led to the creation of AT&T TV NOW.

 

As a product designer, my role was to redesign the service architecture and UI components from the ground up. I had to completely transform the onboarding and acquisition flow, live streaming and account management features to a delightful and competitive experience that was easily accessible across all platforms.

Client: DIRECTV     |    Year: 2014 - 2015      |     Platform: Multi-Platform

Assessing the Product Health

I was brought in to lead and prepare Yaveo for its upcoming market launch set to happen three months later. With a challenging list of goals to achieve and a short timeline to work with, it was essential to first obtain a clear assessment of the product's current condition.

I began my evaluation using my "Sum of UX Parts" framework*, which helped form a clear picture of the current condition of the product, and gather insights into what we know, want to know, and what it takes to get there.

USER
PRODUCT
MARKET
COMPANY

*

"Sum of UX parts" is a framework I use to help the full product team gain a rapid and cohesive perspective of all the aspects that impact the overall user experience (product, market, company, and team). The framework requires using readily available resources and methods, such as current roadmap, KPI and business goals, subject research papers, market landscape reports, heuristic evaluation, pitch decks, and simple conversations with the different teams (marketing, dev, production, content, etc.). The above pyramid shape (which also explains my logo), is a simple way to demonstrate what impacts the product UX (because a product is greater than the sum of its parts) and how we must balance these parts to deliver a better experience to our users.

USER

Identifying the Missing Piece

The above UX artifacts provided a complete view of the problems the product was facing. But still, what about our team?

Was our team healthy?

 

We wanted to test the team's and vendors' workflow, using this first set of wireframes (below), and a follow-up survey. This final step helped capture each team's POV, inform future deliverables and processes, and gain the key insights we need to work on.

MARKET
PRODUCT
COMPANY

The Challenges Emerge

Breaking down our core challenges helped us shape the overall product design strategy inside/out. It also contributed to the development of a more fitting product design process to accommodate our scale, scope and short timeline.

“It was about implementing a stable approach to our product development more so than implementing a process."

PACKAGE DEAL

The packaging and presentation of the design deliverables gave way to a strong framework foundation.

  • It had to maintain a clear and consistent layout, so anyone who read it would know where to look, what to ignore and be able to quickly review the scope, rules, and relationship between UI components, pages, and states.

 

  • It had to capture all the relevant requirements gathered from each stakeholder and communicate it in a clean and clear manner.

 

  • It had to present the complete UI behavior for each device type, principles and specific OS requirements.

 

  • It had to be a living document that clearly tracked and displayed the differences in revisions for each version release.

CLEAR PRIORITIES

Guided by core user needs, we carefully prioritized which features/capabilities were important to which team and which ones could be pushed to future releases.

DRAG AND DROP

I created a comprehensive library of modular templates, stencils and UI components to reduce prototyping and UI design turnaround time.

“Fanlab isn't just another project, this is a fully-scaled company that reinvented the way we test projects”

READY FOR THE REAL WORLD

Forget "Lorem ipsum," the wires included real-world marketing and micro-copy as well as the original iconography that was used in the live product, which helped reduce the design turnaround time and shortened the approval time between departments.

ALL ABOUT THE DETAILS

The wireframework included all the use cases, user flows and the appropriate UI states for each device. In addition, the detailed annotations combined with relevant department rules and rational, provided clear business logic, context and reduced confusion between all parties involved.

It was essential to conduct rapid user testing before the UX approval process began in order to gain a firm business justification and to support product design decisions. The detailed Hi-fi wires enabled a faster and more accurate creation of test prototypes for user testing sessions, which ultimately led to a higher quality of test results due to users engagement with a product that was closer to the "real thing."

THINK FAST, THINK AHEAD
TEST, ITERATE, OPTIMIZE

Every feature and enhancement was prototyped and
backed by several user tests or in-depth studies that were conducted using various research methods, tools, and vendors, to surface the most optimal solution that works for our users.

Inclusive UX review sessions broke the silos, narrowed the communication gap between teams and provided transparent context as to “why we need to push existing boundaries as much as possible to satisfy our users!”

BETTER TOGETHER
USER
TEAM
PRODUCT
MARKET
COMPANY
CROSS PLATFORM ACCESSIBILITY

Browsing and main navigation features remained consistent and accessible across all devices and platforms.

Promoted Channels- VOD/Live/Network

Content Package Upsell-VOD/Live/Network

Channel sidebar module allowed for an easy channel switch without disrupting the live feed. It also provided a minimalist view of the essentials (channel selected, other available channels, favorite channel, and timestamp) with the option to expand and show the full guide information.

Keeping in mind a user’s desire to quickly scan through the channel guide and be able to easily find the information that guides their content choices, the live guide displayed a simple grid of 4-time slots for each channel with only 6 channels at a time. This provided users with the most relevant and concise information needed to quickly scan, select and watch.

EASILY...

Set a program reminder

View more info (channel & program)

Skip to date/time

Mark favorite channels

Purchase premium channels

Navigate using keyboard arrow keys

GUIDING WHAT'S NEXT...

The next phase of the guide was to introduce a more visual approach to browsing channels by incorporating high-res visuals and short looped videos of the current live program. This solution made it easy to decide on what to watch and reduced endless channel surfing.

SIMPLE GESTURES​

Focusing on key tasks that could be done single-handedly, users could effortlessly swipe to the next channel, scroll to browse while watching, flip orientation to view in full screen, and again, swipe to the next channel in  landscape mode

SCROLL
FLIP
SWIPE

And the List Goes On…

So far, our team made tremendous strides towards designing and developing features and enhancements that elevated the overall user experience of Yaveo. But, we were still halfway there, the product roadmap presented more challenging goals to accomplish that would further stabilize Yaveo’s core functionality and experience, that would ultimately turn it into a premium OTT service.

Looking to the Future

“if you thought that the news of DIRECTV launching a Spanish-language streaming service had nothing to do with you, Mr. or Ms. English speaker, you couldn't be further from the truth. Yaveo is the test bed for many of the technologies you'll be using in 2016 and beyond."

 - Stuart Sweet, The Signal Group LLC.

AT&T made a bold statement as to where the company and consumers were heading by placing a giant DIRECTV Now statue made out of old set-top boxes at the Los Angeles headquarters.

Our team’s greatest success was being able to show the enormous potential of how streaming platforms could deliver the ultimate viewing experience for today’s and future consumers. The product we built demonstrated what it takes to not only stand out in the market but also how to serve a leading experience users enjoyed.

 

These factors alone changed the company’s mindset and paved the road to DIRECTV’s streaming future, today you probably know it as DIRECTV NOW.

 

As a result, it was time to sunset Yaveo and shift our focus, knowledge, and efforts to support DIRECTV NOW. Although not surprising, it was still a bittersweet end for the team as every product design team wants to see their creation evolve to a more delightful experience. However, we were excited by the opportunity of offering the same elevated experience to a larger market, especially now that it was the new flagship product of both AT&T and DIRECTV, forever changing how the company was moving toward its entertainment future.