Bingefree
UI/UX Design | June-July 2023
A web extension designed to stop desktop users from excessive bingewatching
OVERVIEW
The binge model is a streaming release strategy where the streaming service releases the entire series all-at-once. It is what drove Netflix to become one of the top streaming platform years ago, and over the years, streamers have welcomed this model, and the term “binge-watch” have become more commonly used and accepted as a form of entertainment and leisure.
But what happens when it starts affecting your life as it becomes harder to control how much time you spend on digital media? Or can it even impact your life in such a way that would prompt people to want to do something about it? This project dives deeper into these questions to see if 1) design can offer a solution and 2) I can bring a unique value.
Role
Solo designer and researcher
Skills
Market Research
Concept Design
User Experience
Visual Design/UI
User Testing/Research
Prototyping
Tools
Figma
Dovetail/Avrio
Google Forms
Zoom
Notion
INITIAL DESIGN QUESTION
How might we help people have control over how much time they spend on digital media?
RESEARCH GOALS
Is this a personal problem or are others also struggling?
Prior to jumping into research, I drafted a research plan in hopes to learn more of the following goals:
Learn about the impact that over-consumption of digital media has on people
Uncover the motivation or reason behind why people consume digital media
Understand the end-to-end experience with consuming digital media, and how one determines whether the experience is a healthy or unhealthy consumption
Learn about the methods used to control consumption
Define the scope of the project by industry and product type
SECONDARY RESEARCH
Based on the market data and scientific studies, it was evident that we had a real problem at hand.
70%
of Americans engage in binge-watching
20%
of them binge-watch 5-10 ep in one sitting
70%
of those who binge-watch alone lose control of how many eps they watch in one sitting
“[Excessive binge-watching is correlated] with procrastination, loss of self-control, urgency, regret, neglect of duties, negative social and health consequences, lying, or even symptoms of withdrawal such as anxiety, nervousness, rage and concentration difficulties.”
PRIMARY RESEARCH
How was excessive binge-watching defined?
None of the scientific articles I read provided quantifiable data regarding this question, and according to NIH, research concerning its psychological conditions was scarce as well. Hence, I conducted my own primary research to see what I can discover.
By sending out a survey, I was able to screen for participants with the following characteristics:
Consumes video content at least 15 hours/week via digital platforms
Has experience binge-watching video content
Has experience feeling negatively after binge-watching
Have tried to reduce on video consumption
SCREENER SURVEY
Notable nuggets from survey that provided clarity on the direction for user interviews.
64 people participated in the survey, and all 64 participants stated that they enjoyed watching video content in their free time
Top 3 emotions that people felt after a binge-watch session were:
1) satisfaction
2) indifference
3) regret
81%
have experience binge-watching alone
86%
have difficulty stopping a show once it starts
58%
have tried to reduce video consumption time
TRANSLATING DATA INTO INSIGHTS — SURVEY
01
💎 Even though up to 86% of the participants indicated that it was difficult to stop a show once they start watching, 54% of them also felt satisfied after a binge-watch session.
Dig deeper
If people can feel satisfied despite losing control then perhaps there is something beyond the loss of self-control that is a stronger motivator that propels them to reduce consumption time. Under what circumstance do they feel that it is a problem and that something needs to be done about it?
02
💎 Participants who postponed responsibilities frequently or always to watch video content were more likely to associate with feelings like regret, depression and stress, regardless of how many hours they consumed in a week.
Pivot in approach
Perhaps, a greater emphasis should be placed on understanding when and why they feel these negative emotions during their binge-watching experience rather than discovering how much is considered an excessive amount.
USER INTERVIEW
Understanding their motivation and experience of reducing video consumption time.
Upon reviewing the interview transcriptions, I tagged parts of the transcripts with common themes for affinity mapping in order to identify key patterns and insights.
No secret formula
There was no single standard that determined the threshold for over-consumption. However, at the core of recognizing excessiveness were feelings of guilt, shame, and regret. And these feelings were triggered when participants acted against their sense of productivity, responsibility, or intentionality.
View documentation of primary research including interview guide
TRANSLATING DATA INTO INSIGHTS — USER INTERVIEWS
01
Various ways in which participants assessed their threshold for over-consumption. Even within objective measures, it varied based on the person and circumstance.
🙋🏻♀️ “if I spend like 2 hours, that feels already like too much”
🙋🏻 “correlates with how emotionally heavy the episode is”
🙋🏻♀️ “how much is it preventing me from doing other things”
🙋🏻”during the weekend, I feel like I have more time and leisure to watch a show for longer”
02
Primary reason that led participants to take action to reduce consumption time was correlated with not wanting to keep feeling guilt, shame, or regret from being unproductive or irresponsible.
🙋🏻♀️ “I can’t believe myself. [….] I could’ve chosen a more productive way to spend my time”
🙋🏻 “I felt awful, did I watch an entire season this entire day? What did I do?”
🙋🏻♀️ “Makes me always procrastinate. I feel rushed rather than at peace”
03
Binge-watching is not always correlated with negative feelings. Being intentional with when and how much to watch allows people to enjoy and even feel proud for binging through an entire series.
🙋🏻♂️ “When it’s not intentional, like Selling Sunset, which is not a show that I would go after, I’d feel like I’ve wasted my time cause it’s a type of show where you don’t really get much out of it. But The Glory was intentional that I was going to binge-watch it. It was like an accomplishment.”
04
Difficulty practicing willpower when you are alone, have low energy, and have shows that are designed to encourage viewers to watch the next episode.
🙋🏻♀️ “I would love it if I have more discipline and motivation on daily basis, but currently I don’t have that”
🙋🏻♂️ “Sometimes the episode’s too good, like the climax, that I can’t take myself out of the moment and pause”
🙋🏻♀️ “You’re not really going to pay attention to those reminders”
REDEFINED DESIGN OPPORTUNITY
How might we help binge-watchers who struggle with excessive consumption to practice intentionality and self-control?
DESIGN MANDATES
Ideation revolved around these core pillars.
Flexibility and control for the user to set their own time restrictions, for example when and how long to watch, as each individuals have different thresholds on what they consider to be “too much” consumption, and as well as different schedules.
— from key takeaway #1Make it modifiable as users’ needs and goals can change based on different seasons and priorities of their lives. What drove the participants to take action was a personal and emotional realization, and subjective variables can always change.
— from key takeaway #2Encourage users towards intentional decision making.
— from key takeaway #3Incorporate consented enforcement as participants have expressed the need for an external enforcer to rely on when their willpower is weak. Especially in knowing that people who binge-watch alone are more susceptible to losing self-control, and there is a high percentage of people who binge-watch alone.
— from key takeaway #4
KEY DESIGN PRINCIPLE
Quick & Easy to Use
People are more likely to take action when it doesn’t take much effort, and I wanted this solution to do the same. I wanted the setup process to be as quick and seamless so that users spend minimal time on the solution yet experience maximize impact. Hence, I focused a lot of my efforts on efficiency, learnability and usability for this project.
WHY AN EXTENSION?
What’s currently out in the market? Is there whitespace?
Based on research data, users watched long form videos and tv shows primarily on smartphones and desktops, so I analyzed various competitor products that catered to mobile users and desktop users to identify key features and determine whitespace opportunity.
Mobile apps had robust screen time features, yet web extensions were limiting in the range of features provided and as well as its capabilities. I felt that there was an opportunity here to create a solution that would better suit the needs of this particular target audience.
IDEATION
My vision for this product
To provide various ways for users to set time constraints to modify their consumption habits, and to keep them accountable for the time they set for themselves.
To provide a quick-stop to set basic control settings, and a separate main hub to manage and give access to greater control settings.
CORE FEATURES
Narrowing down on the MVP
Break Reminder
Set reminders to take a break from watching in established frequency — locked for 1 min.
Time Limit
Determine how much time you want to spend watching
Block
Designate a time to block and focus on something else — impromptu & scheduled
Site Groups
Pre-set list of websites that can be applied at the same time for any given key feature
Difficulty Levels
Challenge mode will act as an enforcer, preventing user to disable block when in session
Insights
A place for users to view insights or stats about their consumption habits
Management
Create, edit, view, and delete key features & site groups
Focus on Productivity
Option to re-direct sites and customize block messages
Setting & Support
Account settings
USER FLOW
Mapping out interactions between user actions & system inputs
Based on my user stories and identified MVP, I created key user flow to have a better understanding of how user goals would translate into digital interactions between the user and the extension.
Overall flow of user’s first experience using the extension
Pop-up
Main Hub
Brainstorming session like below helped determine which tasks to offer in the pop-up vs the main hub, and how the user would navigate between these interfaces.
WIREFRAMING
Early design explorations
After sketching out my initial ideas, I translated them into wireframes for a more detailed visualization of the layout, content hierarchy and functionality. These wireframes were then used to get user feedback during concept testing.
Setting a break reminder in the pop-up
Setting a time limit in the pop-up
Setting a quick block in the pop-up
Main hub concept
CONCEPT TESTING
Gauging objectivity in a qualitative test setting
The concept testing sessions were conducted with 5 participants in a moderated setting via Zoom. Since it was a qualitative test, I observed change in tones, comments that were either repeated or emphasized to gauge users’ interest levels.
Most excited features
challenge mode that can’t be disabled
setting a control to a group of websites
Positive feedbacks on the break reminder feature
🙋🏼♀️ “I’d use the break reminder the most. I like that I’m unable to close the reminder notification right away and need to wait.”
Early user testing revealed issues with learnability and usability.
Before
After
01 Optimize copy and visual cues for glanceability.
Users were less likely to read long text, so when users selected control types that were unfamiliar, they weren’t sure what it did until they read the description. To have the screens be more glanceable, I selected distinct emojis for each control type, and optimized the short text inside the time picker card to be more specific to each control type.
02 Give user control by allowing free input to set the time.
As opposed to a pre-set list of time options, the users expressed frustration when they were not able to choose their own hour and minutes.
03 Set the challenge mode as default.
Having the option to choose the between normal and challenge mode was expressed as a “temptation.” In considering my target users, I removed the selection drop down and set the default to challenge mode, but gave user the option to turn off the challenge mode in the main hub interface.
ITERATIONS ON REPEAT
Importance of early feedback
Radu and I had weekly discussions about my design progress and design decisions. One of the most significant feedback I received was to simplify the experience for users. It made me realize that I had taken elements from competitors and places like Mobbin without first considering the alignment with the user goals I defined through research.
01 Simplify the pop-up to only offer necessary features for a quick-stop experience.
As intended for a quick setup, I removed the option to select multiple sites as that was a feature offered in the main hub along with being able to create site groups.
02 Replace search engine with personalized site lists for users to select from when creating a new site group in the main hub.
Search engine gives control and flexibility to the users but it requires more user input and time. In knowing that users typically add sites they use frequently, it made more sense to prioritize efficiency and speed in the site selection process.
Before
After
Main hub design explorations
In receiving feedback from another designer with web experience, she left me with this question to ask myself, “is the information you want to show, best displayed in this format?”
01 Display the site groups as cards rather than as tables.
Tables are best utilized when there is a lot of data as they can show a multivariate dataset in a compact way. Most user testing participants anticipated using 2-3 site groups based on their current website usage, hence it didn’t make sense to display the site groups in this format as there wasn’t much data to show in terms of rows and columns.
Before
After
02 Utilize the entire real estate to design the control creation forms.
By reorganizing the form fields into two columns, I was able to design a layout that better optimized the space. I wanted the users to be able to fill this out without having to scroll.
Before
After
VISUAL DESIGN
Translating wireframes into high-fidelity designs
Setting a break reminder in the pop-up
When the reminder is activated, alert shown as modal overlay
Setting a time limit in the pop-up
When user reaches the daily limit
Setting a quick block in the pop-up
When user starts a quick block
Main hub dashboard
Creating a site group in the main hub
Creating a block session in the main hub
USABILITY TESTING
Another round of testing to uncover deeper usability issues
Conducted moderated usability testing sessions with 4 participants over Zoom and in-person. My main objectives were:
Identify any usability issues by observing points of friction particularly in navigating between the pop-up interface to the main hub interface
Evaluate whether the users can successfully perform key tasks with efficiency
01 Creating onboarding screens to communicate important settings and features upfront to set clear expectation with users.
Mention the frequency default setting while informing users how to modify frequency in the main hub to prevent confusion on whether it was set to one time or always.
Introduce site groups as further customization capabilities, as users had no way of knowing the features offered in the main hub without clicking on the links or navigation buttons in the pop-up.
Incorporated a bit of gamification to let users decide whether to take up the challenge to encourage conscious decision making, as users were caught off-guard when they learned that they couldn’t disable a control after they set the control in motion.
Before
After
02 Adding a dashboard button and applying the law of common region and proximity to improve navigation from the pop-up to the main hub interface.
2.1 Improve navigation by adding a dashboard button and removing the support button to avoid overcrowding and in considering the frequency of use.
2.2 To reduce the lag users took to click on the link, I moved the link inside the card with the time picker.
03 Increase familiarity of the term “site group” by adding description text and utilizing info icons to provide ways for users to quickly learn about the term.
3.1 Present a short description of this feature for the users under the main header to provide more context to help users determine if this feature has value for them.
Before
After
3.2 On the create new binge control page, add an info icon next to “site group” for users to hover for a tooltip description.
Before
After
04 Replace “activities” with “binge control” to describe the various time settings as the former was too general for users to know what it implied.
I relied on ChatGPT to brainstorm coming up with potential terms, and conducted a quick survey with a handful of my target users.
Final Designs
Initial login and onboarding
Setting a break reminder in the pop-up
When the reminder is activated
Setting a time limit in the pop-up
When user reaches the daily limit
Setting a quick block in the pop-up
When user starts a quick block
Main hub dashboard
Creating a site group in the main hub
Creating a block session in the main hub
Next Steps
Conduct 2nd round of usability testing to see if the iterations actually resolved the issues revealed during 1st round of testing.
Design the rest of the main hub pages — Insights, Settings, Support, and Accounts Profile.
Consult with a developer on technical constraints. If there was a developer on the team for this project, I would’ve consulted about constraints early on in the concept stage when MVP was getting finalized.
Learnings
The design process is no one-way street. Research insight that was regarded as less of a priority at one point resurfaced at later to hold more weight. Keeping raw research data organized and easily accessible was incredibly helpful when I had to reference these materials again throughout the project.
When selecting certain design components from inspiration sites like Mobbin, always think about whether the way in which this component was designed aligns with my target user goals and needs.
