Tackling distractions in a UX case study

The ability to fight distractions and work with a laser-like focus is an important skill, one that is strikingly important now as many of us work from home, where distractions have superpowers.

Distractions have always been a barrier to producing high-quality work. Many of us are distancing ourselves during the COVID-19 pandemic, which means we have more distractions to tackle than before.

In this UX case study, I attempt to tackle this issue. I investigate how knowledge workers, such as book writers and data journalists, are affected by and cope with distractions. Based on my findings, I brainstorm potential solutions and prototype a solution that fits users’ needs well. I use a variety of UX skills and techniques, such as job stories, flow diagrams, and wireframe prototypes to achieve this.

Why am I doing this?

I am a final year PhD student / Researcher at RWTH Aachen. While this gave me the opportunity to work on several UX projects, they were largely academic in nature. There are some key differences between UX in academia and industry. For example, academic projects focus more on methodological rigor and presentation, whereas industry projects focus more on real-world results. I am now looking to transition to industry, and I want to use this UX case study to showcase my UX skill set.

How I chose this topic

I used the UX challenge website to identify a broad problem statement:

We’re constantly fighting distractions and procrastinations when we’re trying to get work done on the computer. How can you design an environment that helps people focus on their work to be done?

I used this as a starting point, but used my own introspection into topics like focus, distractions, and deep work to further specify the topic.

Background research about distractions, procrastination, and focus

Distractions incur costs—time, energy, anxiety expended from procrastination, and, this is my favorite, increased guilt during downtime.

To understand distractions and why they are so irresistible, we need to understand novelty bias and the nature of deep work.

Novelty bias: We are drawn to new things around us: a new blog post, tweet, or news article—all of these captivate our attention more than objects that are familiar. These distractions are akin to shiny objects, simply hard to resist. This ability to notice new objects served us well in the past, and helped us notice a venomous snake or a predator lurking nearby.

Deep work: Focussed work (or “deep work”) is uncomfortable by nature. This discomfort leads to friction, making the sustenance of focus hard. Our mind starts to wander and looks for respite—simpler tasks that are more comfortable, such as answering an email, watching a YouTube video, or browsing the Instagram feed, are more enticing when we perform deep work.

Existing techniques for handling distractions

There is a lot of work about how one can handle distractions. In my research, I identified the following techniques the distracted knowledge worker can follow:

• Be intentional with work. Having clear intentions will lead to less reasons to procrastinate.
• Limit exposure to distractions if possible.
• Be mindful of distractions by keeping a distraction journal.
• Lower mental resistance required to start work, e.g., by using a pomodoro timer or breaking down your task into manageable chunks.
• Aim to get into a flow state. It has been shown that tasks that are just above your average level of difficulty induce a flow state. Easier tasks result in boredom, whereas harder tasks cause panic and anxiety.

Additional resources about handling distractions

• Mindful iPhone lock screen: https://medium.com/better-humans/a-phone-setup-that-will-make-you-more-mindful-1c5d8be7e661.
• Siempo—mindful home screens on mobile devices: http://www.getsiempo.com
• 5 apps that help you focus and avoid distractions: https://lucid.me/blog/5-simple-apps-help-focus-avoid-distractions/
• Bigger collection of internet filters and monitors: https://filters.pluckeye.net

End users and context of use

While it is important to determine the end users and context of use for any UX project, it is especially important for this project as there are many variations across the types of distraction, work, and users’ motivation levels.

End users: The end users of this project are knowledge workers. Knowledge workers spend most of their time performing deep work, i.e., work that demands focus and cognitive function. Distractions are not exclusive to knowledge workers. Many others, such as a secretary who answers emails and takes phone calls, also face distractions. However, their work, in many ways, are more immune to distractions. For this reason, the focus of this project is on knowledge workers.

Here are some example knowledge workers and their corresponding task: A doctoral student writing her dissertation, a software developer solving a complex problem, a manager or team leader strategizing her team’s next quarter, and a student preparing for an upcoming exam. These examples were arrived at based on my personal experience and via online research.

Types of distractions: There are two types of distractions: advertent and inadvertent.

• When performing deep work, our user may feel uncomfortable because of the nature of the work — deep work is not easy. This discomfort might prompt users to procrastinate by seeking “low cost” activities. These are advertent distractions.
• When performing deep work, distractions might pop up: phone calls or messages, a colleague showing up, or a bee flying around are all valid distractions. These are inadvertent distractions, i.e., the user is not actively seeking out these distractions.

Inadvertent distractions have already been tackled to a large extent. Apps like Focus, Freedom, and SelfControl help block these inadvertent distractions so that users can perform their deep work unfocussed. For distractions that arise from people, such as a colleague or a child, there are measures in place, such as a do not disturb door sign or a closed door.

Advertent distractions, on the other hand, depends on the individual. One might argue that the above applications might help avoid even advertent distractions, but there are situations where this is not possible. Take the example of a software developer. She needs access to resources like YouTube and blogging platforms to learn programming and debug her source code — blocking them is not an option.

Context of use: When brainstorming end user groups, I identified the following factors or dimensions related to the end users that could affect the outcome of this project:

• Does the user work at her home, or at an office? More particularly, are there clear distinctions between work and leisure? This could affect their proclivity to distractions, e.g., it might be easier to get distracted at home, and the type of distractions they encounter, e.g., a user working at an office might get distracted by colleagues but a user working at home faces online distractions.
• Does the user work with a computer or an electronic device? For most knowledge workers, the answer is yes. But note that there are many workers who do deep work without the aid of electronic devices. For example, many authors still use pen and paper to write their books.

Based on this research, there is a niche for supporting knowledge workers avoid distractions that cannot be blocked. These distractions come up in the websites they need to use to accomplish their work. Thus, our specific problem statement is:

How do we help users who cannot block resources avoid distractions and procrastination?

Scope of this project

• The distractions are limited to those caused by computing devices that include a web browser: mobiles/tablets and desktop/laptop computers.
• The target users are those who perform deep work at home or a public place, like a library or a coffee shop.
• The target users need access to one or more potential distractions, such as YouTube, social media, or blogs, to be able to perform their work.
• The target users do not use specific apps to access the websites needed for their work; they use standard web browsers.
• The target users work alone.

Job stories

Why job stories: Job stories, as opposed to user stories, are about understanding users’ causalities, anxieties, and motivations. User stories are based on personas and do not help the design team rationalize certain design decisions. For details, see this article by Alan Klement.

Interviews: I conducted semi-structured interviews with six participants to determine the job stories. Participants were knowledge workers from different backgrounds: doctoral student, IT manager, software developer, and blog writer. Participants came from three different countries and had a median age of 28 (range: 26–32). All interviews were conducted via teleconferencing software. The interviews were partially transcribed and analyzed.

The following job stories are extracted from the interview transcripts.

• “When I am doing my work, I want to have access to potentially distracting websites so I can use it to advance my work.”
• “When I am in the middle of my work, I find it hard to resist the urge to pick up my phone (or) surf the web so I can get away from the difficult task.”
• “When I am doing my work, I want to finish my work fast and in good quality so I can relax.”

End users want to produce a good quality of work. But doing this is hard and uncomfortable (“… hard to sustain focus for a while, you know …”). To get out of the discomfort, they seek distractions and procrastinate (“… reading blogs or reddit when I can’t focus … lost hours to it.”). As end users procrastinate, their anxiety increases. Note that their anxiety with work is what prompts them to procrastinate in the first place. This is therefore a vicious cycle.

Personas

Based on the interviews and job stories, I developed the two following personas.

Desired outcomes

Given below are the main desired outcomes of the solution. I use the term “intervention” to refer to the solution.

• The intervention should be convenient. Cindy and Jeremy need to be able to access websites they need for their work at all times. (The nature of their work is such that preconceived blocking schedules are not feasible.) The added workload resulting from the intervention should be minimal, if any. (Higher workloads might lead to more friction, and result in lesser long-term adoption rates.)
• The intervention should be easy to configure, and should not have a high ceiling of entry.
• The intervention should support the users’ intentions during a work session. For example, in a session, our users might plan to accumulate knowledge about a particular topic. The intervention should activate support this as the focus of the session.
• The intervention should be based around the core principle of empowering the user, rather than taking the control out of user’s hands. In a similar vein, the intervention should be supportive, and not punitive.
• The intervention should be flexible to account for the non-deterministic nature of deep work.
• The intervention should help the user find information that is not currentl useful but might be useful later by leaving breadcrumbs.

Ideation to determine potential solutions

Once I had a clear idea of users’ problems, I spent ten minutes to brainstorm potential ideas as shown below. The ideas are grouped on the basis of the underlying principle or technique. Before discussing these ideas, I first discuss some assumptions and define some terms.

Assumptions and terminology

• Users use standard desktop web browsers as a part of their work.
  Note: It is possible to use apps for specific apps for social media platforms, but this is not a frequent activity according to our interviews.
• A session is a period of time, e.g., one pomodoro session of 25 minutes, during which the user works on closely-related tasks.
• During a session, the user will have to use certain websites as a part of their work; these websites are referred to as dependencies.
  Note: The dependencies can be one website or multiple websites.
• By utilizing dependencies, the user wishes to finish one or more tasks in her work.
• Websites that are not required for completion of work are termed distractions.

Intention-driven solutions

• Before using dependencies, the user specifies her intent: a tuple of textual description of purpose and time. Once this time expires, the user is notified that her session with dependencies has been completed. Users can choose to ask for more time.
  Note: This can be configured so that requests need to be made for each website. This can be useful when several websites are not required to accomplish a task, but can add additional overhead for configuration.
• The user is reminded of her intent (purpose, time) every time a tab or browser window is opened. The information is shown as an overlay on the browser and does not a) require user action and b) block interaction with the browser. The overlay can be configured to be displayed at all times on the browser, e.g., in the bottom-right corner.
• When users specify the intent (purpose, time) for a session, they will be locked to that duration. Additional use would require the creation of new session intents. This encourages users to create session intents that are feasible and well planned.

Mindfulness-based solutions

• Displaying the user’s intention for the current session as an overlay on the web browser could help the user be mindful.
• As the user browses new websites during a session, an overlay on the web browser visualizes the history of navigation as a hierarchical tree, e.g., like Treely.
• When requests are made to open new webpages, the requests are shown on a sidebar overlay. Requests are processed only after a set delay. The user can cancel a request before it goes through. An alternative approach is to require the user to make repetitive requests or increase the effort needed to make a request (e.g., by solving a simple math problem or by typing a phrase).

A fun solution

• The user’s work session can be gamified in numerous ways. One idea is to visualize a tree that represents how focussed the user is. The tree leaves start to wither and drop when the user deviates from her path of focus. The problem is detecting these deviations. The deviations could be detected through a webpage’s keywords, but this might not be reliable. The deviations can also be self-reported by the user, but this might be ignored. It is important to remember that while gamification approaches can be successful, they could become monotonous after a while if the rewards are not progressive.

Solutions for specific websites

• For blogs and social media platforms, a rather simple but powerful solution is to hide the sidebar. Sidebar usually shows links to other posts, blogs, information about the author, or advertisements.
• For YouTube: (a) block the recommended videos feed on homepage making YouTube usable only with a query; and (b) replace recommended videos on the side bar with an overlay or search results (or disable the side bar). It would be useful to start with an existing solution, such as this one.
• For Wikipedia, reveal the URL to the user only upon request or with a delay. This adds more effort to open new webpages, causing users to reconsider if the new webpage contributes to their search trail. This solution might be inconvenient, however, so the user needs to be able to override them.

Miscellaneous

• A common problem when working is that you come across something that is generally interesting for your work, but does not immediately serve the current session’s intent. Such entities can be captured in a “for-later” bin on an overlay. Once captured, this entity is then removed from webpage.
• It is better to warn the user before a session is about to end instead of warning the user after the session has ended. This helps the user to wrap up their session and have a clear “end” to the session. This also prevents sessions from always bleeding into each other.

Summary of ideas

After much deliberation, I decided to go ahead with aspects of various solutions. The aspects were chosen to contribute to one holistic solution, and were guided by the following principles:

1. Be intentional
2. Increase awareness of current task
3. Empower users
4. Improve chances of flow

The broad-strokes core functionalities of the resulting solution are as follows:

• Obtain intent from the users before a session with web browsers. This intent is optional, but encourages users to be intentional in their use of web browsers. The envisioned system would also encourage users to be concrete in their intent description by suggesting users to create hierarchies of actionable tasks. This might seem like an inconvenience, but highly structured sessions can be more productive, and limit procrastinating behavior.
• The system would display the user’s tasks for the current session as an overlay or panel in the browser. The overlay can be configured to be shown always, for a few moments when a new tab is opened, or upon users’ request.
• If the user skips intent, this is considered a break. Supporting breaks from work is important. It is also important to avoid undue effort from the user when such effort is not rewarding. For example, it is unreasonable to expect the user to provide their intentions, when all they want to do is to check their schedule on Google Calendar.
• Support binning, a task where the user can capture content that is not relevant for the current task, but is either relevant for work in general or is a fun distraction that might be interesting to investigate later. The interface design for binning would depend on the media. For example, hyperlinks can be captured through a simple Option + Click command. Once captured, the hyperlink is removed from the text, allowing users to continue their work unimpeded by the distracting hyperlink.
• For increased awareness and to support the user’s workflow, the system visualizes the navigation history as a hierarchical tree. Each node in the tree represents a webpage that was visited. The transitions represent the user action, be it a keyword search or location in a webpage where the link to the new webpage was found. Transitions are thus created from one parent node to child node. Sibling nodes are thus webpages opened from one parent webpage. This visualization has two envisioned benefits: a) help the user be mindful by visualizing their workflow and b) help the user more easily navigate through information hierarchies. The latter can be immensely useful in situations where the user needs to return to a previous webpage that had significant information. The tree also acts as breadcrumbs that can help with binning.
• The envisioned solution could also support functionalities for power users.
  Currently, the user needs to specify intentions for the entire session with the web browser. For users who need a more fine-grained control of their session, they can choose to specify intentions for tabs from each website or even for each tab.

Other ideas and design challenges

In addition to the above ideas, other options were considered.

Gamification has been popular over the years, and could offer a fun approach to help the user avoid distractions. There are several existing solutions that leverage gamification. One great example is Forest, which is a mobile app and browser extension. With Forest, the user sets a period of time that they would focus. During this time, the user is not allowed to use the device. As the device continues to be unused, a tree grows on the device. If the user uses the device before the end of the session, the tree stops growing and all progress is undone. For our problem, there were several ideas for gamification. However, there was one key issue: how to determine whether a website contributes towards the session’s intent? Note that, for this project, we are not concerned about websites that are clear distractions. We are only interested in websites that are necessary to complete work, but can also be used as distractions. Since there were no reliably way to answer the above question, this idea was dropped.

Many of our interviewees commented that one aspect of working at an office they missed a lot was having colleagues work around you. It is not exactly peer pressure, it is more peer conformance. It is hard to slack off when you have people around you doing productive, meaningful work. For users out there who are looking for solutions to our problem, and would like to have an accountability partner, there are options. Focusmate is a website that allows you to schedule 50-minute sessions with like-minded people. In a video call, you spend the first 30 seconds or so describing your intent for the session, and get to work. Your “focus mate” is not allowed to disturb you during the session. When the session is complete, you review your session with your partner. This UX case study goes beyond accountability systems, and seeks an an independent, more flexible solution.

Here are a few website-specific solutions to avoid distractions and procrastination:

• Blogs and social media platforms: The key contributor of distractions here seems to be the side bar. The side bar is laden with links to related posts, bio of the blog author, related people to follow, and so on. A simple browser extension could disable the sidebar by default, allowing users to use these websites in a more focussed manner.
• YouTube: There is plenty of work about reducing distractions in YouTube. A recurring idea is to remove recommendations from YouTube, be it from the home screen or side bar. This would force the user to use YouTube in an intentional manner. This Chrome plugin does exactly this.

Rough flow diagram

The below rough flow diagram seeks to illustrate some of the key ideas in the previous section.

Initial validation

To validate the concept of the intervention, I did walkthroughs with four users. All users were knowledge workers who used websites that are potentially distracting to accomplish their work. The ideas were shown to the participants, and participants were asked to answer questions about their reservations before adoption, feasibility, whether they would use the tool as intended, and so on.

Here are the key findings from the validation:

• Overall, participants liked the simplicity of the intervention. Three participants mentioned that they can see themselves use something like this. One participant mentioned that they already use a browser extension (Momentum) as a task manager, so switching to this intervention would not be too steep a learning curve.
• While participants felt that the tree visualization is certainly beneficial, they mentioned it should be integrated with the browser history and grouped according to their work sessions.
• Two participants were skeptical if the tree visualization would work for complex tasks, where finding the right webpage or trail would require more contextual cues.
• All participants liked the binning feature, and mentioned that this is so simple yet so useful.
• There were individual differences about the design of the intervention regarding, e.g., position and style of the task panel and when it is triggered to be shown.

Participants also came up with a couple of ideas to improve the design of the intervention further:

• When binned, an entry could be added directly to the user’s main task manager, e.g., Things, Todoist, or OmniFocus. Many task managers support such quick captures with simple scripting.
• To help the user find a previously important webpage, participants mentioned that they should be able to go back to the position in the webpage that triggered a new branch. This can be integrated into the tree visualization.

Next steps

With this work, I have developed a potential solution for tackling distractions. The next step would indeed be to prototype this in more detail, and develop a minimum viable product. I intend to do that in the next weeks.