“The crown jewel of my portfolio. The re-design of the Interactive Television platform by Tele2”
Research & User Requirements
Tele2 currently has 150,000 households that use ITV. Because this user group is so diverse in age, it is difficult to determine a target group. For this reason, it is a challenge to design an interface that is so simple and well-arranged that every possible user will understand and work with it.
To map the wishes and needs of the users, I have had many interviews with different users of different age groups. I asked about their opinion about the current Tele2 ITV. What they liked about the current interface and what they would like to see as an improvement in a redesign.
In addition, thanks to the marketing department, information has also been heard regarding the wishes and needs of Tele2 users. This information comes from the Tele2 Forum and the customer care department where customers express their dissatisfaction.
Based on these discussions and the information from the marketing department, I have drawn up a user requirement list. The most common wishes were subsequently included in the program of requirements that served as a guide during the redesign.
My main goal was to create a fast user experience. Since the competitors had better CPU and fancy gradients, I chose to fully focus on performance, because let’s be honest, the video stream is all we really care about.
Interactive Television (ITV) by Tele2 is a subscribed service to access television & radio channels. ITV also has a Video on Demand (VOD) portal and the possibility to record television programs. Next to that there is a feature to re-watch TV programs you’ve missed.
During this project I was the Lead UX designer with a team of engineers, coders, testers and product owners. Next to the UX & interaction design. I created the graphic design, style guide and information architecture (IA).
The end result was a new UI that was smarter, faster and more simple than before. Not only compared to the old UI, but also better in many ways than most of the competition of Tele2 Netherlands. The UI design was also introduced to more countries where Tele2 holds a segment of the market.
Magnitude of the project
The redesign of the ITV platform came together in a design document with over 180 pages and 62 major user stories. It involved use cases for ; Zap layer, Channel bar, EPG, Menu, Channel-list, Volume Controls, Radio, PLTV, Loading screen, Detail Screen for linear / catchup / vod, CatchUp TV List/Grid, Playback, Playback Controls VOD, Favorites, Recording, Settings, Shortcuts, Parental controls, PPV, Booting, Reminders, Generic error, Help & Tutorial and many more…
Holistic Interaction Model
The Tele2 Interactive Television (ITV) new Graphical User Interface (GUI) project is a re-design of the old Tele2 Interactive Television platform. The re-design is more than just a new appearance. To main changes between the old and new GUI are;
– From SD (720px by 576px) to HD (1280px by 720px) resolution
– The UX has been designed from scratch
– The GUI has been build from scratch, no re-use of old code or design
– The Information Architecture has been re-designed
– Added new functionalities and features
– A faster experience through better UX and overall performance
The complete UI is based on this holistic IA model and is useable with a minimal set of # buttons. UP, DOWN, LEFT, RIGHT, MENU, BACK and OK.
The idea is to create the most simplistic ways of control for the user. Since the user can vary between the ages of 5 – 95, I was looking to minimize the control as much as possible. This is not only a requirement but also a way of thinking while designing the complete UI.
The biggest challenge was to design a user interface on a set top box which had some serious hardware limitations. The box itself was over 7 years old, and with those 7 years competition was flying past Tele2 with newer technology. The video department team pushed the box graphically and data wise to its limits with the old UI, which resulted in a slow and at times broken user experience. I designed the UI with 3 rules in mind :
The UI design solution has to be fast
E.g. Minimize the graphics with a minimalistic style in order to get a fast UI.
The UI design solution has to be smart
E.g If possible don’t make the user think, intuitive solutions and smart content sorting.
The UI design solution has to be simplistic
E.g So every user understands the control, and create shortcuts for advanced users.
With every design solution I created, I tested them by this set of rules. If the solution checks yes on all parameters, then the solution was proven correct.
General design solutions
General design solutions include elements that appear in multiple places in the application such as the main navigation, the menu and symbolic distinction between Missed items and Video-on-Demand items. Because Box covers are not always clear and Tele2 has no control over the images, I chose to make a distinction between Video-on-Demand and Missed items. Video-on-Demand items are displayed in portait and a Missed item in landscape. This is partly because there is often no box cover for “Gemist” content, in this case an image of the channel or broadcaster is displayed. This distinction between Video-on-Demand and Missed items will help the user to distinguish content.
The freedom of choice for the user to use a LIST or GRID representation is also a good example of a general design solution. Precisely because many Box covers from “Gemist” content say nothing about the content, the user can choose to have the content displayed textually. The menu (if shown) and the description column take exactly the same place on every page. This creates structure for the user. The user has thought of the design of this interface. I have applied the principles and rules from (Johnson) his book on design with the user in mind. Applying structure, returning elements to fixed places.
Concepts, tests & iterations
Validating design solutions can be done in various ways. During this project I assumed a number of best practices and patterns that I have seen with several competitors. There are also design solutions that no competitor returns in their design, I validate this through theoretical knowledge from books, articles and websites in the field of interaction design. And there are design solutions that nothing has been written about yet, these have been validated by means of mockups that we have made ourselves.
Test on the STB with remote control
At Tele2, a number of mockups have been made together with the video solution department that work on the decoder and television. This is the only correct way to test design solutions for ITV. You could simulate this by making an HTML 5 prototype that you control with a keyboard. Only in this do you miss some fundamental elements. A computer monitor is not a television, and a keyboard is not a remote control. In addition, a computer is not the same as the STB’s hardware.
Testing with paper prototypes
Test sessions were held for all design solutions that could not be validated with theoretical knowledge or best practices. The most used flows in the Missed and Video-on-Demand were extensively tested in the concept phase via paper prototypes. Thanks to paper prototyping, a definitive concept has been created through multiple iterations.
User stories, flowcharts, wireframes
Below I will show an example of a user story. flowchart and wireframe (visual design) ITV has a electronic program guide (EPG). From here users can check the timetable for tv programs to come. Users can tune to a channel, read more information on the detail screen, set a recording, rewatch a missed program.
The second example is the Video on Demand portal. Here users can watch movies and series on demand. Due some smart content sorting and fast UI, users can enjoy on demand content in a simple way.
The objective of the redesign was to design an interface that works smarter, faster and simpler than the old interface. With an improved information architecture, the navigation of Tele2 ITV is clearer than before. Together with bundling content from the same origin and the new search function, Tele2 ITV is smarter than the old version. It is now easier for the user to find content or to explore content. The new menu that replaces the skintone (old fullscreen menu) is simpler and also ensures consistency across the different environments in navigation and style.
Because transitions are no longer used and pages are refreshed as a whole, the redesign is faster in user experience. These are a few examples of why the objective has been achieved.
The interface has been improved on all points from the analysis of the current system. All must have, should have and could have points from the program requirements are met. According to the Tele2 client, this project has been a success.
Sidenote: The project is too big to display on a webpage. If you are interested I can send the full design documentation upon request.