Conflux

Interaction Design, UX Design

 

About:
Conflux is a website that allows users to browse movies and TV shows and determine if they are available on any of the streaming platforms to which they are subscribed.

Client: Student Project
Year: 2019
My Role: Interaction Designer, Researcher
Tools: Photoshop, Sketch, Figma, Pen & Paper

26_macbook-mockups-copy


Methods:
  Interviewing, Survey, Empathy Map, User Scenarios, Sketches, Wireframing, Prototyping, User Testing



Process

MacBook Pro – 11
streaming-tv copy

01.
CHALLENGE

01.
CHALLENGE

Propose a way to determine which of the user’s subscribed streaming platforms has what they want to watch.

Propose a way to determine which of the user’s subscribed streaming platforms has what they want to watch.

02.
RESEARCH

02.
RESEARCH

_________  User Interview & Survey

_________  User Interview & Survey

Interview:

We conducted user interviews to understand how people use streaming services, how they fit into their lives, and how it could fit better. Interviewing mostly users of competing streaming services, we could identify pain points and missing features

  • 13 in-depth interviews (7 male and 6 female)
  • Aged between 22-68 years old
  • Variety of occupations


Survey:

We conducted a survey to collect information about video streaming habits and preferences to help the best possible design choices for a new streaming platform, as well as knowing how streaming services affect user's view of a video.

  • Method: Mechanical Turk
  • 220 valid responses


Insights

  • Separation/Categorization main browse method
  • Customization of Interface and Content
  • Content warnings
  • “View trailer” option, not auto-play by default
  • Importance of filters

The survey also gave us data on the specific types of product details, filters, and even rating services that our users wanted.

_________  Empathy Map & User Scenario

_________  Empathy Map & User Scenario

 

Empathy Map

MacBook Pro – 13
MacBook Pro – 16
MacBook Pro – 17

User Scenario

  1. Ross and his girlfriend are traveling from East Coast to West Coast and will be on a flight for 5 hours. As he can never sleep on a flight, he decides to pick some movies/shows and watch offline while traveling. Ross always has a long list of movies on his Netflix List. He tries to share the list with his girlfriend to choose a few movies together, but couldn’t find the option. He decides to pick some movies himself and then show it to her at the airport to pick one together.

  2. It is freaking cold and snowing outside during the Christmas holiday. Daniel and his nephew are staying at home. To watch a movie together, Daniel checks his Netflix List and finds tens of movies he has already added based on the ratings, stars, and genres. He randomly play one of them and his nephew asks to change it. They pick another with an interesting poster and watch for half an hour, but it is boring and he switches to another show. They find the third one cheesy with low acting and creepy scenario. His nephew grabs the backgammon, turns the TV off and starts to play. He says: you never make a movie list again to not ruin other people’s holidays.

image 29

Insights:

  • Users like recommendations, especially those from family and friends.​
  • Users want to be able to customize their preferences but they want this process to be easy.​
  • Users watch alone and with friends.​
  • Users hate when they find out they have to pay for something after the fact.​
  • Users look to reviews and ratings to determine what to watch.​
  • Filters were very important, and we received specific feedback on which filters to include.

Proposed Solutions

A platform that shows all content available to the user in one place. A sync feature and a quiz feature to help them find the content they want. Detailed filters and a search feature. The ability to customize the platform and remove content they don’t want to see.

image 35

3.
DESIGN IDEATION

3.
DESIGN IDEATION

_________  Ideation & Sketches


PROPOSED PAGES

Home Page
Product Detail Page
Watchlist
Public Lists
Platform Sync
Watch Quiz


PROPOSED PAGES

Home Page
Product Detail Page
Watchlist
Public Lists
Platform Sync
Watch Quiz


PROPOSED PAGES

Home Page
Product Detail Page
Watchlist
Public Lists
Platform Sync
Watch Quiz


FEEDBACK

Add search bar
Think carefully about genres
Consider including match percentage
Show only items from platforms the user has
Prioritize based on video quality
Default to unpaid content
Filter on watchlist page
Make quiz fun, use visuals


FEEDBACK

Add search bar
Think carefully about genres
Consider including match percentage
Show only items from platforms the user has
Prioritize based on video quality
Default to unpaid content
Filter on watchlist page
Make quiz fun, use visuals


FEEDBACK

Add search bar
Think carefully about genres
Consider including match percentage
Show only items from platforms the user has
Prioritize based on video quality
Default to unpaid content
Filter on watchlist page
Make quiz fun, use visuals

SK1
SK2
Show Page 2
Show Page 1
Show Page 3

_________  Wireframing & User Testing

 

_________  Wireframing & User Testing

 

Home
Single Video
Platform Sync
Public Collections
Watchlist

Home Page

Product Detail Page

Platform Sync

Collection

Watchlist

Watch Preferences Quiz
MacBook Pro – 10
Quiz Results Page
OPT 1 – Quiz Results Page – PLAY
OPT 2 – Quiz Results Page – PLAY


Watch Quiz

FEEDBACK

  • Add search bar
  • Filter on watchlist page
  • Placement of navigation
  • Default to unpaid content
  • Think carefully about genres
  • Make quiz fun and use visuals
  • Prioritize based on video quality
  • Consider including match percentage
  • Show only items from platforms the user has
Group 11

Iteration

  • During this period of iteration, our biggest issues were the placement of the navigation and visual design of the filters. We also decided to turn the product details page into a fly out overlay, rather than a separate page.
  • The play button was a bit confusing.
  • Navigation menu placement needed more attention and consistent wording.
  • Suggested including Watchlist as a filter option.
  • Most users looked to the filters first to complete all tasks.
  • It was somewhat unclear where the star ratings came from. (We had not yet included the third party ratings.)
  • Everyone completed Sync tasks easily.
     
unsplash-image

_________  Visual Design

 

_________  Visual Design

 

To start the design phase, we created moodboards, searched for visual inspiration, and sketched logo designs. In particular, we needed to decide on a color scheme as well as a layout for our navigation and filters.

Desktop 2.1


Insights

  • Dark Theme
  • Whimsical Vibe
  • Different arrangements than existing streaming service
  • Minimal logo
image 2
Screen Shot 2020-01-09 at 10.43.15 PM
MacBook Pro – 18

4.
USABILITY TESTING

4.
USABILITY TESTING

 

_________  Layout & Interaction

 

_________  Layout & Interaction

During this period of iteration, our biggest issues were the placement of the navigation and the visual design of the filters. We also decided to turn the product details page into a fly out overlay, rather than a separate page. We created a basic task list to help us determine which interactions to focus on prototyping and to use for our upcoming user testing.

User Testing: Round 1

The prototype was initially tested with some users:

  • All of our users liked the secondary confirmation when deleting a category page. However, there were some issues with the wording of this question that led them to try to delete a category through the filters section.
  • The placement of the play button was a bit confusing.
  • The navigation menu needed more consistent wording.
  • Suggested including Watchlist as a filter option.
  • Most users looked to the filters first to complete all tasks.
  • It was somewhat unclear where the star ratings came from. (We had not yet included the third party ratings.)
  • Everyone completed Sync tasks easily.

From this, we worked on the visual design of the filters and changed the wording of some tasks.

image
image-1

User Testing: Round 2

We then continued prototyping as well as beginning to code a web app and source posters and data, taking this feedback into account.
We updated the visual design of our filters and used a subtle photograph for the background of our website. After demoing the update, we received the following feedback:

  • The secondary filter menus should be closable by clicking out as well as clicking the “Save & Close” button.
  • Include video quality on the video details page.
  • Include “Contrast” under “Quality” filter.
  • The filter strikethrough was a little unclear.
  • “Showing results for” in plain English/full sentence.
  • More gradations of “length” filter.
  • Include more content ratings (e.g., Common Sense Media).

At this point, we needed to finalize visual design details like icons, logo, and gradients. We also adjusted the navigation and filters again and added a natural language filter query.

image 2.2
image 2.3

Actionable feedback:

Check the sizing of signifiers
Lack of search
Change the TV/Movies filters so all filters expand instead of having some that toggle
Close/save the expanded filter pane when the user clicks outside of it
Move the delete sync group button to the top right corner of the sync group

We started by sketching some basic ideas for the quiz and came to the decision to stay away from promoting specific movies/tv-shows and focus more on genre/feeling. In addition, the quiz should be available to take in several ways:

  • As an individual or group
  • On one device or several

5.
MOCKUP

5.
MOCKUP

Homeee
MacBook-Pro-6
MacBook Pro 555

HOME PAGE

HOME PAGE

SHOW DETAIL PAGE

SHOW DETAIL PAGE

PLATFORM SYNC

PLATFORM SYNC

PLATFORM SYNC

Desktop
Desktop-1
Desktop-2
Desktop-3
Desktop-4
Desktop-5
Desktop-6
Desktop-7

WATCH QUIZ