I came up with an idea for new Netflix features: What if you could earn badges for watching content, track progress of content you're actively watching, view stats about what you watch most often, and share it all on social media? I designed a mockup of the "Netflix Dashboard," which houses all of these features.
Disclaimer: This was a self-initiated project, and I am not affiliated with Netflix. I love watching television, and I used this as an exercise to design and illustrate a concept that I want as a user.
Design a landing page to showcase the new Netflix Dashboard features, including the following:
Target audience: Existing and potential Netflix users.
Goals: Increase Netflix brand awareness, promote original content, new user acquisition.
The most exciting part of this project for me was getting to illustrate unique badges for shows that I love. I started by researching badge systems, and I experimented with color palettes and badge shapes. Although I love the idea of using color to unify the badges as one family, it felt more important that each badge's colors represent its specific television show.
First draft vs. final draft of the Gilmore Girls badge (The Innkeeper's Life). My first badges had white rounded frames casting shadows on inner illustrations.
In the earlier version of this Unbreakable Kimmy Schmidt badge, I was experimenting with muted colors and tilting the badge angle.
My earlier Frasier badge (Marty Party) shows the evolution from round to square corners. In the final version, the chair's pattern is more defined, and the background is Frasier's fireplace instead of the Seattle skyline.
Here are the 16 badges I created for this project:
Finished Season 1 of Unbreakable Kimmy Schmidt.
Finished Season 2 of Unbreakable Kimmy Schmidt.
Finished Season 4
of House of Cards.
Finished Season 1 of Orange is the New Black.
Watched all 7 seasons of
Finished Season 3 of Orange is the New Black.
Watched 8 hours of content between Christmas Eve and Christmas Day.
Watched 8 hours of content on July 4th.
Watched 8 hours of content on Thanksgiving weekend.
Finished Gilmore Girls: A Year in the Life.
Watched all 6 seasons of Parenthood.
Watched all 10 seasons
Watched all 7 seasons of
Parks and Recreation.
Finished Season 1
of The Crown.
Finished Season 2
of Chef's Table.
Watched all 11 seasons
I studied the differences in the existing Netflix UI on my laptop, phone, and Apple TV. Instead of designing how each new feature would look on all devices, and because my end goal was a landing page, I focused my efforts on where a user might be most likely to enjoy each of the new features. I decided that my landing page should feature the Dashboard on a television, the Badges on a laptop, Progress on a television, and the Stats on a phone.
When designing the landing page, I wanted to use the Dashboard as the hero image, and provide more clarity about the new features that live inside it in separate sections below. Finally, my landing page would culminate with a call to action letting the reader know that the Dashboard is ready and waiting for them in their existing Netflix account, and available on any device that they use to access Netflix.
I showed my landing page to a few friends that were also Netflix users. I noticed that the majority of them hesitated at first. They didn't really understand the concept within the first few seconds. Once I explained my idea to them further, they were enthusiastic and continued to read down the page but would eventually stop somewhere in the middle. One of my brilliant designer friends gave me great constructive feedback:
So I went back to work.
To make the top CTA more exciting, I used a photo of friends gathered around a phone. This mirrors the idea that the Dashboard and the features within it make Netflix more social. And to drive it home further, I swapped the television with the Dashboard UI for a phone. For the bottom CTA, I used a photo of three hands holding their phones together, each representing one of the three sections of the Dashboard: Badges, Progress and Stats.
I adjusted the copy of the top and bottom sections to explicitly mention Badges, Progress, and Stats. At the bottom, I try to entice the reader to click the button by telling them that they already have a collection of Badges, Progress for shows they're currently watching, and Stats about their entire viewing history waiting for them in their Netflix account.
I made the value prop illustrations bolder and added a pop of red to each as a callback to the the Netflix logo.
I split the Badges section into two sections. This allowed me to increase the size of the laptop and also add a carousel of sample badges with their names and descriptions.
To invite the user to continue scrolling, I repositioned the devices so they would overlap the sections below them.
When I revisited the Stats section, I increased the breathing room of each entry and included transparent Netflix title cards. I liked the style much more, so I used the same style for the Dashboard UI at the top and in the photo of the phones at the bottom of the page.
I am so much happier with the final version than the first, and I am so grateful for the constructive feedback I received.
My final step was to code it. Click here to see it live.