Disney ABC
ABC APP
The ABC App was emerging as a growing product for streaming TV for Disney. The goal was to leverage a Design System to unify components to scale the app across multiple platforms.
my role
UX/UI Designer
Responsibilities: Discovery, UX Components, Visual Design, Design System
team
7 UX/UI Designers, 4 Front-end Developers, 2 Product Managers, 1 VP of Design(Stakeholder)
Q3 2017 - Q1 2018
TOOLS
Sketch, Adobe Illustrator, Adobe XD, Zeplin
PLATFORM
Android TV, tvOS, iOS, Ipad
01
Project Overview
Background: The Digital Product team at Disney ABC Television sought to unify their product across multiple platforms: iOS, Android, iPad, Amazon Fire, tvOS, Android TV, Roku Channel, Samsung Tizen, and Amazon Fire TV. We did this through many design sprints for a high-level restructuring project (affectionally called Cinderella). I was tasked in creating all actionable and static icons that would scale for each platform. I also designed scalable components and conceptual prototype screens for Android TV to showcase the approved icons.
02
The Grid
Each icon was crafted on a precise pixel grid to ensure consistency and visual weight. The icons were initially designed in Illustrator and then brought into Sketch for further refinement and so they could be added as replaceable symbols within the Design System Sketch library.
03
Android
Working through multiple iterations with other UX/UI Designers, I helped craft quick comps of Android scalable screens to highlight the initial funtionality of content components and how the nav bar interacted with the rest of the UI. Above & below are the many variations I went through before finalizing the main navigation icons.
04
TVOS Screens
ANDROID TV and APPLE TV
It was great creating prototypes to help tell the story of Disney TV components through not only the iOS and Android App but also using the 10 foot experience as our major platform contributor to the business success.
05
Impact
Took part in crafting the Design System componentry for DMED Streaming services that a large-scale design team could utilize for scaling projects and have better conversations cross-functionally.