Project Overview


 
 
580b57fcd9996e24bc43c529.png
 

Adobe Creative Jam is a Design Sprint where interdisciplinary agile teams with mostly design skills get together and synergize and solve a problem within a given time frame. With a team of a maximum of three, individuals can ideate, design, prototype, and create a mockup to deliver the final product. In the Adobe Creative Jam x Netflix, my team and I (team - Akatsuki), designed a web streaming service called Reel that would give its users superpowers. We were ranked in the top 25 out of 460 submissions across North America and the United Kingdom. The competition lasted 4 days from June 22 - June 26, 2020.

 

Introduction

The Web App we designed is called Reel. The reel is a subscription-based streaming service that allows users to customize their content for individual needs, schedule watch parties, pause, bookmark videos, and schedule videos with local and international servers. It has a massive library a large category of movies and TV shows to watch and also provides user reviews.

Project Duration

The competition lasted 4 days from June 22 - June 26, 2020. So I spent about 6 hours *4 days = 24 Hours.

My Role

User Researcher, UX/UI Design, and Prototyping.

Responsibilities

Day 1: Ideate & Plan, Research, Journey Map

Day 2: Low-fidelity Wireframes, Design System

Day 3: High-fidelity Design, Prototype Interactions

Day 4: Refine Design, Submit Project

Goal

Design a Web App that lets users meet, enjoy media together, and organize media according to their preference. It contains additional features that will cause higher user retention and have an upper ground over other stream services due to its features.

Challenges

This was my first design sprint, and we found the time constraint to be a big challenge. We were enrolled in full-time courses and were in the middle of the semester when we had to submit lots of assignments and quizzes, and take midterms. So taking the time to do the design sprint while balancing the academics was a real struggle.

Problems

Many streaming services like Netflix, Hulu, HBO Max, and Disney+ offer amazing services. However, allowing users to access certain features can give them a superpower. The reel allows users to bookmark scenes from tv shows and movies, and arrange watch parties with friends and family (given that we are in a Pandemic we need this feature more than ever). It also allows its users to see reviews of movies within the web app and the sources pull information from IMDB ratings (stars). This will save users time and create longer user retention. It also has a vast library and does not limit shows based on the country's location or region. Below are some screenshots of user reviews. I used a secondary research method to collect data from the app store which addresses a lot of problems we are trying to fix and add to our service.

Screenshot 2021-06-28 at 7.06.35 PM.png

Reviews on the Netflix App.

 

Understanding The User


Design Process

This project was built upon the standard of the Stanford d.school Design Thinking Process. I successfully empathized, defined, ideated, and redesigned the app. It is a standard framework for my team and I to synthesize with.

 

Summary

As this was a design sprint, we were short of time and had to come up with ways to max our productivity in a team of two. In the beginning, we collected data from secondary research. I collected user reviews from App Store and tried to identify common pain points in order to build personas.

Later, on we moved on to primary research by carrying out several UX research methodologies. I interviewed my friends and some amazing mentors/designers from ADB List. I did this by asking open-ended questions and allowing mentors to provide as many details as they could. This helped me collect a large amount of data. I have also documented interview transcripts.

I evaluated reviews by conducting usability studies on the third day after we were somewhat done with the prototype. We sent out links to some of our friends & asked for feedback.

Part of my research method also included A/B testing, which evaluates the effectiveness of different services and takes into consideration the best of the features and implements them.

I sketched rough draft of things we will be focusing on iPad.

I sketched rough draft of things we will be focusing on iPad.

 

Interviewing Users (Friends)

Here are the transcripts of my conversation with John and Kelly. They agreed to do a call on messenger and I questioned them about some of the drawbacks of the services there are using and features they like and dislike about. I asked them several questions and encouraged them to let their thoughts flow. The purpose of this interview was to understand users’ current needs, problems they face, opinions, thoughts, and experiences with different services.

Interview with John (uses Netflix)

Interview with John (uses Netflix)

Interview with Kelly (uses HBO Max)

Interview with Kelly (uses HBO Max)

 

Pain Points

After the interview, I took some time off to analyze and see things from their perspective. I tried to understand their motivations and needs and came up with a solution which I posted later in the solution statement.

Problem statement of John

Problem statement of John

Problem statement of Kelly

Problem statement of Kelly

 

Personas

I drafted the personas of John and Kelly based on research (interview questions) and by identifying the pain points that frustrate them from reaching their goals. I have also quoted a direct statement from them and written a scenario that gives an overview of what their pain points look like.

John’s Persona

John’s Persona

Kelly’s Persona

Kelly’s Persona

 

Empathy Map

I have documented an additional empathy map for John and Kelly and listed down some of their concerns to have a deeper understanding of her problem.

John’s Empathy Map

John’s Empathy Map

Kelly’s Empathy Map

Kelly’s Empathy Map

User Journey Map

A user journey is used for understanding and addressing user needs and pain points. The entire point of the user journey is to understand user behavior, uncover gaps in the user experience, and then take action to optimize the experience. Below is a photo of John and Kelly’s journey map.

timeline.png

Goal Statement

 

Competitive Audits


A competitive audit is an overview of my direct competitor's strengths and weaknesses. Here I analyzed the brands and products of Netflix, Hulu, HBO Now, Amazon Prime, and Disney+. Auditing has given me an idea of the products that were already on the market and their designs. It also helps me generate new ideas to solve problems I am already facing with my own design.

PART 1: Outlining The Audit Goals

Listing Competitors, Comparison Between Specific Features, Organization Research, Analyzing Findings, Summarizing My Audit

PART 2: Competitive Audit Report Overview

A competitive analysis report outlines the strengths and weaknesses of your competitors compared to those of your own business. Typically, a competitive analysis report will contain: A description of your business's target market. ... A breakdown of current and projected market share, sales, and revenues.

Group 169.png
 

Getting Started With The Design


Paper wireframes

This is the ideation phase. After brainstorming and combining ideas, here are some of the paper sketches I came up with and created wireframes on my iPad. Here are the first five wireframes of what the screen is supposed to look like. While sketching, the user’s journey was my main consideration. I also kept personas in my mind and wrote out a few on paper right next to me, to help me reflect and sketch accordingly.

Uiux - Mac - 1.png
Uiux - Mac - 3.png
Uiux - Mac - 2.png
Uiux - Mac - 4.png
 

Low-fidelity Prototype

I created a low-fidelity wireframe and prototype using Adobe XD. I have utilized the Gestalt principles to group items together to form proximity and continuity.

Web 1920 – 1.png
Web 1920 – 2.png
 

High-fidelity prototype

Later, I moved on to creating and designing the app UI and prototyping it.

Screenshot 2021-06-04 at 5.56.58 AM.png
 

Information Architecture

I designed the information architecture of the app on Figjam.

Screenshot 2021-07-05 at 11.05.30 PM.png
 

Design System

A Design System is a set of interconnected patterns and shared practices coherently organized. Design Systems aid in digital product design and development of products such as apps or websites. Here is the components of my design system I created for the sprint.

Design System.png
 

Going Forward


Takeaways

  1. Impact

    • Our main motivation was to learn from the user’s needs and come up with solutions that can help them a better view and manage their media.

  2. What I learned

    • I learned that being a team player is just so important. I learned how important it is to be able to comprehend the design process with the team and be in the same boat. Taking part in my first design sprint and working alongside a team has given me an in-depth perspective of what it would be like to work along with the team at an industry level.

Next Steps

Moving forward, we plan on working together again on new projects. Also, as we have gained vast experience while working together, we are comfortable working on new design sprints in the future. We have learned from the drawbacks of this project and would do some things very differently to increase efficiency, in the future.

 

App Preview