Services
Design Lead
Art Direction
Digital Branding
Interface Design
Client
TV Spielfilm GmbH
Commissioned by
CELLULAR GmbH
Platform
Smartphone
Tablet
Smart TV
Web
A TV guide's UX completed.
Live TV was the feature to complete and perfect the user experience of the TV Spielfilm app, a German hybrid program guide (print and digital). The conceptual and creative focus was on a consistent product design, which creates a uniform, cross-platform product feel by taking media-specific usage patterns into account.
In close cooperation with Thorsten Jonas, at that time Head of UX for CELLULAR GmbH, an user flow in the existing app was designed for the new feature. Isabel Pettinato was responsible for the extensive revision of the previous UI design and the visual integration of the new feature for all platforms.
The TV spielfilm apps were regulars in the top 10 of the app stores. With a total of 20 million app downloads, they are among the most successful apps in Germany. The enormous popularity made the task a demanding challenge. None of the regular users should be put off by the planned conversions and the integration of the new feature.
The idea convinced the TV Spielfilm Verlag GmbH and the users alike, went into implementation and was available on mobile, tablet, web as well as for Smart TV with 80 TV channels.
Note: The following screens are based on a draft with revised typography and a reduction in UI elements. All images are copyright to their respective owners.
Services
Design Lead
Art Direction
Digital Branding
Interface Design
Comissioned by
CELLULAR GmbH
Platform
Smartphone
Tablet
Smart TV
Web
Client
TV Spielfilm GmbH
Live TV was the feature to complete and perfect the user experience of the TV Spielfilm app, a German hybrid program guide (print and digital). The conceptual and creative focus was on a consistent product design, which creates a uniform, cross-platform product feel by taking media-specific usage patterns into account.
In close cooperation with Thorsten Jonas, at that time Head of UX for CELLULAR GmbH, an user flow in the existing app was designed for the new feature. Isabel Pettinato was responsible for the extensive revision of the previous UI design and the visual integration of the new feature for all platforms.
The TV spielfilm apps were regulars in the top 10 of the app stores. With a total of 20 million app downloads, they are among the most successful apps in Germany. The enormous popularity made the task a demanding challenge. None of the regular users should be put off by the planned conversions and the integration of the new feature.
The idea convinced the TV Spielfilm Verlag GmbH and the users alike, went into implementation and was available on mobile, tablet, web as well as for Smart TV with 80 TV channels.
Note: The following screens are based on a draft with revised typography and a reduction in UI elements. All images are copyright to their respective owners.
Redesign
In order to ensure intuitive, age-independent usability, the embedding of the new UI elements of the Live TV feature in the existing app interface was preceded by a comprehensive redesign.
The previous smartphone layout was optimized for small screens. The teasers of the TV channel list were therefore only slightly separated from each other.
In the meantime, the screen relations have become much larger – with the advantage that significantly more content can be displayed. In order to guide the user's eye intuitively over larger screen areas, it was necessary to reduce the information displayed to the essentials and thus give them space in order to avoid overloading the layout with the new elements of the Live TV feature.
Reduction
In the new interface design the teasers are separated from each other by their time bar. The release date of a series or a movie can now be found on the details page. In addition, only the editorial highlights are marked with the TV feature thumb. In this design draft, this was further developed from an illustration into an easily legible icon. The header should only contain the most important controls. Redesigned icons now replace superfluous text elements.
Simplification
Subtitles under the tab bar icons could also be dispensed with: the content and position of the previous icons in the tab bar remained untouched. Only the easy-to-understand Live TV button in the middle has been newly added.
An onboarding when starting the app for the first time after the update explains the new feature and shows its position in the tab bar.
Typography
In the revised proposal, the geometric sans-serif font »Avenir Next« was chosen for all text elements, which sets optical, high-contrast accents with very large headings in an extra-wide typeface and creates a timeless aesthetic.
UI Design
The claim was to be able to watch Live TV like in front of a television and to be able to zap through all TV channels. In particular, using the feature while reading details about the TV show should ensure that the TV experience is not interrupted.
Developing New Patterns
For the integration of Live TV into the existing app, the visual patterns for smartphones and tablets were redefined by Isabel Pettinato. These new guidelines were then adapted to Smart TV (Apple TV, Amazon Fire TV) and formed the template for the responsive Live TV web feature on the TV Spielfilm website.
The TV Experience
To ensure a consistent user experience without interruptions, she added modal views with a blurred, transparent background in the app. The effect makes it possible to follow a TV channel from the corner of your eye and read information about it at the same time.
Past, Current & Future
The central task in the UI design was to develop a visual language that represents all time modes that a show goes through. Isabel Pettinato developed a self-explanatory and consistently consistent iconography, taking into account common user patterns on all platforms and carefully evaluating the interaction of text and image.
Image: Different time modes and corresponding icons of the tablet app version
Lead & Support
As design team lead, Isabel Pettinato oversaw the design team's full design production for all platforms. Additionally, she supported the development team and design QA in implementing the design into the frontend of the app. Finally, the first version of the new feature was released simultaneously on smartphone, tablet and web.
Awards
iF Communication Design Award
Annual Multimedia Award Silver
