Merchandise Integration to Netflix’s Mobile App
— (UI/UX Case Study)
In this article, I’ll explain how I approached
introducing a new merchandise feature to Netflix’s mobile app.
Disclaimer: This project is a personal undertaking and
is not officially commissioned, endorsed, or collaborated on by Netflix.
It is intended solely for educational and creative purposes to explore
ideas and possibilities related to the integration of a merchandise
store feature into the Netflix mobile app.
This problem statement was taken as a project in a bootcamp called @10kdesigners.
📑Introduction
- A lot of people already knows what Netflix is, but to give it a summary Netflix is a popular subscription-based streaming service that allows members to watch TV shows and movies on an internet-connected device.
- Netflix has a huge fanbase and the only reason customers are attaching with this platform is Netflix knows how to cater their customers’ needs by giving them a remarkable experience.
✏️Context
Netflix launched an online store dedicated to selling limited-edition merchandise catered towards fans of its popular programming.
Currently, it’s available only on their website. Bringing it onto their mobile app can boost their revenue by a great deal.
📌Why did i choose this Problem Statement ?
- Having a merchandise store within the app eliminates the need for users to switch between different platforms or websites. It offers a convenient and seamless shopping experience.
- While Netflix is a leading streaming platform, the market is highly competitive. Integrating a merchandise store can differentiate Netflix from some competitors and attract new users looking for a comprehensive entertainment experience.
- It can also offer a new revenue stream for Netflix. This is particularly important as streaming services face increasing competition, and having a crazy strong fan base for Netflix can help boost revenue in
a very intelligent way. - As a lot of users who purchase and wear merchandise related to their favorite shows or movies can develop a stronger emotional connection to Netflix. This can lead to increased brand loyalty and a sense of community among users.
📌About Netflix Shop
Netflix.store is the first retail outlet owned and operated by Netflix that sells products directly. The Netflix e-commerce store’s business model is that it will sell high-quality merchandise products that are related to Netflix’s popular shows, and the products will be carefully chosen and limited edition.
🎯Goal
- To Design a smooth browsing and checkout experience by not taking the focus away from what Netflix is known for, which is watching content. This can preserve the users to switch between different platforms or websites and also gives an opportunity to the users to shop and watch their favorite content from one place.
🖍️Design Process
I believe that design process is very subjective and context dependent. It changes from project to project depending upon the scope and complexity of the problem statement. Here’s my process for this particular project.
👱User persona
📋Research
My aim here was not just to integrate the merchandise store to the Netflix mobile app, but to make it more personalized and engaged to retain customers that could make Netflix gain more revenue.
The secondary research was done through a lot of articles which specified how Netflix follows their process of :
- Personalization
- Recommendation
- Design System
- Push Notifications
- AB Testing & Beta Testing
- I really got a lot of detailed explanation for the above mentioned specifications through netflixtechblog on medium, all these articles helped me articulate the further steps i had to take with the proceeding of my designs and IA.
Some of the links that I explored through Netflix’s medium blogs that really helped me getting insights and to make appropriate design decisions :
1] The Next Step in Personalization
3] Interpreting A/B test results: false positives and statistical significance
- I also had a conversation with my mentors and cohort mates about what were their expectations and if they had already visited the Netflix shop website how was their reaction and what were their feelings and thoughts about it ?. Talking to them helped me a lot to get a rough idea of how to proceed with my design process.
Brainstorming
Here is some of the rough brainstorming i did before getting into design,
i started sketching and noting the points i had in my mind.
A lot of questions to ask yourself before you start working and planning
things. Let’s see the steps taken to proceed further to execute the design ideas.
📊 Competitive analysis
- Before starting the project, I did competitive analysis to identify existing design patterns. I went through a lot of e-commerce app’s to see the layout of their cards and how they have displayed their pricing . How they have presented the new upcoming products on their home page.
- To design the Store feature, I analysed websites and apps that effectively utilise design patterns to make the feature discovered. Although I also conducted a competitive analysis, there were no competitors with a similar feature who had merchandise into their mobile app like Amazon Prime, Disney, etc. Therefore, I refered other websites that had implemented these patterns extensively to guide my design decisions.
✏️ Wirerframing
The member-focused teams at Netflix are responsible for making sure the member experience is relevant and personalized, ensuring that this content is shown to the right people at the right time.
- Keeping this in mind, i tried sketching a lot of wireframes with the visualization that i had in mind. Also along side i kept on writing points that would explain why did i add that particular feature and how would it be attractive to the user.
💹 User flow
🖍️ Iterations
👀🫠Let’s dive in to the designs
1] The Bottom Bar Navigation
The bottom bar is the most central place for navigation. It
is also essential because it gives quick links to the app. So i thought of placing the Store tab right at the center of the bottom navigation bar to catch the center of attraction for the users eye.
2] The Notification Tab
I further added a notification tab at the start of the page which can grab the attention of the user at the home page. The notification has a message saying “Discover and unlock a world of Exclusive Merchandise Magic!” with a CTA that will take the user to the Store page where they can explore the different merch collection. If they don’t want to they can skip it.
3] Product Discoverability Cards
I added the product cards which will be shown on the basis of the recently watched shows/movies by the users. They can scroll through the cards and see a bunch of collections recommended by Netflix based on the latest watched shows/movies.
4] Recommendation for the collections of merchandise
As the user scrolls down the home page to explore shows/movies they can also discover such merchandise recommendations by Netflix based on their most watched shows, recently watched or top most shows/movies.
5] Discoverability of Shop as a new Feature added
- Netflix has always focused to entertain their users by giving them a new fresh content everytime. According to my research Netflix works on AB testing most of the times to see how their users are responding to their designs or newly launched features.
6] The Store Page
Designed some clean n neat cards showcasing clear pricing, ratings and
pictures of the products. The rows here shows different collections from their website. Users are taken to a particular collections page from here, where they can easily scroll through each product and view the details of the product.
Wait what! is the store white ?! How can you deviate from Netflix’s Design Language ? it’s black right ?
Yes ofcorse it’s black but as it’s a newly launched feature into the app and its an e-commerce part of the app, i decided to keep it white want to know the reason why ? According to my research most of the e-commerce websites are white there’s a huge reason why.
Readability is something to be considered as a priority in your designs.
Contrast plays a huge part in legibility, and a dark font against a white background is the easiest way to create one. For most people, dark fonts on a white background are easier to read. It is also better to look at white background websites/apps especially if you are browsing during the day.
7] Collections Page
At the collections page the user can go through every product from a particular collection and can sort and filter the products by Title of the Movie/Show, Type of the product whether Clothes, toys, games, accessories etc. they can also filter products by high to low prices.
After the products are sorted and filtered the user can either add that product to “My List” which is also called as wishlist or can add the product to the cart. The address, shipping and payment process is as similar as other e-commerce apps.
8] Product Page
Here’s the product page where you can see the details of the product, the reviews and take a close look to more images of the product. You can either proceed further by adding the product to “My List” or add the product to the cart.
9] New and Hot Page
As Netflix has New and Hot section also into their app where you can find all the upcoming new Shows, Movies and games, i also added a tab called store where users can find the newly released products for a particular show or a movie.
10] Shop Under Movie Page
As the user is done watching the movie/show there comes a few tabs
giving the user a few more options related to watched movie/shows i added one more tab called “Shop Merch” where users can view the
available merchandise for the particular Movie/show.
11] In app notification
I also added the merchandise to the in app notification section so that users can get notified for the new arrival or any other updates for their interests in any product they wish to buy.
12] Shipping and Payment Screens
These are the screens made for payment and shipping where the users can add their details, pay for their products and proceed further to buy.
📌🎯Metrics that we aim to measure
- To measure the revenue generated directly from merchandise sales within the app. This is a primary indicator of the financial success of the feature.
- Calculate the percentage of users who visit the merchandise store and make a purchase. A higher conversion rate indicates that the feature effectively motivates users to buy merchandise.
- Track user engagement metrics within the merchandise store, including the number of visits, time spent, and interactions with merchandise items. Increased engagement suggests that users find value in the feature.
- Monitor whether the integration of the merchandise store has a
positive impact on user retention. A higher retention rate suggests that
users are more likely to continue using the app. - Assess whether the integration of the merchandise store has any negative impact on app churn. A lower churn rate indicates that users are less likely to abandon the app.
👇👀Take a glimpse of my prototype below
🥳🤩You have reached the end! Time to retrospect!
- During this project, I developed my design process skills and learned that every project presents its own unique challenges. I got the understanding that product design is a collaborative process that involves a cycle of feedback and iteration to refine and improve the design.
- This entire journey to solve the problem statement right from scratch to the final prototype, made me gain the confidence to approach any problem with logical reasoning and an appreciation for the various considerations that go into creating a successful and usable design.
I hope you all found this case study useful and informative.
You can find me on Twitter and LinkedIn if you have any further questions.
I would be more than happy to have a chat with you.
It would mean a lot to me if you could, drop a few claps 👏🙂 & show your support. I’m currently open to opportunities as a Product Designer.
