UX & Visual Interface Design

University of Washington

My role

Research
UX UI Design
Branding
Prototyping
Usability Testing

Team

Instructors – Jennifer June, Amanda Voss and David Kendall

Dariya Detkovskaya, Forrest Sawyer, Michelle Zhang

Timeline

January – June 2024

(6 months)

While completing the UX & Visual Interface Design certificate program at the University of Washington, I developed expertise in a user-centered, four-stage iterative design process. This included defining user needs, brainstorming solutions, building testable prototypes, and bringing the selected solution to life. I also delved into content strategy, research techniques, and usability testing, while gaining a deeper understanding of how information architecture and visual elements impact design for mobile platforms.

Do you find yourself falling into the social media rabbit hole?

We live in an age of digital distraction, where technology meant to boost productivity and communication often hinders us from completing tasks. At work, constant notifications overwhelm us, and at home, we get lost in entertainment and social media. This constant engagement can harm our well-being, pulling us away from being present with ourselves and loved ones.

How might we help improve people’s lives by consciously using technology that supports their lives and avoids the pitfalls of technology overload?

Project timeline

Total duration – 6 months

Double diamond with project timeline

During the first eight weeks, my primary goal was to deeply understand the problem space and our users. Our team began with thorough research, conducting interviews, followed by desk research and a competitive analysis. From there, we developed user archetypes and journey maps to guide us in brainstorming solutions tailored to user needs. By the end of the sprint, we had generated four distinct concepts, which we tested with end users during concept testing. This process sparked new ideas and provided valuable insights, ultimately reshaping our understanding of the problem.

13 hours

spent interviewing users about technological distractions

16 participants

interviewed to help us understand their goals and needs related to technological distractions

ALL

admitted to engaging in some form of doomscrolling

The primary issues that we discovered during the interviews:

  • Users are feeling overwhelmed with the amount of content on social media
  • They recognize lack of self discipline
  • They are feeling guilty for wasting time on meaningless media.
Primary issues picture

Competitive Analysis

As a team we worked on a competitive analysis of tools aimed at managing digital distractions. Key competitors include:

  • Screen Time: Tracks device usage and sets app limits on Apple devices.
  • Freedom: Blocks distracting apps and websites across devices.
  • Structured: Combines task management, habit tracking, and timers.
  • Focus: A Mac app that blocks distractions with customizable timers and schedules.

Secondary competitors like Forest, Daywise, and RescueTime focus on improving digital well-being, managing notifications, and tracking usage. The overall goal of these tools is to help users regain focus, reduce distractions, and build healthier technology habits.

I was particularly interested in exploring tertiary competitors like the Center for Humane Technology, a nonprofit dedicated to aligning technology with humanity’s best interests. Their mission is to address the harmful effects of technology on mental health, democracy, and societal well-being. The Center for Humane Technology’s collaboration with policymakers plays a crucial role in addressing the issue of technological distraction. By working with lawmakers, they advocate for regulations and policies that encourage ethical design standards and limit the exploitative practices of tech companies, such as algorithms designed to keep users endlessly engaged.

Behavioral Archetypes

To identify the most fitting behavioral archetypes, our team brainstormed and analyzed the behavior patterns we observed throughout our research.

Brainstorming behavioral archetypes

We then developed two behavioral archetypes that represent the two audience segments identified during our segmentation activity. Using our interview synthesis notes, we incorporated each segment’s goals, needs, pain points, thoughts, feelings, and actions into their respective archetypes.

Social Connector archetype
Journey Maps
Wellness and Fulfillment seeker archetype

Executive summary

The situation – shared desire to find a balance with technology

Both Social Connectors and Wellness & Fulfillment Seekers want to find a better balance with technology by consciously acknowledging and managing technology related distractions to enhance interpersonal connection and personal well-being.

  • The Connector wishes to use technology as a tool to facilitate human connections and enhance their relationships with friends and family.
  • The Seeker wants to develop better habits and self-discipline to ensure their life is not taken over by technological distractions, and instead use technology to enhance, and broaden their life experience. They want to focus on productivity and self improvement.

Both Seekers and Connectors want to develop more self-discipline in their use of technology. Their shared goal is to harness the benefits of technology while minimizing its potential drawbacks, fostering a healthier and more intentional relationship with the digital world.

The tension: guilt, FOMO

Wellness & Fulfillment Seekers and Social Connectors are frustrated. They feel they are in a toxic relationship with technology because they can’t live without it due to societal reliance, yet they suffer negative physical & mental consequences due to distractions that come with tech.
Seekers and Connectors both struggle with the constant distractions presented by modern technology. Both feel they need help to balance using technology for necessities and being entirely distracted by it.

  • Fear of missing out (FOMO)
  • Feeling guilty for wasting time on meaningless media
  • Overwhelmed by the sheer amount of information

As a result, both Seekers and Connectors experience a diminished sense of personal fulfillment and struggle to establish meaningful connections with others.

The Opportunity: Set Boundaries and Build Better Habits

To help Seekers and Connectors build a healthy relationship with technology by helping them set boundaries, develop better habits, and create more conscious and interpersonal experiences. This is aimed at improving physical and mental well-being while avoiding unintentional distraction and wasted time.

  • Highlighting screen time for awareness
  • Restricting options for distraction
  • Disrupt unconscious habits
  • Diminish doom scrolling

Through similar algorithms currently used to personalize content delivery on social media platforms and ads, we can create tailored technological experiences based on individual preferences and behaviors. These algorithms can aim to adjust to each user’s relationship with technology to help them establish boundaries, especially around doom scrolling, notification fatigue and social media usage.
This approach emphasizes the importance of promoting a harmonious relationship with technology, where individuals can actively shape their digital interactions to align with their well-being and unique requirements.

Ideation – How Might We

Our team utilized FigJam for brainstorming and idea generation. We began by completing two ‘How Might We’ matrices, one for each archetype. Afterward, we clustered the ideas and voted on those that would provide the most value to our users.

How Might We matrix for Social Connector archetype. The top-voted ideas were tech-free zones, removing infinite scrolling, and automatically unsubscribing from spam emails to reduce notifications.
How Might We matrix for Wellness and Fulfillment Seeker archetype. The top-voted ideas were tracking eye movement, offering access to an exclusive community upon reaching certain productivity levels, and sending notifications in batches.

To enhance the ideas, all of our teammates worked separately on their clusters with the help of value cards shown below.

I selected the “Decision Making” value card to highlight opportunity costs for the user. This involves identifying and understanding all opportunities and their associated costs—such as time, outcomes, and value—within the experience, to simplify the decision-making process.

After the entire team completed the research, it was time for each member to choose their concept and begin developing it independently.
During our interviews, all users acknowledged spending too much time doomscrolling and feeling hopeless, expressing a need for support and boundaries from an app. This feedback inspired me to develop my concept, Calmlens.

Value Proposition

For social media users who are looking to reduce time spent doomscrolling, our Calmlens app replaces infinite scrolling with pagination and gradually mutes colors in the social media feed after a set amount of content is viewed so that doomscrolling becomes less visually appealing, helping users become more aware of how much time they’ve spent on social media.

Scenario

Working professional juggling a demanding job and family responsibilities, feeling overwhelmed by the constant flood of information on social media, leading to mindless scrolling during their limited downtime. Intrigued by the promise of a more mindful experience, they decide to integrate Calmlens into their digital routine.

Concept

Calmlens is the solution for social media users seeking mindful interaction. By promoting intentional usage and providing insights on time spent, Calmlens empowers users to break free from doom scrolling, fostering a more balanced and mindful digital lifestyle.

Key Highlights

  • infinite scrolling replaced with pages to introduce natural pauses
  • gradually muted colors after set content threshold
  • notifications displaying time investment and suggesting more productive alternatives.

Lo-Fi Wireframe Sketches

Using insights from our research, I sketched possible solutions to address our How Might We statement.

I developed the first set of wireframes and explored alternative activities to replace unproductive time spent on social media.
I explored various pagination methods as alternatives to infinite scrolling on social media, while also researching strategies to encourage users to build healthier social media habits.

User flows

After brainstorming features and prioritizing them, I expanded on the ideas by creating task flows to illustrate how users might interact with them.

Diagram of first user story
As a user who frequently finds themselves lost in social media, I would like to have an app like Calmlens that monitors my social media usage and provides timely interventions, so that I can manage my time more effectively, enhance my focus on important tasks, and improve my overall digital well-being.
As a user dedicated to improving digital habits, I would like Calmlens to feature an insights dashboard that displays my social media usage trends and achievements, so that I can have a clear overview of my progress towards a more mindful use of technology and recognize the impact of my efforts.
As a working professional overwhelmed by endless social media feeds, I would like Calmlens to replace infinite scrolling with a page-based system, so that I am prompted to engage with content more intentionally, making my limited downtime more fulfilling and less overwhelming.

Concept testing

We gathered user feedback by presenting each concept through mock-ups and task flows. During concept testing we evaluated which idea resonated most with users. 

Testing Stimulus

Below is the testing stimulus for my Calmlens concept, which was presented during the concept testing phase.

Scenario

Working professional juggling a demanding job and family responsibilities, feeling overwhelmed by the constant flood of information on social media, leading to mindless scrolling during their limited downtime. Intrigued by the promise of a more mindful experience, they decide to integrate Calmlens into their digital routine.

Concept

Calmlens is the solution for social media users seeking mindful interaction. By promoting intentional usage and providing insights on time spent, Calmlens empowers users to break free from doom scrolling, fostering a more balanced and mindful digital lifestyle.

Key Highlights

  • infinite scrolling replaced with pages to introduce natural pauses
  • gradually muted colors after set content threshold
  • notifications displaying time investment and suggesting more productive alternatives.

Research Methodology: Concept Testing

Primary Research Approach

We conducted concept testing with six participants to collect qualitative and quantitative feedback on various concepts.

  • We asked questions regarding their feelings towards the concept, including what they liked/disliked about the concept. 
  • If the participant felt that something was missing/could be changed, we asked how they would do it
  • Participants then chose the concept that spoke the most to them

Following the concept test study, each participant completed a survey about the concepts to rank the features from order of most important to least important to them to have in their picked concept.

Key findings

Participants generally consider distractions from technology as a serious problem, rating it high on a scale of 1 to 5

Concepts that had features around personalization to the user garnered positive feedback

Participants express curiosity about the cooperation of social media companies, the integration with social media apps, and the feasibility of implementing proposed features.

Expand the concept by integrating with other services, supporting group activities and creating a more connected personal growth experience.

Participants enjoy tracking their progress, seeing their accomplishments, and acquiring valuable skills, which helps increase their productivity in areas that match their goals and interests.

Key finding specific to Calmlens concept

Calmlens received favorable feedback from participants, who appreciated its gentle notifications, the grayscale feature for minimizing app allure, and the user-friendly aspects such as personalized insights. The concept was perceived as a tool to promote mindful and intentional technology usage, with a focus on productivity and visualizing screen time data.

What user’s loved

Notifications

“I like that it is a full screen notification. I think a lot of times like priority is put to have notifications so that they’re kind of out of the way so you can continue doing what you’re doing. But I like that this is like, nope, I’m gonna stop you right in your tracks. I’m gonna block the content that you’re looking at so that you pay attention to it.”

Data dashboard

“I love data. And being able to see that quantified results of how I’ve been using the app and the time that it’s giving me back.” 

“That is so cool. I would tell people that I reclaimed 45 min today what did you do? This is top notch feature”

Grayscale feature

“That is kind of like, make them lose interest. So I do like that feature”

“There is a research saying, like, if you turn all your apps to gray grayscale color, you kind of just stop paying attention”

Personalization and customization

“I do like the questionnaire thing too, because that kinda like personalize your goals, and then can help you figure out what you really want to do and what you kind of wanted to avoid when it comes to technological distractions”

“I like that (the questionnaire) doesn’t feel overwhelming. I like that it’s one question per slide, almost like a turbo tax kind of situation”

What user’s struggled with

Concerns about user resistance to notifications

“In order to combat (technological distractions), people will rely on their willpower but it is easily depleted.”

“I like the idea of hard stop, gentle notification would not work for me. I would just click “continue”

“Gentle notifications may not suffice for some users, who might prefer a mandatory cutoff feature to forcibly end content browsing after a predetermined time limit”

More substantial reinforcement to motivate behavior change

“it’ll (gentle notifications) be just like a little nice reminder, but it’s not going to be the motivating factor”

“Maybe you guys could do something kind of mandatory that you can’t do anything after the time limit that you set”

Feasibility of the concept

“I would worry that no social media company would want to employ any of these concepts to benefit the user and block adds”

From four of the concepts presented during concept testing, most of the users chose Calmlens as the preferred one.

Why was Calmlens concept chosen the most?

  • It offers a user-friendly and non-intrusive approach to personal productivity and digital well-being. 
  • Users value the app’s subtle reminders to take breaks, like content graying out and time-spent notifications, finding them helpful without feeling bombarded by questions or tasks.
  • Use of emojis to represent goals in the app, finding it to be a visually appealing and enjoyable feature

Future Study Recommendations

For future study, we should explore the feasibility of implementing the preferred Calmlens concept. We should also look into the longevity of how effective the concept would be in deterring the user from doomscrolling long term.

  • How can we effectively persuade social media companies to embrace user-centric concepts, even if it means potentially sacrificing some revenue?
  • Investigate strategies to encourage tech companies to prioritize user well-being over short-term financial gains, fostering a more sustainable and ethical digital environment.
  • Explore strategies and incentives that could motivate social media companies to transition towards more user-centric approaches. This could include government policies, industry standards, or public recognition.

Next steps for Calmlens

  • Add procrastination timer (ex. you have 4 more minutes to spend today on social media)
  • Introduce a feature that allows users to establish a designated “hard stop” by setting a predefined duration of social media access

Mid-fi prototyping

The images depict the onboarding and settings screens of the Calmlens app. It guides users through tailoring the app to support mindful social media use.

The images below depict Instagram search screens and time-based notifications.

Usability study

Usability study plan

User Feedback

Users found tasks fairly easy to complete

“What are the tips for alternatives in the onboarding quiz?, what are mindful notifications? I find it confusing”

Users were not sure what was customized after completing the onboarding quiz. They would like to see the customizations to make sure they agree with it

“The buttons are too small and too hard to click” they would prefer to have next/previous buttons at the bottom of the page

They would prefer to have statistics on home page, rather than a separate one, so when entering the app, the first thing they see are statistics and then scroll down to choose social media platform (or not if seeing statistics made them more aware of time spent on social media already).

Hi-fi prototyping

Mood board

I created two mood boards that emphasize mindfulness, nature, and a calming digital experience.


This moodboard conveys a calm, minimalistic aesthetic, combining elements that reflect mindfulness, focus, and productivity. The neutral, earthy tones (#83907E, #C2B89B, #EAE1D1) paired with a bold accent color (#D87C46) evoke a sense of balance and warmth. The imagery highlights moments of relaxation, introspection, and technology use, juxtaposing these elements to suggest a more thoughtful interaction with digital tools.

This moodboard exudes a sense of tranquility and calm, with its soft, pastel color palette and serene imagery. The blues and light neutral tones, accompanied by phrases like “Gentle Breeze,” “Soft Horizon,” and “Dreamy Mist,” create an atmosphere of relaxation and mental clarity. The natural elements, such as the ocean, clouds, and foliage, reinforce this peaceful theme, suggesting a connection to nature and mindfulness. Overall, this board inspires a digital experience designed to help users disconnect from the stress of everyday life and foster healthier, more intentional habits.

I started the mood board design, but halfway through, it didn’t match the calming and relaxing feel users wanted. So, I decided to begin again with the second mood board.

Style guide

Prototype


Click the image above to explore the prototype and experience it firsthand.

Retrospective

Calmlens was born out of the desire to tackle the growing issue of digital distractions and doomscrolling on social media. Through extensive research, including user interviews and competitive analysis, our team identified key pain points: users feeling overwhelmed by social media, a lack of self-discipline, and guilt over wasted time.

During concept testing, participants appreciated the personalized insights and subtle interventions, though some expressed concerns about needing more substantial reinforcement to break habits. This feedback led to the development of features like a procrastination timer and a “hard stop” setting.

This project taught me the importance of creating user-centered solutions that balance usability with behavior change. The positive reception of Calmlens reinforced my commitment to designing technology that aligns with users’ well-being.