Video revamp: redesigning the VTM application
The VTM app is one of our prize ponies. This year, we crossed a major threshold together: our one millionth download! Time to lean back and bask in our glory? Hell no! So today we present: the complete makeover.
For our Flemish readers, VTM requires no introduction – it’s the largest commercial TV channel in Flanders, and part of Medialaan, the company behind a number of well-known radio and TV brands in Belgium. VTM is the home of one of our country’s most-watched soaps and a large number of popular entertainment shows, and they’ve always been early adopters of new technologies.
Medialaan and November Five started working together a few years ago. We worked out a strategy for VTM’s mobile offering together, consolidating their previously scattered themed applications in the VTM mobile hub. That app became an industry reference in Belgium, and we’re still very proud of the work we did!
We’ve been tweaking and improving it continuously over time, together with the great people at VTM, and we’ve had a number of successes. We’ve integrated about 30 modules so far, for shows like The Voice van Vlaanderen, Belgium’s Got Talent, and So You Think You Can Dance, and they’ve all been successful. These modules were built to extend the experience of a popular TV show (often to cover the summer break), and they’ve brought a lasting increase in traffic to the app.
However, after three years, the team at VTM and we both felt that it was time to put on our x-ray glasses and take a hard look at the existing app. The result of that is the app you can now find in the app stores. We are absolutely thrilled with the result and we’d love to share with you how we got to this first release of the all-new VTM app.
When it comes to building our products, we don’t just change things for change’s sake – we take a more methodical approach! We knew the existing app was a great product, but we also know that markets, users and platform conventions evolve rapidly – and we all want to stay ahead of the status quo! On top of that, the folks at VTM also wanted to add their TSV (time shifted viewing) offering in the app, and a livestream of the VTM channel. We took that opportunity to improve the entire video viewing experience in the app.
In this case, the original briefing was still relevant – the difference would be in the execution and experience. The goal of the application is to extend and enrich people’s traditional viewing experience, while following the values that define VTM as a brand. The focus is on the experience – VTM’s slogan “Je beleeft het hier” translates roughly to “ You’ll experience it with us”. It’s this focus that is the main differentiator of the app. For this redesign, we started by looking at the elements that made the original app great, and set out to make them even better.
Researching and redefining
To redefine the app, we started by gathering information. We held a retrospective together with the team at VTM to talk about the functionalities, UX and content in the app, and compared our opinions, experiences and gut feelings. We then took a deep dive in the analytics we’d gathered about the app’s usage over time in order to benchmark the learnings from the retrospective – we wanted to find out whether our anecdotal evidence actually correspond to the facts!
Unsurprisingly, the way people consume TV has changed drastically in the past few years. The numbers confirm what your gut feeling probably already knows: users want to decide what they want to see, when they want to see it and where. People also watch increasingly large amounts of video content on other screens than their traditional TV.
Of course, this research only shows the bigger market trends – we also wanted to know exactly how users interacted with the app that was already out there! We dove into the analytics and started a round of user interviews (read all about those here) to figure out what made our existing users happy and which bits of the app they wanted to karate-kick to the curb.
As it turned out, there was very little karate involved (oof), and our users were very happy with the app. A number of requests and smaller complaints that surfaced often in the interviews matched perfectly with what we had seen in the data and the retrospective.
We took all of this info through our ideation process in order to define the new functionalities and features for the app. With these ideas, new functionalities and insights, we started outlining the new version of the VTM app, focusing on personalisation and the best video experience we could conjure up. The previous app turned VTM into a reference in our media landscape; this release was built to consolidate that position for some time to come.
Let the designers loose…
From a design perspective, our main goal was include all the features we wanted without making the app look cluttered or complicated (and of course, while sticking to platform conventions). To achieve this, we mapped out all of the ideas and requirements and starting building moodboards to establish our new look and feel. We also started sketching out some first ideas for the improved video experience.
Eventually, we wound up with five main sections: an overview of all VTM’s TV shows; a TV guide; an apps page to showcase the show-related integrations; a My VTM page as a hub for personalisation; and the Discover page where all content is aggregated.
These five sections can be accessed through a tab bar, an iOS convention that Android has also been adopting lately (our thumbs thank you, Google). This also meant we could axe the hamburger menu – the research had made it very clear that it was causing confusion, which put it high on our redesign hitlist!
The My VTM page is the hub of the personalisation efforts we’ve already included in the app. A little context: we believe in personalisation at November Five. We’re convinced it’s not a fad, and not reserved for the Facebooks of this world! However, we also know that personalisation is a terrible thing when executed poorly, and so we always take a phased approach to it. In the case of the VTM app, that means we’ll use the My VTM section of the app to empower the user to personalise their own experience at first; a more complex suggestions algorithm can be implemented at a later date, taking cues from users’ own input.
Users can favourite certain shows in order to keep informed of new content. The user can also bookmark content all around the app to add it to their watch list, which can be found in this section. The place to be for all that information is here in the My VTM section. This way, users can plan their viewing experience, while we can (respectfully!) gather data to build on when personalising what they see in the app.
The Discover page is the main entry point in the application. The TV guide has a prominent place on this screen, and so does our brand new live video integration (more on that later). This is where we want the user to find new and relevant content, and we can already use some contextual clues to help achieve that! We used the analytics from previous versions of the VTM app to determine which kinds of content the user wants to see, based on the time, day and the device they’re on.
For example, we saw that full episodes are most frequently watched on tablets during the evening, while the phone app is mainly used throughout the day to watch short clips. We can change the order of the different content blocks on the page to accommodate this behaviour, and a number of other parameters. These choices will help make sure that users are drawn to new, interesting material as soon as they open the app – which is exactly the point of the app.
The Discover page was also a challenge from a development point of view. To make it as flexible as possible, we chose to build the entire page using highly reusable components that can display any type of data. This component system is used throughout the entire app. It allows us to easily add or remove content based on the device, time and, in the near future, user preference. It also gives us a lot of flexibility in development, which proved to be useful on a number of occasions. For instance, we decided quite late in the process that news and sports content should also be added to the page – and thanks to the component system, that literally only took three lines of code.
This time around, we decided to give TV shows their own designated page. Sometimes users want to find content for a specific show and we found that in the previous versions of the app they had to jump through too many hoops to get more information on a specific show. In the new app, we made sure any TV show detail page is never more than two taps away.
The page itself consists of a grid, which shows all currently active shows – this is what the majority of people are looking for. We’ve also included a list showing all VTM programs, so anything in the complete archive is also within reach. When you click on a certain show, you’re taken to its detail page, where you can find all content related to that show. We designed these pages around large background images, to immediately immerse people in the look and feel of the show. We also used these visuals throughout the app when showing thumbnails of full episodes – this makes everything more coherent and helps people quickly identify content.
If you’ve used the previous version of the VTM app, the TV guide will feel new but very familiar. Users loved our TV guide, so we decided not to fix what wasn’t broken. Truth be told, we almost did – we thought of focusing completely on the video content and removing the TV guide altogether! However, we came to the conclusion – backed by our analytics and user research – that in spite of all on-demand options, linear TV is still in the lead. We made a number of smaller visual improvements, adding whitespace and making the entire page easier to navigate.
We did implement one big addition to the schedule: the ability to watch a livestream of VTM in the app! One tap on the show that is currently on, and you’re transported to the live view.
Apart from the livestream functionalities, we also improved the schedule itself. The overlay functionality we already used on tablets in the previous version – which offers information about any show you tap on without taking the user to a new page – has now been added to the phone app as well. If possible, you’ll also get the option to watch the episode in the same view. And of course, you can still set reminders and get a notification a few minutes before your favourite show starts.
The new Apps section is a big upgrade from the previous app. Previously only accessible via the menu, VTM can now put their additional or temporary modules on display on their own page. These are the shows that used to have their own separate applications, before VTM and November Five unified everything into a single app.
In this section, users can find additional functionalities for certain shows in the familiar environment of the app. However, we noticed that in previous versions, these add-ons were not always easy to find, especially for users who were entirely new to the app. For instance, the companion app for The Voice van Vlaanderen was simply named after the show, which caused it to show up in the menu twice – once for the add-on, and once for the show’s regular detail page. This is why this time we put these apps on display on their own page, and make their purpose clearer from the start!
From a development point of view, we’ve drastically streamlined the process of creating these additional apps. They can now be built in a separate project and can very easily be installed as modules in the VTM app. However, just in case the situation should ever require it, they can also be released as a standalone app.
One video player to rule them all
Watching video is the main purpose of this app, so I feel we’d be selling ourselves short if we didn’t go into some more detail on the video player we built!
The video player in the previous version had to support short clips and complete episodes; but our plans for this release also included live streaming and TSV (time shifted viewing) functionalities. We decided to build a completely new video player that could handle any kind of content we decide to throw at it. Not only that: we also wanted the entire experience to be seamless.
Users had to be able to seamlessly switch between different kinds of content, but also watch a seamless, continuous live stream. That might sound simple and logical enough, but posed a number of technical challenges. The livestream is delivered to us per show – when an episode has finished on air, the live stream stops and we have to start a new live stream for the next show. We solved this issue by preloading the next stream before the current stream has even finished.
There were also some struggles concerning the business logic for live and TSV content. These rules are much more strict than for video on demand – some content expires sooner than others, some content cannot be viewed from outside of Belgium, other content can’t be rewinded… Figuring out a way to handle this properly took some time and effort, but we’re happy to say we pulled it off.
Now can we sit back and enjoy the results?
Not really – we’re already eyeing our list of awesome extra features! There’s still room to build on the personalisation efforts we’ve made in this app, our native developers have some pretty neat new technologies on their radar, and we’re sure the team at VTM is brooding on some new exciting integrations coming soon.
Coming soon to an app near you…