App Design

Focus Timer App

UI designer

Role

Figma
2 weeks

Tools

Timeline

01

Background

Have you ever tried to stay focused but ended up checking the social media platform instead? Do you know when is your most productive time in a week?

According to World Economic Forum, the percentage of workers around the world that is permanently working from home is expected to double in 2021. I think that there's a growing need of having a tool that help us to be productive and efficient even we are working from home or any other place out of office. I've decided to put this idea into action.

02

Research

a. Competitor Analysis

There are quite a few productivity apps in the market. I've chosen 3 popular apps for review and comparison:

Detailed analysis
Key Findings:
  • Forest app has more aesthetic appeal among the apps. The gamification in the app is a good element to keep users continue using it
  • The apps lack an incentive for users to learn how to procrastinate less and do more as the reports just show the accumulated focused time

b. Interview

To investigate further on the needs and the frustrations of the users, I decided to talk to a few people informally. Some of my friends are still working/studying from home now, so I think it is good to ask them.

User Persona
03

Problem Statement

Most of the apps lack data visualization functions to track users' patterns in detail and gather actionable insights

Most of the report just show the total focus length per period. However, according to the data I've gathered, users prefer getting to know more about their patterns thus, planning their work accordingly.

04

Ideation

I’ve brainstormed the possible solutions for the following areas that resonate users’ needs and pain points. The key priorities to tackle are:

  • Present insights to the users by the data collected
  • Keep their momentum going by showing their progress
Brainstorming the Solutions

Regarding the integration with to-do-list app, I think it is useful to the users (including myself) in terms of task management. However, to be realistic, it takes time to discuss with the developers of the softwares to see how it can be integrated. So this function will not be added to this MVP.

As for gamification of the app, this will be added to the later phase of the product development.

05

Solution Overview

  • Tracker with data visualization that shows the time that are most productive for better insights to the users
  • Option to take a break during the focus time and choose the focus duration for higher level of flexibility
  • Tagging function so users can track the time allocation per the categorization of their tasks
  • Users can set their daily goal

User Flow

Low fidelity Wireframes

06

Styleguide

07

Final Screens

Hi-Fi wireframes

Look & Feel

  • The app is minimalistic so it is simple for users to use and navigate
  • The buttons matches the layout of timer so users can quickly understand which control buttons to use
  • The timer also supports undo and redo for user control

Flexibility & Efficiency of Use

  • The length of the focus session can be changed both at the clock and settings
  • The notification sound can be turn on and off under the clock for higher level of flexibility
  • Users can customise the notification in the settings and turn on and off auto-restart and screen lock if they want
  • The data can be exported for further analysis

Recognition than Recall

  • Information like tags are visible and easily retrievable
  • Users can create new projects and clients as well

Visibility of System Status

  • The remaining time is shown on the clock
  • Message will pop up once the session is over

08

Reflections

It was a fun experience for me to design this app. The difficult part is how to make the app simple but yet visually appealing to user while not being too distracted. Since the first 2 projects were done in normal mode so I've challenged myself to design in dark mode. I've done some research on how to design for dark mode and practiced on my own. I used to design by Sketch but I wanted to try Figma, which is a popular tool now. So I've spent some time to figure out how it works. I enjoy learning new skills and softwares!

Next step, I want to add in the gamification elements to the app. I've thought thought about a space theme with a rocket circulating the timer. Each complete session will bring users to different planet and users can show their map of exploration with other users.