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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
iF Communication Design Award
Annual Multimedia Award Silver
Cookie | Duration | Description |
---|---|---|
cookielawinfo-checkbox-analytics | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics". |
cookielawinfo-checkbox-functional | 11 months | The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional". |
cookielawinfo-checkbox-necessary | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary". |
cookielawinfo-checkbox-others | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other. |
cookielawinfo-checkbox-performance | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance". |
viewed_cookie_policy | 11 months | The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data. |