Valentin Loschinin

Ayyo Redesign

Redefining the experience of watching movies

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.

Ayyo Movies
My Roles

Concept designer, Product designer, UX designer, Visual designer

Product

Ayyo Movies

Company

Innova

Release date

March 2015

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.

Co-creation workshop

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.

Ayyo devices

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.

Ayyo UI components

UI elements

Ayyo volume control UI

Volume control

Design principles

As a team we needed some rules to work together. I created our design principles that included several statements for all designers who worked on the project to keep in mind:

Dominance of the content

Encouragement of social interaction

Effortless access to the movies

Respect of personal preferences

Useful is beautiful

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:

TV wireframes

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:

Movies

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

Movie categories Menu Card payment

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

Movie details

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

TV video player TV video player submenu

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.

Smart TV prototype

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.

Ayyo iPhone app Ayyo iPhone app Ayyo iPhone app

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.

Ayyo mobile app structure

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.

Ayyo web wireframes

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.

Movie page

Movie pop-ups contain essential information about the movie including user opinions and related movies

Movie details Movie cast

Additional information about the movie: synopsis, cast, tech details

Feed of movies Friend list User profile

A sample feed of user generated statuses and pop-ups of user profiles

Creative team