What is Focus?

Focus is a study tool application designed to improve the user's productivity by providing time tracking tools along with a todo list. The app uses a pomodoro timer to assist the user in managing time, and also includes a stopwatch to keep track of the time spent on each task.

Needs Assessment

One of the most common struggles among students is time management. Between juggling assignments, extracurricular activities, hobbies and midnight Netflix marathons, planning and keeping track of where time is spent is crucial to a student’s success, both in and out of the classroom.

The Pomodoro technique (repeating cycles of 25 minute work sessions followed by 5 minute breaks) is a simple yet highly effective strategy to find a balance between working and taking breaks to recharge. Combined with a to-do list the user can carry on their laptop, Focus was conceptualized and the design process began!

Design for the User

Identifying who the users are paints a clear picture of their goals in using the product, current pains with existing alternatives, and needs and desires for the new product. To start outlining the required features of the application, I drafted personas of primary users, one of a student named Jerry.

Jerry is a third-year mechanical engineering student at the University of Waterloo, and is involved heavily with Midnight Sun, the university’s solar powered car team. Jerry eagerly studies physics and calculus, but dreads opening his textbook or reviewing his notes for chemistry.

Jerry currently uses two online tools to help him manage his workload: an online to-do list (Any.do) and pomodoro application (tomato-timer.com). Switching between the tabs of his browser to check off to-dos and start pomodoro sessions is an unnecessary interaction that hinder Jerry’s focus on a specific task. His greatest need is an application that seamlessly provides both tools for boosting productivity in a clean, intuitive interface. Jerry also wants to be able to allocate specific amounts of time for each to-do, for example, one hour of physics studying and three hours of chemistry before going to bed.

Iterative Design and Prototyping

Development

To develop the application, I used React to split Focus into several components. The component holding the entire app is 'Client', which then renders 'Sidebar' and 'Todo'. Todo renders 'TodoEntry' each time the user adds a new todo.

React state variables are used to store the user's todo list, allowing for Focus to optimistically update the interface with the new entry. The array of todo entries is then stored in the browser's local storage to ensure the user's todos will persist on a page refresh.