Tunedin
Based on a second screen concept, we wanted to create an experience that will change the way you discover, connect, and participate with television content.
Designing this product was challenging on many levels: multiple platforms, broad audience, saturated market, and different types of user.
We worked on the few things that could make this product unique. First of all we had to make it seamless and consistent through different platforms, so the user will recognize us wherever the product would have been used. Then we build an ecosystem taking count of the specific guidelines of every single platform – iOS, Android and web.
Designing for Android in 2013
After helping with the iOS UI/UX design at the beginning of my experience at Tunedin I switched platform and I was responsible for the Android experience. My main duty was to make sure to have a consistent experience also on the Android platform, creating a UI in line with the guidelines and constraints of this platform and being innovative at the same time.
Here is where I faced the biggest challenge at that time. Android system was a little bit unknown for me, so I started with a deep study of everything regarding this platform – remember that Material Design wasn’t a thing at that time and Android design were all over the place.
After that I tried as many apps as I could to have a deep understanding of the patterns system – two back buttons for instance, that influence the overall experience on using and Android device. Then I went through my usual process: understanding the problem that I’m trying to solve, understand the users’ needs, creating wire-frames and define flows, creating UI design and prototypes, iterations and implementation
Tunedin Original Design
Following are shown the main screens that were designed in 2013. At that time those design where state of the art on Android platform, and build together with 4 engineers.
I was responsible not only about the design but also in charge of the development together with the engineering team. Interacting mainly with the engineer responsible for the front end, we were able to build custom components that serve the main purpose of our concept.
You can also watch a tv ad that was created to market the product. This ad was created focusing on iOS platform first since it was the main one considered for the product’s launch, and the spot is in German since the product was build for this audience first – with plan to extend internationally.
Skeumorphic Nostalgia
While at Tunedin I also worked on some illustrations for our landing page and marketing material. Skeuomorphic was the main style of illustrations in 2013. The more realistic the better: texture, objects, colors, and everything needed to be as close as reality as possible. These were very fun to do – here is a small collection from those good old (illustrations) days.
Tunedin with Material Design
Since the Material Design came out I felt like I wanted to redesign this app to see how it would look like and if the design done in 2013 would still hold nowadays.
I spent some time go over the designs I did several years ago. I didn’t change the idea behind and the layout but just implemented some principle stated in the Material Design guidelines for designing Android product.
Tunedin Hub
This design and layout was inspired from the app switcher that Android had in place for a long time. We believed that this was a known pattern and an easy solution for switching between different sections of the app. As you can see in the last screen on the right, some of these sections are removable, this ends that you can potentially keep track of multiple shows you’re interested in.
Tv Guide & Live Show
The principles of the TV guide still holds with the Material Design. Small details have been touched in this redesign but the overall layout and structure is still the same. Cards with at glance informations and an easy scrollable timeline that allow a quick jump into the preferred time or day.
A dedicated page is reserved to a live show with a countdown and a chance to set a reminder to not miss that episode of your favorite series.
Discovery Section
A dedicated discovery experience was one of the core pieces that we focus on when building the Tunedin app. this section is adjusted based on your preference and allows you to focus on what’s on now, during the day and in the week.
As you can see the structure of the card doesn’t really change from section to section, but what’s change is the actions available depending on the experience you're in. A quick calendar icon allow you to set a reminder and don’t miss the next show available.
My TV
This sections is where you have the opportunity to discover new shows based on your preferences. A dedicated section will suggest what you might like, you can also check all your reminders to not miss any episode of your favorite shows.
Show Page
Finally a dedicated show page is the center of Tunedin experience. This sections hold all the information about the show, platform where the show is available, cast, seasons and much more.
The “Live“ tab is where the action is. Here you can interact with trivia that are custom created form a moderator of the show and allow for a better and more fun entertainment while enjoy the story infolding. Next episode are also at a fingertips and allow a quick reminder to not miss the whole season fo your favorite show.
Finally a social tab, Twitter in this case, allow for social experience and a connection with other fans around the world where you can predict what will happen, or simply share meme of your favorite show.