Cover-Final.png

Introduction

I worked on the Focus More project as part of Udacity's UX design nano degree program. The core idea behind the project was to design a productivity application using design thinking principles.

Through user experience research I was able to understand the user needs, after which I worked on generating a broad set of ideas to solve this productivity issue. A high-fidelity prototype was designed based on the ideas that came out of the ideation session and it was later tested for usability, the results of which are explained later below.

Problem Statement

Many of us are connected online for work or educational purposes; it is easy to get sidetracked from work due to distracting applications like Facebook, Twitter, and messenger to name a few.

Research shows that the brain requires 23 minutes to refocus each time it gets distracted. Giving in to distractions is habit-forming and this product is built to break the habit.

There are many distraction blocker apps available in the app store, then the question became:

How are people using distraction blocking apps?

How we might make this process more efficient for people to stay focused longer?

User Research

Discovery

My first task was to identify the specific problems the users were facing in their current focus management process and then optimize the application to solve the core problems. 

User interview participants were recruited through an online survey.

Participants selected included people who regularly accessed the internet for work or education purposes and got sidetracked on one or more occasions while working on important tasks.

Interview

I conducted a series of exploratory interviews with 6 users to understand the context and their pain points. These conversations unveiled many pain points, of which I prioritized user needs and focused on the features that needed to be implemented for the MVP.

I asked them questions about:

Work environment

Feelings about other apps

How, why and when distraction occurs

Other factors helping them focus

Analysis

Interview Notes
FOCUS MORE - Interview Notes.jpg
Affinity Mapping
User Research Report - Affinity Diagram

Key Findings

4 out of 6 research participants said that notifications on their mobile phones were the main reason for getting distracted from work.

Hands%2520-%2520Mail_edited_edited.png

Simply remembering the deadline or their goal prevented them from giving in to distractions.​

Time tracker apps were overwhelming because sometimes they rang the alarm when they were focusing deeply. They often found it difficult to focus as it made them anxious wondering when the alarm would go off.

Hands%20-%20Alarm_edited.png
Hands%20-%20Unlocked_edited.png

Website blockers gave them to access easily when they wanted to unblock.

Persona

FocusMore - UX Persona (2).png
FocusMore - UX Persona (3).png

Ideation

Feature ideation and prioritization

The findings were arranged according to the value and complexity.

FOCUS MORE - Feature Ideation.jpg

4 key features were prioritized to implement first.

FOCUS MORE - Updated- Feature Prioritiza

Design

Paper sketches

I designed a mock-up and prototyped a mobile app in order to minimize risk and prove the concept quickly.

LoFi-PaperSketch.JPG.jpg

User Flow - 1

FOCUS MORE - UserFlow.jpg

Low Fidelity Design

SignUp.png
LoginPage.png
MainView.png
Summary.png

Usability testing session - 1:

Moderated remote usability testing sessions were conducted with few participants. The purpose of the test was to build a product that worked for real users. They were encouraged to think aloud to capture their overarching thoughts and impressions.

Below are some of the tasks that I prompted them to do during the interview to simulate the real-world experience.

"Let’s say you are new to the app and want to sign up. What would you do?"

​"Let’s say you want to avoid distractions for a particular time frame during the day. What would you do?"

​"Let’s say you want to block few applications. What would you do?"

​"Let’s say you have logged in as a user, How would you log out?"

Outcomes of usability testing session

Low Fidelity Prototype testing revealed that many users struggled with the steep learning curve, citing issues with the length of the form and intuitiveness. The users expressed that

“It could have been in a wizard format with a next and back button on each screen.”

“I would like to check out the app first before I could register.”

“A summary page will be helpful and also an option to edit my selections”.

Mid-Fidelity Design

LANDING SCREEN
LangingPage-accessibility_edited.jpg
SET TIMMER
MainView-Start.png
BLOCK APPS
MainView-facebook_edited.jpg
ENABLE DEVICES
BlockDevices-Laptop_edited.jpg
SET REMINDER
DeadLineReminder.png
SUMMARY
SUMMARY.png

Usability testing session - 2:

10 people participated in the unmoderated remote usability testing study. Lookback.io was used for this session. The purpose of the test was to see how the potential user would use the product in their own environment.

Usability assessment: 90% of the participants on lookback.io completed all tasks and were able to understand what each task was about.

Many users struggled with navigating from "Block Apps" to "Devices" because the login screen took them directly to the "Set Timer" screen and the "Confirm" button took them directly to the "Block Apps" screen. They had not used the navigation until then. Once they figured that out, it was easy to get to the next selection. I found that little tweaks in design resonated with users.

User Flow - 2

FOCUS MORE - FocusMore-HighFidelity-User

High Fidelity Design

1. Landing Screen

Here, people new to the app can signup, and returning users can log in. Users who just want to check out the application can skip the signup process and see what the Focus More application has to offer. 

BlockList_edited.png
2. Block List (Devices)

People can enable a blocklist on all devices that have Focus More installed.

3. Block List (Devices)

People can enable blocklist only on few devices that have Focus More installed.

Devices_edited.png
Apps_edited.png
4. Block List (Apps)

Here, people can select and add other websites that they want to block during their work hours.

5. Set Timmer -1

Here, people can enable the previously set end-time to work on recurring work. Upon disabling the previously set timer, users can set a new end time. At any point, they can go back and edit the block list.

set-time_edited.png
set-time-2_edited.png
6. Set Timmer -2

People can add a new timmer to the app. Many users mentioned that they were motivated to get back to work when they were reminded of an upcoming deadline or the work that they initially set out to do. So, this application provides an option for the user to set intentions to help with motivation.

7. Home Page

The summary of the session will be displayed on the home page and the remaining time before the current session ends.

MainLayout_edited.png

Design systems

Typography

Aa

Open Sans

ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*

Heading - Heavy

Heading - Light

Title - Heavy

Body - Heavy

Body - Light

Caption - Heavy

Caption - Light

The spectacle before us was indeed sublime.

Open Sans Bold, 24 px Letter spacing 0.4px, Line Height 16, Paragraph spacing 0

The spectacle before us was indeed sublime.

Open Sans Regular, 24 px Letter spacing 0.4px, Line Height 16, Paragraph spacing 0

The spectacle before us was indeed sublime.

Open Sans Semi Bold, 18 px Letter spacing 0.4px, Line Height 28, Paragraph spacing 0

The spectacle before us was indeed sublime.

Open Sans Semi Bold, 14 px Letter spacing 0.4px, Line Height 28, Paragraph spacing 0

The spectacle before us was indeed sublime.

Open Sans Regular, 12 px Letter spacing 0 px, Line Height 20, Paragraph spacing 0

The spectacle before us was indeed sublime.

Open Sans Bold, 12 px Letter spacing 0 px, Line Height 16, Paragraph spacing 0

The spectacle before us was indeed sublime.

Open Sans Regular, 12 px Letter spacing 0 px, Line Height 16, Paragraph spacing 0

Product Colors

I wanted to create an app that was accessible. The colors used, complied with WCAG AAA standard for color contrast ratios.

#18464E

#276F7D

#C96916

#E0D8CF

#F5ECE3

#FCFDFD

Iconography 
Iconography copy 2.png
Elevations
Elevations.png
Component Library
ComponentLibrary (1).png

Future Improvements

My main takeaway here is to involve users in every step of the design. It was truly amazing to see how impactful it was to involve the users through each step of the design process. What seems intuitive to designers is not necessarily so for the users.

I believe that there is still room for improvement for Focus More. The main goal of this project was to block distractions so that people could spend time on the tasks they set out to do. It is important to reiterate the key features of the application before adding new features. That said, improving accessibility and voice integration could be future visions for this product.