Focus App

UIUX - Personal Project 2019

Collaborators: Individual
Duration: 1 Week
Skills: UI Design, Wire-framing, User Research, Visual Branding

01 Overview


As students, we overwhelm ourselves with distractions in the study environment. This comes in the form of social connections, environmental sounds, visuals diversions, of which are all distractions that live on our phones. Some of these are quite realistically inevitable while others are very manageable.


If the problem was an overwhelming temptation of distractions living on our phones, I wanted to somehow alleviate that tension for students. My solution was to design a timer app that:

1) Provides a feature that runs the alarm in pre-set intervals.
2) Disables the mobile interface when the timer is running.

04 Secondary Research

To understand if what I attempted to address was truly a problem or not, I began to:

1) Existing research done on digital consumption among college students. Ever since social media took over the internet, there has been controversy regarding its impact on teens and whether it's a step forward for society or a step back.

2) Survey people regarding their phone + study habits. With research already done by professional researchers and educational institutions, I wanted to find my own evidence; I sent out the survey question:

02 Problem Space

In today's educational environment, it has become almost impossible to work effectively without electronic devices. The use of laptops has maximized workflow efficiency for any subject and type of study. However, the advances in networked communication and design have introduced to students non-study-related apps that are incredible― but extremely distracting. These apps come from multibillion dollar companies such as Facebook + Instagram, Snapchat and Twitter.

The solution cannot be to simply remove phones in the workspace because:

-Most students don't see the worth or don't have the willpower to do so.
-Whether or not the phone is present or not is out of my control as the designer.


While the presence of phones in any given individual's study space cannot be regulated, the limitations of what they can do with the device can be.

03 Archetypes

I developed personas to categorize three main users; this app attempts to address as many user types as possible. The purpose of this was to understand the unique problems present and how to create an all-encompassing solution that universally impacts.

05 Envisioned Functionalities / Solution

For this app, I wanted to implement three main functions:

Singular Timer

For short term study sessions, the singular timer implements a one-time alarm that counts down until it hits 00:00, notifying the user that their study session is momentarily finished. This function mimics existing timer apps and exists for convenient use.

Interval Timer

For long-term studying, the interval timer implements a function that allows students to preset a series of timers and breaks before studying. Doing so sets a rigid study regime and negates any chances of distractions that might emerge in the manual in-between process of setting follow-up timers.

Phone Lockdown

While the timer is running, the user cannot access his/her phone besides the lock screen. The only way to unlock your phone would be to disable the timer, but doing so would defeat the purpose of using the app in the first place.

06 Visual Identity

Rather than use Apple's iOS Human Interface and Google's Material Design, I wanted to brand the app to appear and feel different. This led to changes a few intentional design decisions.

07 Wireframing and Prototyping

Upon finishing research, I began sketching with pen and paper, eventually developing a more refined and accurate digital wireframe. One thing I kept in mind was the importance of minimalism and simplicity. I wanted to make sure that the user would have no confusion figuring out what's meant to be informative/visual and what's meant to be interactive.

08 High Fidelity Design

After collecting research data, experimenting with wireframing, and defining a visual identity, I developed the final design shown below.

09 Reflection

In conclusion, the entire process of designing this concept app allowed me to exercise a multitude of design practice skills. From data collection to wireframe building, visual graphics, and product presentation, individually embarking on designing an app as simple as "Focus" has taught me the unseen complexity of product design. If I had more time on this project, I would attempt to fully prototype the app and implement transitional animations, enhancing the user's spatial experience and intuition regarding navigational flow.