top of page

BreakTime:
Designing a mobile application to decrease social media usage.

top image.png

BreakTime is a mobile application aiming to decrease social media usage among the younger generation.

It allows users to track their screen time on social media and creates a motivating community that encourages each user to shift their focus to their real lives from social media.

 

Project Overview

Challenge

As there are many reported instances of social media harming users’ mental and physical health, people still find it difficult to decrease their social media usage.

I wanted to understand the risks of continued social media addiction in younger audiences, what the users’ pain points are, and how our proposed application can aid users in reducing their social media screen time.

Goals

  • Offer insightful visualizations to help users track their social media usage and make informed decisions.

  • Help users set personal goals and boundaries on social media usage.

  • Create a motivating community on the platform that encourages users to shift their focus to their real lives from social media.

Project Scope

Service Innovation

Role

Lead UX designer

Tools

Figma, UX Research

Duration

3 weeks

Design Process

Research-> Ideate -> Design -> Testing -> Refine

Research

I used secondary research, interviews, and surveys to learn about social media addiction and users' experience in controlling social media usage.

My goal was to gain a deeper understanding of the risks of social media addiction and users' experience in controlling their social usage, so that we could identify how the app could create the most value for the stakeholders.  Throughout my research, I wanted to learn more about our target audience, the cause behind social media addiction, and the pain points users experience when controlling their social media screen time, then apply these concepts to the app design.

What risks does excessive social media usage have on its users?

In order to gain a better understanding of the effects social media has on its users, secondary research was conducted by collating information from sources such as research articles, news articles, blog posts, and statistical reports.

Here are the major findings in the process:

 Younger generation are the main users of social media

88% of social media platform users from popular sites, like YouTube, Facebook, TikTok, and Instagram, fall between the ages of 18-29 years old

Social media addiction is common among younger generation

70% of teenagers and young adults in the United States have a social media addiction

Fear of missing out is a common reason with excessive social media usage

Study finds the combination of FOMO, depression, and lowered self-esteem are related to the use of social media usage and trouble controlling social media addiction

Excessive social media usage might lead to mental and physical problems

Research has found that social media usage is associated with increasing depression levels, as excess screen time causes symptoms of nausea, headaches, and eye strain.

What is young generation's experience with managing social media usage?

To understand the perspectives of the audience we were observing, young adults, I surveyed 50 and interviewed ten    18-21-year-old students of Carnegie Mellon University using semistructured interviews and contextual inquiries. I want to learn about the motivation, behaviors, and pain points of our stakeholders.

We identified three pain points for the users when trying to manage social media usage:

People admitted to being aware and having experienced some negative effect on their mental health due to social media.  

People find it difficult not to engage in social media platforms when active users are around them.

People find existing tracking features and apps to manage social media usage unhelpful and unmotivating. 

Target User Persona

Based on the results of our research, we created a persona profile for the target audience of our app design, which is a college student struggling with controlling social media usage. By creating the persona profiles, we can better understand our stakeholders' motivations and pain points.

BreakTime Persona.png

Define & Ideate

I want to identify the opportunities we have in designing a social media monitoring app.

We ideated potential opportunities using the needs and pain points we had identified through our research. We evaluated our ideas based on their value to users and on the capabilities of a mobile application to address the need. We chose 6 opportunity areas to test with users before narrowing on our opportunity.

​We established three goals for our mobile application— awareness, self-motivation, and community— which informed our design process.

SELF-MOTIVATION

help users set personal achievable goals and boundaries on social media usage.

AWARENESS

provide effective data for users to track their social media screen time

COMMUNITY

create a motivating community that encourages users to motivate each other

After establishing the principles, we each sketched out interfaces we envisioned for the application based on the three goals. We identified the commonalities of our designs and defined following key features:

  • Personalized, achievable goals: Users can set personalized goals for social media usage to encourage them to reduce their use voluntarily.

  • Visualized tracking data: Users can track their data easily with infographics that are easy to read and grouped 

  • Community and group sessions: Users can create group sessions with friends and keep track of each other’s social media usage when achieving a common goal.

  • Progress over time: Users can see the progress they've made over time feeling a sense of accomplishment.

Design Process

I designed lo-fi prototypes and the architecture based on the principles we established.

Oriented around the three goals and the key features we identified in the sketching session, I designed six screens of lo-fi prototypes to create the main user flow of the app. Each screen has a main purpose that it serves in the user flow and details in the design that support its purpose as well as our research insights.

Designing Lo-fi Prototypes
Dashboards

Users can add different goals and track social media data on the dashboards.

mid-Dashboard-1.png

OVERALL DASHBOARD

  • Circular data visualization to easily compare different social media screen time.

  • Goals section for users to set personalized goals and track individual apps.

  • Users can make either an individual or group session.

INDIVIDUAL DASHBOARD

  • Identified daily screen time as the focal point 

  • Different progress indicators for users to measure their progress

mid- Cover.png
Login and Social Media Set up

Users can link to different social media and set personalized goals when linking them.

mid-Social Media Setup.png

SOCIAL MEDIA SET UP

  • Provide available social media platforms in drop-down list

  • Give users an option to customize the maximum screen time realistically

  • Set privacy options for screen time

Login Screen

  • Necessary for app functionality and personalization of dashboards

  • Followed commonly used design elements to increase usability

Friends & Privacy Control

The friends function focuses on building a community that positively encourages each other to work toward a common goal while the privacy control screen addresses the risks of data privacy from users’ data usage and digital footprint

mid-Friends List.png

FRIENDS FUNCTION

  • Inspired by commonly used social media platforms to create friends list

  • Users can create group sessions and group goals with added friends on the app to track each other.

Privacy & Data

  • Distinguished the different options in settings by compartmentalizing categories

mid-Privacy Settings.png

Testing

In order to observe if our design aligns with our goals, I conducted usability testing and data synthesis to improve our design.   

User Testing

After i completed my prototypes, I wanted to know if users' pain points were resolved and identify any usability issues of our design,  so I started to plan out how a usability testing would be conducted.

Test Objectives

Before conducting user testing on our Lo-fi prototype, we set up three goals we want to achieve through the testing. The test goals include the following:

  • Identify any critical errors or incomplete task flows within the app

  • Evaluate if the user comes across challenges with navigation or design

  • Understand successful task flows and identify helpful UI features

Testing Method

In order to achieve these goals, we found 5 participants to participate in our usability test, which requires them to complete four tasks including the following:

  • Add a new TikTok screen time goal of 3 hours/day and 30 hours/week and set it to private.

  • View how many times TikTok was opened today.

  • Link TikTok account to add a new personal goal.

  • Adjust privacy settings to make information private to friends.

Data Analysis & Synthesis

From our user testing, all of the participants were able to successfully complete all of the tasks, and they provided us feedback for each screen that helped us move forward to the hi-fi prototype. We grouped the feedbacks into four categories: UX/Usability, Accessibility, Feature Requests, and Enablement & Support

Affinity Diagram.jpg

From the diagram, we had two key findings:

  • People liked the idea of adding friends and working toward a common goal of limiting social media usage

  • People need more information on the dashboard to understand their social media usage and tracking

  • People want clearer differentiation between goals and tracking for group sessions and individual sessions 

Refining Prototype

From the feedback and insights we gained from usability testing, I refined our prototype and user flow while establishing our style guide to build our high-fidelity prototype.

Style Guide

I selected a “calming” color scheme and designed our logo to fit the theme of relaxing during a break.

UI Design Kit.png
High-fidelity Protoype
hifi-5.png
hifi-1.png
hifi-2.png
hifi-3.png
hifi-7.png
hifi-6.png
hifi-8.png
User flow & Prototype Demo

I mapped out the wireframe flow and demonstrated the prototype demo in the following video.

User flow.png
banner.jpg
View Other Projects
website mockups.png

Responsive Website

Re-Branding

Search Result Page.jpg
Home page.jpg

Learning Media Design

UX Research

ig post.png
TSA logo(front) final.png

Communication Design

Branding

bottom of page