My company was approached by another company that specializes in integrating technology on yachts.
Their idea was to create a customized set-top box system for their clients, which offered users the ability to watch movies and tv series, watch live television, listen to music, and view their personal media (pictures and videos). Our company was asked to do the UX, UI & IX design and the front-end development for the project. Together with a colleague, I set up the information architecture and overall user experience of the application. Additionally, I designed the user interface according to the company's brand guidelines.
One of the biggest challenges of this project was the use of a remote, with a limited set of interactions, rather than a mousepointer. Even though there is an ipad application, which also functioned as a remote, our interface was mainly built for navigation by means of a regular tv remote. The remote would allow for only 7 types of interaction: up, down, left and right navigation, a select button a play/pause button and a menu button (also functioning as a back button, when on the main menu).
The user interface consists out of several layers of interaction. The first layer of interaction features a dashboard and categorized pages of recommendations for the user, plus an option to navigate to more content.
We opted for a mostly row-based layout, with the cursor being stationary on the left. This way the user can keep track of where their cursor is both when they navigate through the row content as when they navigate through the rows themselves. The rows allow the user to quickly explore different categories, whilst still keeping the button presses to a minimum in navigating to the main menu.
From left to right: Movies main screen, Movies scrolled, Music main screen (including music playing) and Language selection.
The second layer of interaction (SLI) goes more into detail, showing a larger selection of content of the specific content type, and several ways to browse through all of the available content, including a filter and a search functionality.
From left to right: SLI first level, SLI second level (after 'view all' is selected), recommended music and recommended memories.
To keep the interface consistent, the filter and search functionality both have an active area on the left side, whilst the right side will show the results. The filter displays results in a grid view whilst the search can be extended to multiple categories and therefore is displayed in a list view.
From left to right: filter movies by available languages (cursor on filter & cursor on content) and Search with keyboard & showing 2 columns sorted by content type.
The third level, or player consists of 3 different types of interfaces: a video player, a music player and a slideshow player.
The music player is different from other players in that a user won't get taken down a layer. The music will start playing from the Second Layer of Interaction. If nothing is currently playing and a user plays a song, the user will get taken to another tab, called 'now playing' which shows information & options for the current song and the upcoming tracks (the playing queue).
Music player (on repeat) & volume settings.
We based the animations on the three layers of interaction specified in the information architecture: when going from the first layer of interaction (FLI) into the second (SLI) a user essentially goes down a layer, therefore the interface of the first layer will zoom in and fade out. The opposite will happen when going back. Elements coming in from any of the sides (bottom in FLI, top in SLI and side in search and filter) will slide in from the side they came from.
Left: movie continue playing, information & subtitle selection and series forward, episode selection and next episode notification. Right: slideshow player.
When a user selects a certain content type, they will always be prompted with an info screen, telling them more about the content type and giving them the options of playing, adding the selected content to their favourites, watchlist or custom playlist or adding tags. If a user deems the info screen unnecessary, they can press the play button on the remote directly in order to play the specified content.
Left: series info screen general info & episode selection. Right: memories info screen with album view, individual picture view, individual video view & music choice for slideshow.
Left: add to playlist and add tags. Right: music info screen with artist overview & album view.
The application also included an electronic programming guide (or EPG) for live TV viewing. This required a slightly different design. The first layer of interaction is similar to the other content types: recommended programs based on what's currently on TV. In the Second Layer of Interaction, the first thing a user sees is the programming guide. They can also navigate to a genres page and view their previously recorded programs.
Top left: EPG in the Second Layer of Interaction. Top right: genres. Bottom left: recorded programmes. Bottom right: intermediate full-screen EPG, activated from the player.
The Live TV player includes a mini EPG. The mini EPG is activated by changing channels on the remote (up and down) and by clicking the selection button. It allows users to view information about the current program, see what program is coming up next, set a recording timer or set a reminder.
If the selection button is pressed again from the mini EPG/player, a full-screen EPG is shown. The currently playing program is shown on the left of this fullscreen EPG (the bottom right image in the grid above). In the active area on the right, the user is provided with overview of which programs are playing on other channels without having to switch channels or go back to the SLI. They can then select the program they wish to see or the channel they prefer to watch and go there directly. The user also has the option to view the EPG ordered by genre or by their favourite channels.
Thanks for watching!
