The Journey of .Disconnect : Apps to Control Screen Time

7 min readFeb 15, 2023

An UI/UX Study to Solve the Mental Health Problems.

Background

Nowadays, there is almost no one live without smartphone. Even Elon Musk on Joe Rogan’s podcast stated “We are now a cyborg, smartphone is an extension of our organs”. People spend huge amount of time to stare on the screen. They do it for a lot of activity like opening an email, communicating with their colleague, or just simply to spend their time scrolling through social media for an entertainment.

Is that good?

Maybe it is fine if it’s only one hour or two, but most people spend more than 5 hours a day. This is not a healthy habbit, especially for the mental health condition. There are several article and research conducted to dig down the effect of too much social media and or basically smatphone usage are lead to mental exhaution and some other related problems.

The Impact of Social Media on Teen’s Mental Health. (healthcare.utah.edu, 2022)

Social Media and Public Health

(publichealth.cs.columbia.edu, 2022)

Why tho?

The phenomena of smartphone addiction could be occur by the instant gratification that users get while scrolling through social media or playing games on it. Even 60% of people around 18–34 years old are sleep with their phones besides their pillow.

.Disconnect are designed to overcome and alleviate those problem with several features that would be detailed later on.

Project Timeline

Stage 1 : Empathy

On the first stage we would do several approach to know the user. Knowing the user is the basic and fundamental things on creating an apps, after all an apps are meant to be used by the user. We had to know the user to be effectively solve their problem. How do we do it? We do basic research based on related article and paper first to get a helicopter view of potential user. Then, the next step is conducting user to an in-depth interview to learn more of their characteristics, pain points, and what do they want. The result of this research would be compiled and summarized for the next stage.

Based on the interview, we combine the user’s similar characteristics then create a user persona to represent it. User persona would be referred as actual user for the rest of the project.

(masukkin user persona atunya)

Stage 2 : Define

After we completed the first stage, let’s continou the journey to the second stage. On this stage, mainly we would point out what’s the real problem of the user and stated it clearly so we could find the best solution later.

The result of this stage would be presented as AFFINITY MAP, How Might We, and POV.

Affinity Map

Besides user persona, affinity map also compiled from the interview as a support for better understanding of the user pain and needs. Here’s what we got.

How Might We (HMW)

After we had user persona and affinity map, we need to create a problem statement that define what is the actual things to be concerned of. Based on the user condition here’s the HMW.

How might we limit the unnecessary/too much phone usage so that the user knows when to stop unhealthy behaviour?
How might we recommend the user to seek for professional so that they could maintain their mental healthy?
How might we track past screen time usage so that the user could monitor their regular usage precisely?

POV

Pov is a complete user’s view or perspective on the problem, with pov we could understand user’s vision. From the user’s perspective he’s a college student whose aware of the bad impact of too much screen time and needs an app to limit his usage and seek for professional help when needed.

Stage 3 : Ideate

On this stage, let’s start to ideate what can we do to solve the user problem! from the stage 2 we already know that user have 3 major problem such as unhealthy behavior, wanted to seek for proffesional when needed, and the user wants to track his past screen time usage. Based on those problem we might ideate the MVP.

MVP

Adds a feature to let user determines the usage limit
Adds a feature to let user check his mental state and seek for help when needed
Adds a feature to let user track his past screen time usage

Crazy 8

After we know what do we need to create, it’s time to brainstorming. Here’s the method that we use, namely crazy 8. For the notes, not everything we get from crazy 8 are being used to made a further development. The image shown below are the example of the process.

After brainstorming, we decided to create several features such as :

Summary : a feature which let user to track or monitor his past usage
Mental assesment : a feature which let user to check his mental health condition
Consult : a feature which provide user a proffesional psychologist to consult

Flowchart

Flowchart is a diagram which shows the user journey and process from a page to another.

Here’s the detailed flowchart

Sitemap

Sitemap is similar to information architect. Sitemap let us know the content structure of an app.

Stage 4 : Prototype

On this stage we would like to present lot’s of graphic! Prototyping is a process of translating idea into an user interface. It started as lofi b/w and ended as clickable prototype with animated transition etc. Enjoy yourself on this stage!

Lofi

On the first step of creating a prototype we need to create a wireframe first. The goal is to create and ideate it on low-fidelity, not so pixel perfect so that the designer could change anything quick if there is an improvement on the process. The final product would be different from lofi in term of colour and other elements but the layout would be similar.

Mockup

Mockup is the next step after lofi created. Mockup has more details and look similar to the final product. It has colour and the layout is more precise. It also has more frame which developed from the wireframe.

Prototype Highlight

Summary

2. Mental Assesment

3. Consult

Stage 5 : Test

This is the final stage of the design thinking. After we know what is the problem, who is the user, what do they need and finally made an app (concept), it is time to test it for the user.

Usability Testing

Usability testing is needed to gather feedback from user. From the feedback team would get a lot of insight on what user think. Do the app works propery? is it hard to use? what do they like? what would the team do next and so on.

First step of usability testing is picking user who had same character as the user persona, then execute the test. We use Maze to execute UT then give the user a questionaire for measuring SUS (System Usability Score).

The Results

Maze Usability Score

This score measures the ease of the prototype by calculating key performance indicators such as : mission success and duration, test exits, and misclicks. The score are fully calculated by Maze

Full and detailed report are available on Maze Report

Feedback and Conclusion

“The apps is really confusing to use”

“Please add specific problem option on consult”

“Add more bank on payment option”

“The design is good”

We need further development on the apps to alleviate the problem

Do you want to try the app? Here’s below

Contributors

Nurawati Mina as Product Manager

Finna as Product Manager

Setia Adi Prayoga as UX Researcher and UI Designer

Fauzan Firdaus as UI Designer

Andienta Khairunnisa as UI Designer

Maulana Muhammad Ihza as UI Designer