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
Affinity Mapping
Key Findings
4 out of 6 research participants said that notifications on their mobile phones were the main reason for getting distracted from work.
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.
Website blockers gave them to access easily when they wanted to unblock.
Persona
Ideation
Feature ideation and prioritization
The findings were arranged according to the value and complexity.
4 key features were prioritized to implement first.
Design
Paper sketches
I designed a mock-up and prototyped a mobile app in order to minimize risk and prove the concept quickly.
User Flow - 1
Low Fidelity Design
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
SET TIMMER
BLOCK APPS
ENABLE DEVICES
SET REMINDER
SUMMARY
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
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.
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.
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.
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.
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
Elevations
Component Library
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.