Incluvie Web Design

A design research case study for a startup that deals with movie reviews and ratings based on diversity.

Project Summary

Incluvie.com is a platform for rating, reviewing, and sharing your opinion about how minorities are represented in films and TV shows. It aims to provide an overall movie rating by calculating a diversity score. It is an IMDB that depicts diversity in cinema. With Incluvie, you can go online and find out which movies and TV shows celebrate or harm inclusiveness and people of color. You can voice your own opinions - rate, review, and discuss using the platform. It's refreshing to see the world from a different perspective that celebrates inclusiveness in an area where the audience generally ignores or forgets about underrepresented groups.

Role

  UX Researcher
  Information Architect
  Visual Design

Timeline

  3 months

Tools

  Adobe XD, Google Survey,
  Illustrator, Protopie, Adobe   Animator

Team

  Hongze Chen
  Piyush Rai
  Ravi Rao
  Yi Sun

Problem Statement

What is the problem that I'm solving?
With IMDB and Rotten Tomatoes' existence as a leader in movie reviews, there is no way people can provide a rating or share their opinion, which addresses diversity and inclusivity. Our main issue is to bring the issue of underrepresentation to the center of movie reviews and ratings. It is also essential to understand how different individuals perceive diversity and being able to convey it.
''

They introduced one person of color for, like, a few minutes, and they got rid of him as quickly as possible. I remember I got really angry. This is not the only time it happens, it’s like every time… ‘Yeah, we have diversity, we have one person of color!’ [And then these characters] go marry someone else, or they die, or they just go away.

Cathy Yee, CEO and Founder

Deliverables

What solution am I providing?
  • A report of usability testing report performed on the current platform.
  • An updated visual design for the website based on feedback from usability testing and user research.

Process

What design process I followed?
Empathize
Learn about the audience for whom you are designing the end product.
DEFINING GOAL
Before doing our research on the topic, we performed a stakeholder analysis on our project. We categorized them as a primary and secondary stakeholders.

Identity

Be the pioneer in showcasing the Diversity in Movies with the voice of the General Audience.

Awareness

Create awareness of and importance of Diversity and letting the audience be vocal about it.

Familiarity

Keeping current rating and review perception intact introducing Diversity with it.

Usability

An intuitive website interface that attracts the user to Read and Rate Movie reviews.
Scope Analysis
During this process, I sat down to understand the problem scope and challenges to get an insight into the current problem users is facing. I intend to do market research and do some competitive analysis and interviews of the existing and potential audience.
While working with the team of Incluvie, they already had a beta site build with limited functionalities working. Since because of NDA, I could not go with an online survey and online interviews.
Research
Gain Insight on the user needs and understand their pain point.
Ethnographic Interviews
People generally watch movies or TV shows with family and mostly at their home. For this interview, I chose an ethnographic style, as I did not want to make our interviewees come out of their comfort zone. The nature of our research involved questions about movies and what their perspective is.
Why Ethnography ?
  • It is a natural and on-field experience with the participant.
  • All the information and data gets collected with observation, note-taking, taking photos, recording the behaviors, asking questions, and interviewing.
  • It emphasizes seeing how the user performs the task rather than asking or assuming it.
  • It can be an accurate representation of the real-world problem and what you are genuinely trying to solve.
  • It can be time taking, but we will have more in-depth details on the issue and reach the solution.
  • It is a measure taken to avoid understanding and misunderstanding products or services from real-world users.
Approach
Planning Ahead
A mobile application with a reward system that students and employees can download and collect rewards by having their reusable bags and bottles (mugs). The rewards app will encourage people to keep in mind bringing their reusable containers and earn more rewards.
Allowing participants to behave naturally
I knew that this could be the trickiest part and deciding factors on how successful our interview went. Allowing the user to act naturally can give more in-depth insights into the research. 
Stick to the goal
Not all the interaction and discussion with the user will be useful and can be diverting from the research goal, so I need to keep looking into my notes and bring back the user on the interview's purpose.
Role Playing
This method can help me understand situational behavior or a certain kind of user behavior. Having a good rapport and asking open-ended questions are useful to lead the discussion.
Interview Overview

How many?

20 people

Time

30 -45 mins

Age

20 - 30 years

Area

Boston, MA

Ethnicity

African-American, Indian, Hispanic, Asian
Key Findings
  • Mainly watch movies on Friday and Weekends
  • Use streaming services such as HULU, Netflix, PrimeVideo, etc.
  • Critic rating and review are essential but don't affect their desirability to watch any show or a movie.
  • Watch movies in the theater because,
         - The trailer was intriguing.
         - Have heard about the movie from their friends or from social buzz.
         - The movie falls under their favorite genre
  • They mainly use IMDB or Rotten Tomatoes for reading reviews and ratings.
Read my extensive report of user interview.
Read Report
Competitive Market Analysis
For the market analysis, I chose the top four websites leading the movie review and rating business and performed a heuristic evaluation of them.

Pro's

  • Movie trailer lists to capture user’s attention.
  • Rating numbers from the member who sign into the website.
  • Easier for users to compare with other movies.
  • Easier for users to compare with other movies.
  • The website provides a comment area for users to read the review.

Con's

  • The movie poster on the background makes the page look busy and hard to focus on one thing.
  • The user gets lost as the hierarchy of the page gets lost when scrolling.
  • Viewing the ranking of film and suggested movies cannot be found upfront.

Pro's

  • The Tomatometer® icons communicate the general rating scale effectively.
  • Effective search bar implementation lets the user dive into what and why the user landed on the website.
  • The visual hierarchy and structure of the website are well organized and easy to understand.
  • The “Ticket & Showtimes” page is useful. It is showing the nearby theaters, currently available movies, showtime schedule. 

con's

  • The necessity of login or signup can get annoying.
  • The user gets lost as the hierarchy of the page gets lost when scrolling.
  • Viewing the ranking of film and suggested movies cannot be found upfront.

Pro's

  • Simple and clean interface. 
  • A different approach with a sidebar menu for all the navigational content.
  • A sorted list of the events happening can be related to movies, such as trailer launches and trailer reactions.
  • Fun and eye-catching sub-header with each list or card.
  • Own set of critics and rating criteria with a description of critics.

Con's

  • It is hard to find the movie's rating at a glance as there is no denotation or symbol.
  • More of blogging content and less of ratings and reviews.
  • Lazy scrolling makes the footer content non-viewable. 

Pro's

  • Search Bar right in the global navigation allows one to quickly search a movie and get reviews or ratings or find the nearest Theater.
  • Both the Global Navigation and the footer are in a grey block, an excellent example of grouping from Gestalt's theory.
  • It respects user's mental model by using the 5-star rating sign to depict how people are enjoying a movie.
  • Aesthetically, the Text on this site is big and readable.

Con's

  • A massive chunk of the front page is dedicated to ads rather than other content
  • Rating and reviews are pulled from rotten tomatoes and break the visual hierarchy of the movie reviews page.
  • Less filtering options for selecting the movie genre and other kinds of stuff
Usability Testing
My usability testing approach was to understand the user's pain point and their thought process when it comes to rating and reviewing movies concerning diversity. It was important to me that the user understands diversity and what it truly means.
I conducted usability testing with ten users and had a protocol in place. I prepared a set of tasks that I gave a user to perform and observed them on how they perform on the beta website of Incluvie. 
‍
* All interaction with the user was voice recorded and then transcribed into a word document. I took consent before Recording and Documentation. All interactions with the Incluvie Beta website were done on our laptop, as disclosed in NDA. 
Usability Test Questionnaire

Pre-Test Questionnaire

  • Tell me how you usually search for movies to watch? 
  • Do you currently look for movie reviews online?
  • What are some sites you frequently visit for movie reviews?
  • What are some of the factors that influence the movies you select?
  • Is there a specific movie review site you use?

Exit Questionnaire

  • How would you describe this site in a couple of sentences?
  • Is this an exciting service? Is this something you would use again?
  • Tell me two things you liked about this site?
  • Tell me two things you disliked about this site?
  • Do you have any other comments you would like to make regarding Incluvie.com?
Task Scripts
Task
Search for a movie and read reviews.
Starting State
Incluvie.com home page.
Completion Criteria
Participants could search and find the movie ‘Aquaman’ and read reviews that other people have left.
Script
It is Friday night, and it has been a long work week, and you have plans to unwind. You chose to settle down with a movie. You have heard many great things about the new movie ‘Aquaman’ and are interested in seeing it tonight. You will use incluvie.com to read about Aquaman and what people say about the movie other people have left.
Follow-up Questions
What did you think about how easy it was to find the movie and read the reviews?Is there anything you didn’t like about this process?
Task
Leave general movie review and diversity review.
Starting State
Incluvie.com home page.
Completion Criteria
Participant successfully found the movie ‘Aquaman’ and was able to leave a general rating and a diversity rating.
Script
You have just watched Aquaman, and you want to go on the website and leave a movie review and a diversity review. You will use incluvie.com to leave these reviews.
Follow-up Questions
Follow-up Questions  ​What did you think about the process of leaving reviews?How were you able to diversify the process of going general reviews from leaving diversity reviews.
Key Findings
With usability testing analysis, I found that on the beta website of Incluvie, users could perform the given tasks comfortably. Whereas it required many design changes to become more usable and intuitive. I also collected feedback on how they feel about the idea of this website and its offering, and here are some points that are I found,
  • They care about diversity and are happy to see this implementation.
  • 90% of the usability testing users encouraged addressing this issue and providing them such a platform.
  • All users wish to see equal pay and gender equality as well.
Ideate
Brainstorm and come up with as many creative solutions as possible.
Behavioral Mapping
I started identifying the trends and behavioral patterns from the data collection of our users. This helped me build user persona more significantly as I knew our user's primary pain points. I took note of all the user's traits with behavioral mapping and put them on the wall to identify the shared characteristics.
Persona

Constructing a hypothesis

Finding Patterns

Constructing Persona

Understand User Scenarios

In my user persona, I addressed the primary pain points and kept them aligned with the goal of Incluvie. With my behavioral Analysis and persona hypothesis, I understood that the user is excited and curious about this implementation and needs a whole package solution that can serve as a one-stop-shop to view the recommendation, see movie reviews and ratings, know the cast and related events. I also concluded that most of our users found it challenging to understand what diversity concerning Films and Media exactly means. All this combined was referred to as Goals and Frustrations of the user, which I wanted to be mindful of while making design decisions.
Functional Needs

Primary Need

  • Search for a movie/TV shows.
  • Read review and Rate movies.
  • Comment on reviews shared by other users.
  • See recommendations for the new and upcoming movies and tv shows.

Secondary Need

  • Know cast and crew of the movie.
  • Watch trailers and teasers for upcoming movies.
  • View offers on tickets, shows, and theaters.
  • Able to book tickets for movies in a nearby theaters.
Wireframing
&
Design Mockups
Build a backbone structure that represents your idea with multiple iterations.
Because of NDA, I am unable to showcase my design and wireframes currently. But I am happy to discuss my process and my learnings with you.
Initial Wireframe
Visual Styleguide
Font style
Primary Font
The quick brown fox jumps over the lazy dog
Secondary Font
The quick brown fox jumps over the lazy dog
Color Palatte
Homepage Design
Movie Landing Page

Takeaway

What did I learn from this project?
Defining the interview process, doing mockup interviews with peers, co-ordination, and digging up insights from the user made me understand the significance of UX research. I learned how important it is to know what users want and how simple things that are ignored can be meticulously designed to serve users' demands. Usability testing and behavioral mapping revealed unexpected information that later on adapted to my designs. Wireframing and iterations on initial mockups made me understand the importance of implementing feedback and knowing that users are always right. It made me empathize with them as a designer, thereby discovering and eliminating pain points at early stages.

View more projects

UX Design
Personal Project
User Research
User ExperienceVisual Design

UI/UX Designer at Northeastern University

My role includes indulging myself as a specialist in User Experience and UI designon multiple projects and ensuring we provide the best digital experience to universities students, faculty, and staff

View Project
Personal ProjectUI/UXMobile App Redesign

Venmo App Redesign

A design challenge to create an visual solution by altering the UI design, user flow, and overall product experience.

View Project
Product DesignUser ResearchUsability Testing

Incluvie.com Website

A complete overhaul of the website for a startup company that deals with movie ratings based on Diversity. Salient changes were made to improve the UI design and boost user experience of the product.

View Project
User ExperienceVisual Design

UI/UX Designer at Northeastern University

My journey as specialist in User Experience and UI design on multiple projects and ensuring we provide the best digital experience to universities.

View Project
Personal ProjectUI/UXMobile App Redesign

Venmo App Redesign

A design challenge to create an visual solution by altering the UI design, user flow, and overall product experience.

View Project
Product DesignUser ResearchUsability Testing

Plastic Waste Design Solution

A comprehensive design case study with a goal to develop a solution for single-use plastic waste problem for Northeastern University.

View Project