product design case study

WUAKI TV MOVIES & TV SERIES WEB REDESIGN

2017

9 min read

Preview of the mobile and web desktop design

In a moment where the services were transitioning from the desktop to the users hands (with the boom of mobile phones), when people were starting to buy digital goods instead of physical ones, Wuaki went one step further and bet to bring a cinematic experience to the users' devices.

This was a moment of growth when the company expanded from one market to multiple, from 1 language to many, and from 1 business model to others. Our goal was to escalate the platform while bringing alive the vision of bringing the cinema experience to the users’ phones.

Background

Wuaki.tv is a service that provides movies and TV series on demand, via renting, purchasing or through a subscription. It focuses on providing video content through TVs, as well as supporting it in on the web, mobile, gaming consoles and other TV connected devices.

The main focus of the company is to provide content on TV with different TV apps and provide a similar experience in mobile and desktop apps.

In this project, we would redesign a 4 year old website that only supported desktop, to support tablet and mobile devices as well.

1. THE CHALLENGE

Bringing the movie theater experience to the computers and phones

The website at the time only supported desktop web and looked like a website from the previous decade. Despite that, it accounted for about 30% of the usage and 45% of acquisition at the time.

We knew we had to invest on major improvements in usability, time response, improve technology and overall service improvement. We had to make major improvements in our video player, offering viewers access to the movies as quickly and familiarly as possible.

There were still too many questions that we had regarding the market environment and business direction. Before starting, we needed to address the following issues:

  • The Business was expanding from Spain to other European markets that will have different business models. How would that impact the final product? All countries will have VoD models, while some others would be based on discount offers and partnerships, and some countries will even have subscription services
  • Who were our users? We somewhat knew the users in Spain, but we didn’t know who the users in the other markets would be. How would they differ from the other ones? How would we associate that information with the different business models?
  • Support multiple languages (yup, it’s Europe)
  • Unify and create a common Design Branding and UI with TV and Native mobile apps
  • Creating a core in javascript that would be shared with the TV apps
  • Identify other user opportunities

Constraints

  • We didn’t have a dedicated source for data analysis
  • The project started without User Personas and a specific UX process
  • Some of the decisions were carried over from other platforms

My role

I was the Product Designer for this project. I was also supporting the TV apps and marketing campaigns at the time. My main responsibilities were:

  • Work closely with the Product Manager and Development Lead to research and define the product
  • Sync constantly with other stakeholders from different teams and platforms on a fast changing product direction
  • Create, recruit and conduct Usability Tests
  • Create User Personas
  • Create wireframes, mockups and prototypes and verify them with users (internal and external)
  • Conduct A/B testing after release

The team was configured by 1 Product Manager and Owner, 1 Designer, 2 QA Developers and 4 Front End Developers.

2. understanding the problems

The key questions to really understand the business and the product

  1. Identify who our users are, who the new users were going to be, if they were going to be any different
  2. Understand the impact of growing to multiple business models: in terms of user behavior, tech and operational impact that will take on the services and platforms
  3. How the device and market changing landscape would impact the users behavior? How could we identify, and take advantage of that?
  4. Improve branding recognition: each device had a different UI and brand style (there was a lot of work to be done, trust me on that one).
We needed to create a design brand guideline and UI guideline that would serve to strengthen the company image and unify the experiences between the different devices
3. the research process

The Process

Design Process diagram

3. The research process

Understanding Cinema and TV watchers

The starting point was to summarize the assumptions and conducting a quantitative analysis following 2 surveys with a total of about 900 users. The survey focused on creating a demographic profile and obtaining usage information that would lead on creating user scenarios and a thorough competitive analysis.

1. The general audience

To understand the users, me and another UX Designer conducted weekly customer interviews that would later become a weekly routine along Guerrilla testing.

During the first 3 months and after collecting insights from 30 users, along the quantitative analysis from the surveys and qualitative from the interviews, we created 5 User Personas that ended up being a template for all the country markets. These were used in different teams for different purposes across the organization.

By the end, we identified the main motivators for users: pricing, catalogue size and quality, family, social life, life habits and experience with the device. We also identified the goals and frustrations that different from the different personas. Here are the main User Personas:

User Persona 1
User Persona 2
User Persona 3
User Persona 4

2. Survey findings

Based on the previous research, we were able to find and prioritize the main user goals and frustrations:

List of user goals
List of User Frustrations
4. Framing the product

Redefining the service

To redesign the library and optimize for subscribers and non-subscribers, we tracked the users on the new web, particularly the discovery (browsing + search), their library usage with emphasis on tracking the time of usage, flows and exit points, and purchase patterns. We did that on multiple devices to understand how they were used and how we needed to target them.

After the initial research experience, we understood that the consumption experience had been segmented throughout the different devices:

Target segmentation by device
devlce-user-journey-2
  • TVs were leading on for acquisition and consumption, though the web was the primary purchasing channel for campaigns
  • The web and native mobile apps were used mostly for discovery (finding new content)
  • TVs, desktop web, native tablet devices and gaming consoles for consumption

This helped me shape where the focus on the web was trending to and what the web and mobile web should do:

Specialize on acquiring users and improve the discovery experience to increase conversion. Supporting TV devices and mobile devices by pairing them to create a better native experience.

Old vs New device user journey targeting comparison

The goal of the new web was then to enhance registration, discovery and user libraries capabilities while keeping the purchase and supporting but deriving playback to native devices, especially TV.

Reframing the problem

By adding a web mobile, we’ll ensure that the users will be able to access and discover new content at all times, from any channel. Additionally, by narrowing its focus on discovery content, conversion will go higher up in TV and native platforms.

5. solving problems

Redefining the service

I formulated different hypothesis to solve the identified problems: I started by reframing the problems as opportunities, create hypothesis about these and testing them. Next, I am going to showcase 3 problems to solve.

Problem

It takes a lot of time accessing their ongoing content 

KPI

User Engagement and Time on Task

OPPORTUNITY

How Might We help users find their content easily? 

HYPOTHESIS

We believe that adding content that the user is currently watching in the homepage when opening the app will increment the content consumption.

HOW WE INVESTIGATED AND IMPLEMENTED IT

Added a currently watching list on the Home page that would appear only when users have ongoing, not finished content. There was a slight but significant reduction in rebound rate and it reduced dramatically the time the users got from signing in to start playing. 

Continue watching list

A/B tested watchlist in different positions in the homepage. The higher ROI overall was right after New Releases and banners.
We added the to the Subscription page and Library as well

Problem

Users rarely find relevant content

KPI

User Engagement and Purchase

opportunity

How Might We give people customized content as soon as possible?

hypothesis

We believe that adding a recommended list will give the user more accurate content for their taste and avoid showing non relevant content.

how we investigated and implemented it

As an initial step towards tailoring the content to each user, we identified and created a Relevant content user list.

There were 2 versions. One was based on: searched history, purchases, watched content, related genres and authors. The other one was creating lists based on previously watched content.

The content that we tested for the first version had a higher conversion rate. In the next version, we added more lists (about 2-fold the total height of the homepage) but it didn’t have a significant impact in click rates. After A/B testing different list positions in the homepage, the best converting list was moved to the top and changed its name to “Recommended for you”.

After 3 weeks, the conclusive data showed that the overall most successful click ratio was in the second position right after New releases and continue watching.

Later on, the BI team would overtake the task and start testing with different sets of criteria.

Different lists in the homepage

Recommendations based on search history, purhases, watched and related content

Different lists in the homepage

Recommendations based on previously watched content

Problem

Subscribed users and users that own large libraries have difficulties to find a particular content

KPI

Customer Satisfaction and Time on Task

opportunity

How Might We make the library more accessible for Users with large libraries?

hypothesis

We believe that separating the library by movies and series for users with subscriptions and large libraries will help finding their content easily.

how we investigated and implemented it

One of the main problems in the service was that it was difficult to differentiate between Subscription and On Demand (rent or buy) content. For instance, I iterated multiple times on different tag labels, positioning and UI components to differentiate how to find the content, as seen on the image below:

Cover types with metadata

2 different options in labeling the content: On the left, all labels go up top. On the right, The subscription label is on the bottom and purchased related labels on the top.

6. structure

Navigation

Adapting the structure to different business models in different markets.

Navigation structure
ONLY TVOD (PURCHASE & RENTING MODEL)
Navigation structure: ONLY TVOD (PURCHASE & RENTING MODEL)

tvod + discount oriented market

Navigation structure: TVOD + DISCOUNT ORIENTED MARKET

tvod + svod

Navigation structure: TVOD + SVOD

tvod + svod + discounts or family section

Navigation structure: TVOD + SVOD + DISCOUNTS OR FAMILY SECTION

Wireframes

Menu wireframe responsiveness

Top navigation and secondary navigation in the Users Account and management “My Wuaki”

Other Wireframes

Wireframes for the main sections
7. Mockups

Final Design

Old website vs new website homepages

I did adjustments to the structure so that it could be adapted to different business models. The model was focused on Discovery, Video library management, Registration and Purchase.

Homepage

Adapted tactile zones, menus and carousels to optimize for mobile devices. As well as increased the lists in the homepage with the changes mentioned above

Responsive design in the homepage for mobile and tablet
Wuaki TV homepage for desktop

The lists in the homepage include new releases, recommendations, originals,
TV series, trending and wishlist. I also added customized colors and motifs to highlighted lists

Lists

Movies list mockup on desktop

Search

The newly added recommendation and type prediction helped the users to find their content as soon as they could see it. Image covers were added for easier recognition

Search entry point: homepage
Search history for mobile
Search type prediction for mobile

Search prediction in smartphones

Wuaki TV prediction search in desktop
Search typing prediction in tablet

Search in desktop and tablet

Detail Pages

The newly added recommendation and type prediction helped the users to find their content as soon as they could see it. Image covers were added for easier recognition

Design for movie detail page for mobile devices
TV series detail page for desktop

My Library

This is the place where the users would come to continue watching their purchased content. It would have different looks depending on the size of the library and currently being watched content

My library improvement for Deskop

Library with ongoing content

My library section for web mobile

Library without ongoing content

Player

Improved playing experience by adding a loader reminiscent of movies playback, improving the design with a cleaner UI and a faster playing experience. I also added extra content options for purchased movies, an option to 'add to the Wishlist' inside trailers and Continue Watching when the episode is finishing.

Player: Loader interstitial
Web player
Player: Watch more trailers or previews
Player: Watch extra content
Player: Watch more episodes
Player: continuous episode playing (play next episode)
8. wrapping up

The Conclusion

The project was a big success. Allowing successfully to operate with different models initially in 12 different countries (now in most of the European Union) in multiple languages. Supporting tablet and mobile devices in particular, meant that the users could access at all times and increase registration, purchases and overall NPS.

  • In 5 months purchases in mobile platforms surpassed the desktop ones in the web
  • Registrations from SNS and email campaigns increased a 15% in the first 2 months after release
  • Increased Native Apps downloads by 35%
  • Purchase rate increased 5%

* The actual values have been changed to comply with my NDA and other confidentiality purposes

 

Challenges

  • Changing deadlines and constant changes from direction
  • Inability to access users from countries where the service was not established
  • There were strong dependencies with different platforms, especially with TV
  • As a designer I was supporting other projects at a time which made difficult to focus 100% on the project
  • Structural changes that sometimes made difficult to communicate with Developers and Product Management
  • Difficulty of recruiting users on a weekly basis
  • Increasing amount of features in the middle of redesigning the app

What’s Next

  • Improving the AB test platform
  • Switch model from to design expimentation to data-driven design
  • Finish the Design system and guidelines to be implemented in multiple platforms

Copyright © Jaime Zamorano. 2020
Legal details

Back to top Arrow