<   Trends

Fundamentals for a UI conception

In this post, we will set-out how the Wyplay Studio Design team addresses the different stages of designing and implementing a user experience for the TV world.

• Wyplay have a dedicated User Experience (UX) design team
• The team benefit from 10+ years of Wyplay experience in the Pay TV market
• Wyplay have developed two reference user interfaces (UI), Frog Turnkey and Frog Premium
• We have experience deploying our UX/UI solutions on all devices including low end STB’s
• We can also consult on your existing UI and provide recommendations

Over the last 3 years, the TV environment has changed dramatically. These changes have to be taken into account in the user interface conception:
- A significative growth of content sources,
- Media consumption more and more de-linearized, with the growth of catch-up and VOD.
- Arrival of short formats brought by mobile,
- Multiscreen with smartphones, tablets and PCs’ use becoming more and more important,
- And finally, exchanges’ needs and shares inherited from social networks.

The TV in the living room is no longer the only way to consume content; it will be necessary to adapt the user experience to cater for alternative devices and content models.

Frog By Wyplay UI

Before beginning to draw the first lines, it is essential to follow a few steps:

- Define the needs

At Wyplay , the Studio Design is mainly involved in 3 tasks:
- The reference UI design, to speed up Wyplay products’ release,
- The design, for an operators specific User Interface,
- The consulting to operators, to improve their existing products’ UX.

Whoever the client is, external or internal, the Studio Design will listen and capture the needs always keeping in mind a guideline; the simplicity of use.

During this capture phase, main themes will be addressed :

  • Standard features to be proposed
    o Linear TV,
    o Video On Demand,
    o Catch-up TV,
    o Local or remote recordings,
    o Third-party applications’ presence
    o ...
  • More specific features
    o Communication between devices,
    o Content sharing between users
    o Advertising display management in the user interface,
    o ...
Advertising Integration Example on Frog Turnkey
Users sharing in Frog Premium
  • Affected devices by graphic interface

One of the important elements in the capture of these needs will be the identification of the devices that will have to support this user experience (decoder, tablet, smartphone ...).
We are accustomed to particularly powerful mobile devices, it is unfortunately not the same for decoders that are mostly subsidized by the operator and where every euro counts.

Most of the time, we find ourselves with decoders that have little memory, no graphics acceleration and a computing power 5 to 10 times lower than a smartphone’s. This must be taken into account in the proposed user experience.

First Frog By Wyplay reference hardware
  • Gather and process the data to display

Once the needs are defined and the constraints understood, it’s necessary to list all the information to be displayed. Then, organise these different information by category, this will help to move to the next step.

  • Define the scenario

These are the user paths that will identify when the user will need the right information and above all, how to access it.

Some examples:
- By which interactions to access a program information seen in live?
- By which interactions to start the recording?
- How to do a search?

We can now start giving life to this UI.

Frog Premium draft, June2016
  • Set the graphic style

All scenarios are defined?
Perfect, we can go to the definition of the graphic style of the UI. It is very important to respect the conclusions of the previous steps because we will have to:
- Have an artistic direction in the service of the user experience, while respecting current trends.
- Respect requests from different sources.
- Take into account the material constraints in order to have the most fluid experience possible.
- Ensure a seamless experience on all media.

  • Define animations

The user interface is animated but this animation must serve the user experience and not just for a wow effect. It helps the user understanding his actions, signifying to him a work in progress, strengthening a graphic element, etc.

Micro interaction helping comprehension
  • Make prototypes

In order to validate some interaction ideas, it is important to create prototypes that help test these concepts. No matter what technology is used.
This helps to avoid errors and refine navigation. These prototypes are also the best way to include the operator in the process, the previous phases have been quite abstract.

  • Write the graphic specifications

This is the UI’s specification. These are all the previous steps gathered in one document. All the screens are perfectly detailed there,
Once these graphical specifications are written, it’s time to hand over the development and integration of the UI.

Graphical Spec of the Channel list, Frog Turnkey 2015
  • Permanent support to complete the project

There will always be adjustments to make, related to development constraints. The Studio Design team works in close collaboration with the development or integration teams, to ensure the proper implementation of artistic directions and expected performances.

After a few months, the UI is born in the final version, perfectly integrated into its product.

Today, two interfaces developed by Studio Design exist, Frog Premium and Frog Turnkey.

< Previous
Next >