Available for work offers

Home

Mobile Application7 min read

Off’Screen Application

Case study

ContributionProduct DesignerResearchUI-UX Designer

Timeline2021

Introduction

About Project

Off'Screen is an innovative application designed to help users manage their screen time effectively. By setting usage limits on various smartphone applications, users can not only control their digital habits but also receive tangible rewards.

Challenge

A significant challenge facing the project is determining effective ways to motivate users to reduce their screen time. Users addicted to social media are often deeply ingrained in their habits, making behavioral change difficult.

QuestionQuestion

How to motivate users to lock their phones and be in the real world?

Solution

MotivationMotivate the user to leave the application through discounts, promotions and bonuses upon achieving goals.

Goals and limitsThe user has the ability to set the desired goal or limit.

PersonalisationThe ability to take a survey on interests to understand what bonuses to offer the user.

Research

Approach

The research phase was crucial in understanding user behaviors, validating hypotheses, and shaping the development of the Off'Screen app.

The hypothesis

Validated assumptions about user behavior, revealing critical insights such as the predominant use of apps out of habit.

HypothesisHypothesis

People use the
phone very often out of habit

82%

Of respondents confirmed their addiction

HypothesisHypothesis

Users don't want to break the habit on their own

62%

Have already tried to get rid of addiction

HypothesisHypothesis

Discounts offered will not cause a business loss

20%

Discount will not bring a loss to business

Personas

From the target audience, 2 key types of personas were identified:

those who do not know how to control their time, but want to learn;
those who believe that they can control their time, but like various bonuses.

All research artifacts including briefs, decisions, plans, findings, and workshops have been documented to serve as a reference for the team in future collaborations.

Concept Creation

MVP & prioritization

To define the list of features, I used the MoSCoW prioritisation method. At first, the team and I determined the list of features, then we began to discuss together and distribute the features into 4 main categories: Must have, Should have, could have and won’t have.

User scenarios & Informational architecture

Before we started to create user scenarios we brainstorm thoughts organically without worrying about order and structure. It allows us to visually structure our ideas to help with analysis. Based on the mental map and the resulting scenarios, our team began to develop an Information Architecture as a way organizing and structuring content of the application. Which were generated into sitemap.

Prototyping

Wireframes

The prototyping process started with low fidelity so that we could test our application with users with effortless and timeless in the early stages.

Userflow

In order not to miss any details and actions and understand that all the goals and objectives of both the user and the business were covered.

Key User Flows

Reviewing Usage Statistics

User Registration and Onboarding

Setting Screen Time Limits

Receiving Notifications

Earning Rewards & Using Bonuses

Concept Validation

Approach

To test the concept of the application, I started by preparing hypotheses, test methods, scenarios, and tasks for the respondents.
Out team found users of our target groups and prepared prototypes with key scenarios to check.

Testing

Two interview sessions were conducted with 7 respondents. As a result of the first testing, two types of critical and non-critical barriers were identified.
Conducted the second testing session, which was successful and the respondents did an excellent job with the tasks.

90%

Users successfully completed the tasks after making edits from 1 session

Visual Design

Process

The design process began with creating a moodboard based on design principles and user feedback, which described the app as "colorful," "light," and "modern." From this, we selected a calming blue as the primary color, complemented by vibrant yellow, red, and purple to enhance visual interest and highlight interactive elements.

Moodboard

UI Kit

To streamline design and development, we established a unified UI library using atomic design methodologies. This approach allowed for the efficient creation and updating of screens, promoting consistency across the app and speeding up the development process.