Ayyo Redesign

A multi-disciplinary project to create a new version of the Ayyo — video on demand service that enables everyone to watch the best movies in the most convenient way.

Challenge

Ayyo is an online cinema with a wide range of films available to suit anyone’s taste. The product had been around for several years and extensive data about user behavior and preferences had been acquired. There was a need to create a new version of the service based on that information.

Research

I started by conducting a workshop with key team members. We defined what the most essential qualities of the service should be, discussed the most valuable features, and decided what we could do differently in the future to enrich the experience of watching movies.

We conducted interviews with existing users by phone on a regular basis. Any team member could participate. It was very helpful to understand how people actually used our product and to find pain points, bottle necks and barriers for the users.

A selection of ideas we came up with during the workshop

In order to dig deeper I analysed the content, went through every tiny characteristic of each peace of information and consulted with our inhouse movie experts. It helped me to figure out what is the most important information about a movie, to come up with new ways of searching for movies and create a better information architecture.

Strategy

From the research I realized that the majority of the users watched movies on TV. It is more convenient because the screen is big and usually watching a movie is a special time to spend with their family and friends.

Therefore we decided to focus on the TV as the main device for watching films. We considered using other platforms for secondary functions, for instance, searching for movies or sharing opinions about movies.

Visual design

I was inspired by the appearance of professional video production equipment and their user interfaces. Also I was eager to add something bright and playful while staying away from suppressing an original look and feel of the content. The final style has a unique identity and sets visual accents but does not interfere with the content.

Smart TV experience

Since using remote controls is inconvenient and Smart TVs have poor performance I trIed to come up with a solution that would enable the user to view a movie with as few clicks and screen reloads as possible. Here are some wireframes representing different options:

Different options for navigating from collections to a movie and its functions

Layouts based on those ideas were created for the upcoming testing. Here are some screenshots of the potential app:

The main screen of the app displays available categories and the associated movies

Sub screens: a selected category, searching for movies, main menu, a payment form

Movie details: viewer opinions, description, cast and crew and related movies

Movie player and its sub menu

Prototyping tool for TV

Our team was struggling to find a convenient way to create fast prototypes and test our design hypotheses. In the end, inspired by Flinto, we decided to create our own tool. It is allowing us to upload screens and link them with each other by selecting interactive areas and assigning particular remote controls for the specific actions.

Our unique tool easily allows us to prototype for Smart TV

Mobile experience

One of the biggest insights we got from the research was that people want to share what they watched and also want to know what their frIends watched. Our team decided to create an app that allows a user to do so.

A feed displays what your friends are watching, what they saved to watch later, who follows who and so on

Users can add what they just watched, see what the people they are following publish and comment on, and publish reviews and set ratings of movies. It is possible to add any movie, but if the movie is available on Ayyo, the users can watch it right there.

A helicopter view of the mobile app (in-progress)

My favorite tool at that time was Flinto, because it helped me to create and edit the prototype without developing a real app. It was easy to upload some screens, manage their connections, set transitions and try everything. I used it constantly, examining even the slightest changes.

Web experience

We considered the website to be a place where the user could try all the features and functions that we already have on other devices, but the main goal was to increase the number of viewing.

Wireframes of key web pages (in-progress)

My focus was on the flow of looking for a movie and the features that supported the process of searching and choosing a movie to watch. I figured that the best way to create that flow was using pop-ups.

Users can click on a movie and its detAils will be displayed as a pop-up. If they want to return to the search results they just need to close the popup at the same time it’s easy for a user to continue to a related movie or purchase a movie.