UX Case Study: Improving Productivity by Limiting Phone-Based Distractions
Phones and Productivity: A Toxic Relationship
Every day I find myself getting distracted by my phone. No matter what I’m focused on at the moment, if I see my phone light up due to an incoming notification, I immediately look to see what that notification is. It takes less than a second for my attention to be diverted and productivity to wane. And unfortunately, this relationship I have with my phone has an impact on how I spend my time throughout the day. It even causes me to put my phone away while I’m working to ensure those many small distractions don’t add up to a significant amount of unproductive, wasted time.
After some research and a few conversations, I learned I was not the only person who suffers from this problem. According to a 2019 survey, 30% of U.S. adults who have a smartphone believe they would be more productive if they didn’t have their phone with them. Now I don’t think phones are 100% of the problem here; but rather, our relationship with the technology itself and the instant gratification we receive from notifications. So how can we use this technology to our advantage?
Understanding Users and Their Problems
The first step I took in finding the solution to this problem was conducting user interviews to learn how people are distracted by their phones, what challenges they face when it comes to productivity, and what works well to limit distractions. I interviewed five individuals who fit the following criteria:
- Spend between 3–6 hours a day on average on their phones
- Use their phones as a device for communication, to browse websites and social media platforms, and to conveniently accomplish tasks
- Attribute their screen time to texting and social media apps or websites
I asked these individuals a series of open-ended questions to gain insight into people’s phone usage habits and awareness of the impact these habits may have on their productivity. Here are the main takeaways I gathered from these user interviews:
- People are aware their phones serve as a major disruption to their productivity and generally, the activity that comes from those disruptions does not provide them with any value
- People recognize that when a notification comes through on their phone, they are more often than not compelled to pick up their phone and engage with the notification
- Most people do not use any phone-based restrictions to limit their screen time. Instead, when they want to limit any disturbances and increase their productivity, they either put their phone screen down so they cannot see incoming notifications, mute notifications, or place their phone in a location outside of their eyesight altogether
- Smartphones themselves are not the distraction — notifications and accessibility to meaningless activity are the distractions that hinder productivity
The Cycle of Distraction
Through my user interviews, I discovered that lack of productivity due to distraction is more of a cycle rather than a journey with clear start and end points. This cycle also shows there are opportunities to introduce measures that limit distractions and allow users to continue being productive even when they receive and engage with a notification.
Competitor Research
From assembly lines to the Internet, people finding ways to increase productivity is not a new endeavor. I’ve seen many apps that promise to help make users more productive and mindful of their screen time. So, I decided to analyze a few to find common elements and areas where these apps may be lacking. With this competitive teardown, I focused on four apps:
- Freedom: an app and website blocker
- Flora: A to-do list and habit tracking app that rewards users for their productivity by “growing” trees and connecting with friends on the app
- Moment: Cut Screen Time: a screen time tracking app with mindfulness reminders
- Focus To-Do: a time management app that combines the pomodoro technique and task list
By analyzing these apps, I was able to determine the main elements and themes that my own solution should incorporate.
Timer Feature
This allows people to force themselves into productivity by setting a specific time allotment to accomplish a task. I believe these timers are more effective when they either block out any incoming notifications or they produce a visual negative response if the user leaves the page while the timer is on.
Screen Time Tracking
I think incorporating screen time usage tracking is useful for individuals because they’re able to access that data and see how their screen time directly affects their productivity.
Task Management
Being able to efficiently manage tasks and schedules is necessary to be productive. For a lot of people, making lists and crossing items off is one of the most satisfying aspects of productivity. Some individuals get overwhelmed with all the tasks they have on their minds, so organizing them in a list form can help ease that anxiety.
Blocking Distractions
By blocking notifications altogether, users are able to eliminate the opportunity to get distracted by them while they’re trying to be productive.
Productivity Tracking
What makes people motivated? The desire to see results and feel accomplished. Showing people how many hours a day they spend being productive and seeing a calendar that shows the days they’ve spent utilizing the app will help them feel more engaged and encouraged to continue their productivity.
The UX Design Process: Exploring and Materializing a Solution
For my solution, I decided to create an app that incorporates all of the above themes and elements to help reduce the amount of invaluable time individuals spend on their phones while still giving them instant gratification from receiving notifications and increasing productivity.
User Flowchart
To start, I wanted to come up with a natural flow for users to sufficiently be able to organize the tasks they need to do, block incoming notifications, and start a timed session to be productive. A key component of UX design is making flows easily learnable and recognizable. Before jumping into the sketching and wireframing of my app pages, I wanted to make sure there weren’t too many steps for users to be able to go through the entire main process of the app. This flowchart helped determine the main pages of the app and how users should navigate through them.
Sketches and Wireframes
Next up was the sketching and wireframing process. Sketching out various pages for the app allowed me to really think about how I wanted to incorporate the different elements and the ways those elements would function as a whole for the user. Sketching paved the way for wireframing, where I was able to dive into the layout and hierarchy of my app. It was in this stage where I was first able to get feedback on the app design and see what challenges users face while walking through the various pages. I learned the language within my app needed to be very specific for users to understand the functionality of certain elements right away and people prefer the look of icons over plain text. Based on that feedback, I continued developing my app and creating higher fidelity designs until the app was ready for true usability testing.
Usability Testing
Once I had a prototype ready, I conducted three user tests using the following research plan:
From these tests I learned that users understood the overall purpose of the app and how the main elements on the core pages function. I was also happy to observe the users follow the flow I had designed and utilize the icon menu bar at the bottom of each page to navigate through the app.
Constructive feedback from the usability tests:
- Users would like more context on the individual pages to understand how they work together
- Users didn’t immediately recognize the progress tracking icons on the Homescreen and how they related to the productivity sessions and task list
- Users felt it took too many steps to find the Settings page to manage the apps and websites on the blocklist
- Users were distracted by the colors of the elements in the app and felt they were too bright
Final Prototype
Based on these observations and feedback from the usability tests, I made the following adjustments to the design of the app:
- Added instructions to Task Manager and Productivity Session pages
- Removed the progress tracking icons from the Homescreen and replaced them with recognizable icons correlating to the text
- Added the page names to the icon menu bar to help users easier navigate the app
- Directly linked the “Manage Blocklist Settings” button to the Blocklist Settings page, eliminating the multiple clicks to reach the page where users can add or remove apps and websites to their blocklist
- Updated the app’s element colors to be a monochromatic combination, giving the design a harmonious look and utilizing color as subtle accents
- Updated the font to Montserrat to make the text more readable
- Added more details to the prototype design to provide context for how the app would function as a final design
Final Thoughts
My biggest takeaway from this process is how critical user research and feedback is in designing a solution that provides a fruitful user experience. Having a good idea is one thing, but being able to turn that idea into an usable, intuitive product for many people is a meaningful process that requires strategic steps and human-first thinking. Overall, I’m pleased with the final prototype design of my app. I believe that if this app were to be developed, it would be incredibly useful in limiting phone-based distractions and increasing productivity.
