CLIENT
Apple
ROLE
Product Designer
RESPONSIBILITES
Product Design, Design System, Strategy,
Product Thinking
TOOLS
Figma, Keynote
Rich Headers
SUMMARY
The AppleTV Editorial team came to me with a problem, and a proposed solution. I stepped in to help them solidify a strategy and fill in the blanks that they were missing. In working with the team, I was able to:
- Create a strategy on where and how they could use an existing component
- Help build a system that allowed for automated programming
- Create a design template and brand guidelines for the designers
- See immediate results on release
The Problem
AppleTV is known for its editorial collections. In the app or on OTT, AppleTV frequently used what they call “bricks” as a navigational element to direct users to another screen ( a “Room” ) that showcased the movies, television, or other series that were part of the featured collection. But the AppleTV Editorial team had a problem: a new design system update meant that the functionality they relied on was going away, which affected not just the navigation but also their ability to provide context and curated copy. The navigational element was top of mind, since many collections led directly to sales and rentals, which meant revenue. How could they ensure that users had the ability to access these rooms while remaining within the design system? Well, there was technically a component they could use from another product, what they call a Rich Header, but they weren’t sure how to make it work on TV, since it was originally built for iTunes/Music.
Enhanced Lockup
Across Services
Design Exploration
The Rich Header component is a simple navigational element meant to hold an image along with title text and an optional sub-title or eyebrow. Some of the outstanding questions the team had revolved around what kind of image or artwork should be displayed in the Rich Header itself, how much additional context was needed, and where the trade-off between art and copy could be, considering the space available.
I created several explores to help answer this question, based on the kinds of assets available for the collections. I paid special attention to their most important campaigns: values, awards, sports, movie spotlights, seasonal, and transactional. I was able to showcase and then recommend the most successful way to use Rich Headers while remaining within the Apple design system.
Design Template & Component Logic
Once the wider team and leadership approved the direction, I created a template and guidelines on how to design and maintain Rich Header assets.
AppleTV Release
The release of the Rich Headers on AppleTV saw an increase in users tapping into rooms, especially on iOS. As for the design, not only is the template still in use for the designers, but the impact of the Rich Headers project has reached other teams with regards to content creation and copy strategy.