UX Designer | Human Computer Interaction
Master's Student | Human Computer interaction
Conflux Research & Design Project
Interaction Design Studio
MY ROLE
SECTOR
Designer
TIMELINE
January-May 2019
Streaming Services
Over the course of a semester, our team of 4 iteratively researched and designed a streaming platform called Conflux.
OUR GOAL
We did not believe that Netflix, Hulu and Amazon Prime had solved every user's streaming needs. We set out to create a better streaming platform.
OUR SOLUTION
Conflux - (n.) the place where streams meet
Conflux is a website that allows users to browse movies and tv shows and find where they are available on any of the streaming platforms to which they are subscribed.
WHY CONFLUX?
Although we began the project focused on creating a portal for Amazon Prime Video, we discovered through our research that users don't need another streaming service.
​
Users need a way to filter through their many subscriptions and find out which has what they want to watch.
SOME OF OUR USER-DRIVEN FEATURES
Vertical Scrolling Browse
Collections
"Sync" - find joint recs feature
Natural language search
Fly out video detail page
Customize categories
Extensive filters
"Wayfinder" - what to watch quiz
Help users find something new to watch?
Help users know what content is available to them?
Help users find what content they’re looking for?
Help users save time?
HOW MIGHT WE...?
RESEARCH
BUILDING EMPATHY
Methods
-
Lit Review
-
User Interviews
-
Survey
-
Usability Testing
Methods
-
Empathy Maps
-
User Scenarios
-
Statistical Analysis
Artifacts
Actionable Insights
-
Create user-generated collections because users like seeing recommendations from family and friends
-
Remove categories from the homepage
-
Create a Sync account feature as well as an in the moment quiz to help determine what to watch
-
Include reviews as well as third part ratings.
-
The survey also gave us data on the specific types of product details, filters, and even rating services that our users wanted.
IDEATION
We envisioned a series of categories on the main browse page that would be vertically expandable because we did not want our users to have to scroll horizontally through an unknown quantity of videos.
We clearly indicated how many videos were in each collection.
We also sketched a system of sticky filters that would allow the user to filter at any time.
WIREFRAMES
PHASE 1: WEBSITE
Prototyping, User Testing & Design Iteration
We tested our prototype initially with 6 users in 2 rounds.
Using the feedback from our wireframes, we expanded our prototype in Figma. Simultaneously, we built our prototype into a web app using the AngularJS framework. We built a sample JSON dataset of movies and tv shows which we used as the content on our site.
-
Sizing of text and icons increased
-
Updated visual styling
-
Natural language search
-
Create/Edit Collection
We iterated a few options for the search layout and continued to work on the wording and functionality of the filters and search.
Additional updates included:
VISUAL DESIGN ARTIFACTS
FINAL DESIGN
Home Page
Expanding Search Bar
Filters
Expanding Detail Page
Sync Feature
Collections Page
Collection Detail Page
PHASE 2: WAYFINDER WATCH QUIZ
The second phase of our project was a quiz designed to help users choose what to watch when with a group or alone based on their current mood. This was based on problems found through our research.
We wanted it to be fun and interesting, so we designed several types of questions.
Sketching & Brainstorming
We started by sketching some basic ideas for the quiz and came to the decision the the quiz should be available to take in several ways:
-
As an individual or group
-
On one device or several
We wanted the quiz to be fun and knew we need several question formats.
One thing we decided was to stay away from promoting specific movies/tv shows and focus more on genre/feeling.
We chose the name “Wayfinder” to fit in with our water-related theme.
Design Changes
When transferring these designs to the web app, we had to slightly change some visuals.
We also placed “Wayfinder” in the side bar, rather than as a special feature because it never felt visually balanced on the righthand side.
We then created a variety of wordings for the different question types and finalized a results screen. We decided to only show 3 recommendations to differentiate this feature from our sync feature.
-
As an individual or group
-
On one device or several
Credits
User Interviews
all
User Survey Creation/Recruitment
all
User Survey Analysis
Shannon Fitzgerald
User Testing
all
Sketching/Ideation
all
Content
Carrie Lindeman
Icons
Shannon Cates
​
Wireframes
all
Figma Prototype
Shannon Cates
Ghazaleh Keshavarz
Visual Design
Shannon Cates
Ghazaleh Keshavarz
Shannon Fitzgerald
HTML/CSS Prototype
Shannon Fitzgerald
Carrie Lindeman
