TV Streaming App for iPad

Designing a personalised TVthek app for the ORF.

Intro

This iPad app is the result of a design course around streaming services. The goal was to redesign an existing streaming service and rethink it in terms of concept, interaction design and screen design. 

We chose to redesign a popular austrian streaming app, the TVthek. It's the streaming app for the austrian public television. To start the project we came up with a persona and and then designed a user journey around the persona to help us figure out who the app should be for and how it should work.

Persona

Clara is a 32 year old austrian woman living in Berlin. She still has a lot of friends back home and she likes to stay in touch with them. When she gets home in the evening after a day at work – she is a teacher – she likes to lay back on her couch for half an hour with a glass of red wine and watch the austrian news to see what's happening in her home country. She takes out her iPad and opens the TVthek app. 

User Journey

The first time Clara opens the app she gets asked about her favourite topics. This will give her a tailored experience right from the first time she uses the app. Over time TVThek will get to know her preferences better and better to give her a more tailored experience.

She lands on the home screen of the app. Here she is presented with a grid of tiles, each representing a show she can watch. The larger the tile, the more interested she's probably going to be. She can see that some of the tiles are tagged with "now live" or "new episode" showing a preview image and some of them just display a shows logo.

As Clara's here to see the news she taps on the "ZIB 2" tile with the tag "new episode" and dives right into the news show she's here to watch. The player slides in from the side and starts playing the show. It only covers half the screen so she's doesn't lose sense of where she is in the interface. The red bar underneath the chapter signals the timeline in each chapter.

After she's done she wants to see if there is something she can watch with her favourite actor: Hansi Hinterseer. She taps on search and starts typing "Hans". While she's typing, suggestions immediately appear underneath the search bar.

After she's done watching Hansi Hinterseer talk to horses she wants to find out what's on live TV right now. She taps on "Live" and sees a vertical timeline of the four channels she can watch in this app. Everything that's highlighted green is live right now, everything above the green line is already over and everything below the line will be streamed in the future.

Iteration as an important part of my design process

What this project taught me was that more iteration leads to better designs. It's not possible to come up with the right solution right out of the gate. Good design needs time, feedback and iteration to become as useful, useable and pretty as it should be.

How the design of the "Live" screen evolved over time. You can see how we started off with a horizontal timeline but later changed to a vertical one to make titles of short shows readable.