Snapout

A Case Study in Digital Product Design

A new approach to digital dependence.

My Role:

Product Designer

My Responsibilities:

UX Researcher

Scholarly article review, interview conducting, problem definition.

UX Designer

Research synthesis, brainstorming,
user stories and flows, wireframing.

UI Designer and Prototyper

UI patterns, interface design,
prototype development.

User Researcher

Usability testing, problem analysis and
prognosis.

Design Brief:

The spike in availability and consumption of digital media over the past 15 years has resulted in a vast marketplace of products that are designed to capture the attention of users, often at the expense of everything else around them. While these products no doubt provide great value to their users, the long term effects of exposure to this constant stream of content has been shown to be potentially harmful. Inspired by work by groups like the Center for Humane Technology, I decided to dig into the root of this problem and find a solution that would truly help heavy device users reclaim their attention span.

Solution


Snapout

Data Visualization

Users can explore and understand the extent of their digital media use and decide which apps they’d like to place limits on.

Limitations Setting

Users can set limits on their time allowance, notification stream, and even their access to applications.

Content Stream Interruption

Users hypnotized by constant content streams will be broken out of their trance by interactive notifications that promote engagement with the world outside their device.

The result of these features used in conjunction is an optimal user journey for any digital media consumption.

Design Research

Before diving into potential solutions to the problem of digital media “addiction” or overuse, I needed to understand the issue more thoroughly. To do this, I poured through every journalistic and scholarly article on the topic I could find. This study revealed some market leaders that I took a closer look at with an eye toward effectiveness and usability heuristics. All of this allowed me to design a survey, diary study, and interview script to uncover key insights about digital media overconsumption from primary sources.

Lit Review

An investigation the state of the problem through journalistic and scholarly article review.

Competitive Product Analysis

A review of products already on the market attempting to mitigate the negative effects of digital media overconsumption.

Survey, Interviews, Diary Study

A deep dive into the experiences of real people as they interact with their devices and digital media.

Digital media consumption is correlated with negative mental health effects.

Distraction serves a crucial role in human life and doesn’t need to be eliminated or a source of guilt.

The relationship between technology and health is complicated and a nuanced approach is required to improve it.

I distributed a survey via social media with questions targeting people’s digital media consumption habits and their comfort level with them. Responses were very diverse and revealed age and gender trends present in the way the population uses their devices.

A note: Due to the academic nature of this project, my access to a maximally diverse data set was somewhat limited. While I attempted to gain insight about the experiences of people from all genders, races, and backgrounds, most of my data comes from white, heterosexual, and middle class people. As a result, I intent to test the final product with this in mind if the project moves forward.

Using a screener survey, I selected 5 participants for a diary study. These subjects filled out a special form when they used their mobile devices at different times of the day. They recorded the type of media they consumed, as well as their emotional state before, during, and after the session.

I interviewed 5 people regarding their personal experiences with digital media and their relationships to it. These subjects had a wide variety of backgrounds and habits around social media, gaming, and communication software that yielded nuanced results.

Google Digital Wellness

-Difficult to access and too easy to bypass.
-No functionality on desktop.

Freedom

-Heavy-handed blocking can prevent productive use of restricted apps and sites.

Space

-Requires user to act on results of usage analysis.

Synthesis

I used a variety of methods to pull insights from these research methods. Most prominent among these was an affinity map that was the result of my grouping all the various data points, quotes, and findings from my research methods into categories based on commonality. This allowed me to identify trends and extract the most important information from my research.

Affinity Map

Key Findings

-The balance between digital media overconsumption and useful distraction is complicated and nuanced.

-Lower productivity, higher rates of depression and suicidal ideation, and a greater difficulty building physical-world relationships and trust are linked to overconsumption of digital media.

-Currently existing products leave opportunities for more robust solutions.

-Moderate and heavy digital media consumers report often feeling compelled to check their devices and hypnotized by content to the point that sessions last much longer than they intend to.

Personas

From these findings, I constructed three personas to represent the primary user groups. I broke the population down into categorized based on their media consumption habits. These personas were used to inform design directions as the project moved forward.

How Might We…

Finally, I condensed all this research down into a series of “How Might We…” questions to provide a jumping off point for my brainstorming and ideation work.

-How might we encourage users of social media to engage in their networks for the positive reasons of connection, inspiration, and relaxation?

-How might we help users develop strategies to alter their consumption habits to reduce negative stimulus?

How might we help users engage their devices with conscious intention rather than impluse?

How might we help users feel less compelled to reach for digital media when they have any void in attention?

How might we enable users to recognize when digital media engagement isn’t serving them?

UX & UI Design

Brainstorming, MVP, and User Stories

Guided by my research findings, I started brainstorming features and solutions that would help people engage with their digital media more intentionally. From these, I carefully selected a number of them to include in the MVP based on how well they serve the goals laid out in the How Might We statements. These features were then captured in User Stories.

Defining the MVP

The structure the product began to take shape, here. In order to deliver robust solution to help people kick their digital dependence, I needed to incorporate:

-An easy to process visualization of a user’s media consumption habits and trends.

-A means for a user to establish limits on how they are exposed to digital media through app use and notifications.

-A mechanism to break the “trance” users can experience when consuming content that accounts for so much lost time and can encourage their compulsion.

User Stories

I sketched out some screens for these features and built a low-fidelity prototype with them, testing them with potential users get early feedback:

User Flows

I created user flows to map out the primary routes users would need to take to access these various features, as well as indicate what tangential features and screens would need to exist in order for them to make sense.

Wire Flows

Wireframes and wire flows were built to establish the basic design and layout of the app.

Mood Board

With the flow of the app established, I started exploring aesthetic elements that could inspire the visual interface. I assembled ideas I found into a mood board to refer back to. 

Initial Concepts

A number of visual design iterations were developed before settling on a Material Design-inspired theme. This design allowed maximum understandability and discoverability of navigation.

-Click an image to see how I identified the strong and week elements of each concept:





































































































































Usability Testing

I wrote a test plan and script to assess the discoverability, understandability, of the prototype. The script asked test subjects to complete 5 tasks built from the red route user flows established earlier in the design process. Onboarding, viewing data use information, and application limit setting features were all assessed. I used the script to test the prototype against 5 participants and created a prioritized list of common problems with comprehension and other issues.

-Hover over an image to see the notes I took:





































































































































From the results of the first round of testing, I redesigned the interface to achieve a cleaner look and a more navigable interface. I then retested this new designed with 5 new participants.

-Hover over an image to see how the design changed.





































































































































The redesigned interface proved much easier to navigate and subjects were able to identify the correct path to find information on how much they (hypothetically) use certain apps, how they would change settings limiting how much they would use them. Still, I received more feedback and refined the design further.

Final Product

The redesigned interface proved much easier to navigate and subjects were able to identify the correct path to find information on how much they use certain apps, how they would change settings limiting how much they would use them. Still, I received more feedback and refined the design further.

I used Protopie to prototype animations and scroll behavior for the app.

It also employs a limited “Emergency Stop” feature that will override limitation rules for a set period of time, twice per day. This grants the user more control and minimizes frustration while making sure they stay on track towards reducing their consumption.

SnapOut monitors user’s activity on their device and interrupts their content consumption with a “Snapout” as it progresses toward their daily limit, helping to break them out of their “trance” and better regulate their time spent.

 All Screens

Find the interactive InVision prototype,

Learnings

While I’ve had experience with the design process before in my academic and professional careers, this project is one of the most in-depth I’ve ever participated in, especially with regard to user research. Through this agile-based experience, I’ve learned a ton about how to quickly prototype a solution, quickly gather feedback on it, and pivot the design as necessary. In this way, it’s one of the most efficient design processes I’ve ever used.

I also had the opportunity to really dig into UX heuristics and design patterns. There’s so much to explore on this topic and doing so has left me teaming with ideas for re-imagining old products and inventing new ones.

Finally, I executed this project largely on my own. I’m proud of this, but it makes me appreciate the value of design teams. Other creators on a project that hold you accountable and bounce ideas around with you are a valuable resource that I’m excited to contribute and tap into.

Get In Touch

Let’s Work Together!

Email

brattonra@gmail.com

Homebase

Charlotte, NC

Phone

(704) 661-5565

Email

brattonra@gmail.com

Phone

(704) 661-5565

Homebase

Charlotte, NC

6 + 4 =