Integrating Netflix shop into the mobile application

Rukayat Salam
Bootcamp
Published in
5 min readDec 13, 2022
Photo by Thibault Penin on Unsplash

Introduction

What is Netflix?

Netflix is a subscription-based streaming service that allows members to watch TV shows and movies on an internet-connected device.

What is a Netflix shop?

Netflix shop is an online shopping destination combining officially curated products and rich storytelling to create a unique Netflix shopping experience.

The context

NetFlix shop was launched in June 2021 for one purpose only to sell merchandise related to shows on Netflix. Sadly, many Netflix users don't even know about it because it's only available on the Netflix shop website. Bringing it to the mobile app can increase their revenue a lot.

The Problem

Most Netflix users that will probably buy the merchandise aren't even aware of the website. Which makes the sale a lot less than it's supposed to be.

The objective

  1. Netflix shop should be able to be accessed through the streaming app as well, that way it can get the recognition it lacks and also increases the revenue for the company.
  2. The checkout process should be done and completed in the app.
  3. The onboarding should show users about the shop before they even get into the app.
  4. The design language should stay consistent with the original Netflix app.

Ideation

I created Information architecture on how the app should look and how to work through the app after the shop has been integrated into it.

Design

The first thing that comes to me is to upgrade the onboarding process to ensure that the new feature is added so that people can be informed about it before they even get into the application home screen.

Current onboarding
The onboarding upgrade

The new feature added to the onboarding informs the users about the update that has been implemented in the app.

Menu

Current Menu

The menu has a bottom navigation bar and placing the shop section there is just very smart because of the visibility and accessibility. But the nav bar already has five(5) icons and putting the sixth will be too much. So now I'm left with two options either I move the shop section to another place or I remove one icon that is already there and replace it with the shop section. But where will the icon/section go to?

So I decided to move the search icon to the top of the screen the reason behind this is that most mobile application have their search bar/icon at the top of the screen and it functions the way it should.

The tip is a way to put the new feature in the spotlight and inform users about it.

Shop Main screen

In the shop section merchandise is categorized into three main parts ( Collections, Apparel and Collectibles ) and they have subcategories.

Subcategories

Product page

And when a category is opened be it a movie, or series, or anything the whole merchandise associated with it pops up. The image below shows how that works exactly.

La Casa De Papel page

Product details

This page is where you can read descriptions about a product, select size read reviews just the way it is on the website we don't want it to be entirely different.

Then there is “Add to cart” where will the cart feature be? Okay so the profile has a number of things listed under it and I can conveniently place the cart there.

Check out Process

The checkout process should be in the app and it should be very simple and seamless.

So in the checkout process, there are 4 major steps as it is in the website

  1. Cart ( Adding to cart )
  2. Information ( Where you get to input the necessary information to get your package delivered to you )
  3. Shipping ( You get to pick your preferred shipping method )
  4. Payment ( Payment method you prefer )
Seamless checking out process

My List

A little update will be added to my list feature because we also want our users to be able to add what they'd like to purchase from the shop to the list but putting it together with the movies might not be a good option.

Updated “ My list “ design

Now users can move from saved items from movies and TV shows to items saved from shop without any confusion

Thank you for reading my case study. If you want to see more of my work my contact is linked below.

Behance : https://www.behance.net/rukayatsalam

Linkedin : https://www.linkedin.com/in/ruqoyaah-salam-3b4117210

--

--