Design | 2020 | San Francisco, California
Desktop UI: Block Binge
PROJECT INFO
Client: Netflix
Timeline: 46 hours
Collaborators: Leily Khatibi & Ann Jimin Woo
Role: UI Designer & Prototyper
Tools: Adobe XD
Block Binge allows viewers to sync their contacts and connect their streaming services for the ultimate movie night. On Block Binge, live streaming content with audio, text, and video chat capabilities–plus an eclectic bookmarking feature–make watch-parties casual and fun. Whether it’s faraway friends, neighborhood buddies, or a newly discovered Star-Trek-watch-group, users no longer have to wallow alone in the darkness. Some of the main features of this desktop app include customized content based on users' interests, an interactive calendar which acts as a personal TV Guide, and public/private groups for sharing stories and reviews.
Design Challenge
In the Adobe's College + Netflix Creative Jam, Netflix invested in creating and giving a platform to stories that connect people and cultures from around the world. The challenge was to design a third-party desktop website or desktop app, in 46 hours, where the community can celebrate shared stories together through communal and authentic experiences.
Solution
With this design, our goal is to help families and friends utilize this platform and share their experience with content such as series television shows and movies they love. Some ideas that we used to facilitate deeper engagement are:
Help connect people with more diverse content, cultures, locales, and subject matter
Create anticipation by scheduling watch parties and pre-event discussion
Make and share lists of favorite content and content creators
Highlight and make notes of favorite lines, chapters, and characters
Look & Feel
The interface style resembles a movie theater environment. The minimal dark theme is easy on the eyes and keeps the focus on the content being streamed. We used Material Design to have a consistent design system applied to the UI and enhance our brand identity.
Font
Headlines & Subtitles: Muli
Body & Captions: Open Sans
Colors
Primary: Red (#EB4545)
Secondary: Turquoise (#45EBEB)
Supporting Tones: Dark Grays and Blacks
Final Notes
The Block Binge project was my first foray into app design and I was incredibly humbled and grateful for the designers I collaborated with. It was my first time working in Adobe XD and my first time working fully remote on a project. While I am incredibly proud of the app, which placed in the 10% submitted projects, I know that given additional time we could have accomplished even more. Our wishlist including a more streamlined relationship between the subpages and components panel as well as a more dynamic integration of the calendar.