Netflix PLUS
CONCEPT
A hypothetical social app which expands the Netflix brand and offers:
-
A place where the 104 million subscribers worldwide can discuss their favourite Netflix Original shows and movies with other viewers in open forums.
-
A place for Netflix to further engage the fans and to build excitement with behind-the-scenes footage, cast interviews, cooking show recipes and other exclusive content.
OVERVIEW
Objective: Build a social app for a brand with a devoted customer base.
Deliverable: High fidelity prototype with focus on onboarding throughout.
Timeline: 1.5 weeks
My role: I worked independently to develop the concept, dive into research, create user flows and wireframes, bring to prototype and user test.
PROTOTYPE VIDEO
See the app in action:
INITIAL DESIGN DECISIONS
The original Netflix app is black, therefore, to avoid confusing the user as to what app they are currently in, I decided that the Netflix PLUS app should be white.
Netflix uses their own font, Netflix Sans, however it is not publicly available, therefore I chose a very similar font, Metropolis, for my wireframes and prototype.
Otherwise I tried to stay true to the original Netflix design elements, such as the red buttons, the image cards with the red info ribbons, the classic logo and similar nav bar structure.
(Top) Netflix vs Netflix PLUS, (Bottom) Inspiration / Style Tlle
USER FLOW
When creating the flow of the app, I wanted to place onboarding tips throughout, instead of loading them all at the beginning. The assumption being that too much information at the beginning, along with sign-in steps, would discourage users from continuing. However, while creating the flows, I realized that the app would need a little bit of an introduction, to highlight what makes this app different from the original Netflix app.
Thus I focused on a short 2-screen onboarding introduction that appears the first time the user opens the app:
Getting to this stage took some A/B Testing.
A/B TESTING: SELLING A MESSAGE BOARD
While transitioning from low-fi to hi-fi wireframes, I was finding it difficult to showcase the message board feature of the app. How does one make a standard message board look sexy and exciting?
My first iteration left something to be desired:
My fear was that this simple "show it as is" onboarding design would (a) be boring and (b) confuse users since the various headings look like they could be clickable.
I decided to test this against a second design that tilts the message board, hopefully reinforcing that this is just an onboarding screen that shows an example of the message board feature, not the actual message board itself:
In my tests, I asked three main questions, trying to remain as objective and impartial as possible:
-
What is being shown on these pages? (Getting the user to describe to me exactly what they see.)
-
Which one more clearly shows a message board?
-
What elements are clickable on these pages?
Question 3 was important because I wanted to make sure I chose a design that made it clear that this was just a preview and not an interactive page.
From the few people I asked, I received mixed responses that contradicted each other. An even number of people preferred one over the other, however both designs left doubt as to what was actually clickable and what wasn’t.
On a positive note, I did receive some good design feedback — ideas that I hadn’t thought of before. Some examples were “Don’t be so literal” and “Maybe focus on photos instead of text”.
I applied that feedback and continued testing new iterations:
TAKEAWAY: It's important to push myself to think outside of the box, allowing myself to design abstractly and not so literally.
ONBOARDING THROUGHOUT
Since this is an app for Netflix users, it would be useful for it to be connected to the user’s Netflix account, making the sign-in process very familiar and seamless. If one is new to Netflix, they can sign up for an account and start their one month free trial directly within the app.
To utilize cross-connection between two Netflix apps, the PLUS app could suggest message boards and content pages based on Netflix shows and movies that the user has been watching.
At first I had a suggestion card pop up, blocking all the surrounding action. However based on feedback, I ended up using a top card, allowing the user to interact with the suggestion if they felt like it, but they could easily move on to other features as well:
I applied the same change to the following step, the tooltip that points users to the various show and movie pages under "Originals":
TAKEAWAY: Do not block a user's action unless absolutely necessary. Rather, just hint and let them do their thing. Good design gets out of the user's way and lets them take control.
INTERESTING REVELATION
I thoroughly enjoyed designing a product for a brand that already had a very clear style and tone, while finding ways of adding my own creative spin. The design restrictions that came with staying true to the Netflix brand allowed me to focus more on the actual product and flow. Overall, a rewarding experience.
Hey, Netflix. Call me.
I have lots more to discuss, so if you have any questions, please don't be shy.