Productivity Tracker App — Small UI/UX Case Study

Productivity App concept inspired by Rescue Time

Ilija
Ilija
Jan 21, 2019 · 7 min read
Image for post
Image for post

Introduction

So it’s a beginning of a new year, and like every year you’ve probably set a list of resolutions. One of the resolutions on your list must be to stop procrastinating and get to work, right? Mine for sure is, and one of the things that’s dragging me down and stopping me from fulfilling that goal is me scrolling through social media with my brain on autopilot wondering how the hell is it nighttime already?!

Design Process

When starting on a project, I usually stick to a routine / design process that makes my designs be as consistent as possible. No matter what kind of a project it is, I stick to these golden 4 steps:

Research & Wireframes

For the research part, I already knew what I was gonna do. A goal is to create an app that tracks all the time you spent in apps and calculates your productivity score. An app like this already exists on the market, and it’s called: Rescue Time. I’ve used Rescue Time before, and even though the idea behind the app is awesome, the app itself has a really outdated design, UX flaws and it could overall have a lot better experience — and that’s what inspired me to create this concept, which could also be considered a redesign of this app.

  • their chart looks confusing as hell and they don’t have the ability to select a period (week, month), only a specific date for the overview.
  • top activities are only ranked by category, you can’t see exactly how much time you’ve spent within an exact app
  • even though they updated their UI, it still looks very old and outdated
  • they don’t have the ability to add goals on mobile, only on desktop
Image for post
Image for post
Rescue Time UI

Image for post
Image for post
Wireframes

Moodboard & Design

Going online and finding inspirational work from other great designers is also really key. Dribbble is my go to website that I visit every day just to keep up to date with the new trends and look for inspiration when starting out with new projects. I also save every dribbble shot that I like and categorize them so that when I start out a new project like this one, I can easily filter out the ones that could help me come up with a great design.

Image for post
Image for post
Moodboard for my project

Home Screen

The home screen was the most complicated screen to organize as it holds a lot of crucial information to the user, therefore it needed to be clean and easy to read. In the research stage I noticed that the home screen of Rescue Time isn’t very well put together as a lot of information is displayed with no real order. On this screen I wanted the user’s main focus to be at the top of the screen. Since I really hate dashboard screens with a bunch of information & charts I don’t even care about, I split this screen into two — Overview & Detailed. Overview is a simple info page about how much time you tracked today, or whatever period or day you selected, how much the time has changed from yesterday in % in the time of day you’re viewing it, how much of the logged hours is productive or unproductive, and you also get a productivity score which shows you the percentage of your productive time compared to unproductive with a little message measuring your productivity. On the second half of the screen you can see the time you spent in different app categories along with a navigation tab bar.

Image for post
Image for post
Home — Activity Screen

Calendar

By tapping on the calendar icon you get to the calendar page which allows you to select a custom period or day instead of just the regular today/this week/this month filter. The really cool feature about the calendar is that it allows you to view a small overview of how productive/unproductive you were that day below the date which I feel is a great way to get a sense of your progress and a cool feature as well.

Image for post
Image for post
Calendar Screen

Activities

The activities page allows you to view exact time spent in a particular category or app depending on the tab you select at the top of the screen. When you select the category tab, the app shows you a list with categories with time information, and when you tap on the category, it extends & shows you all the apps within that category you used.

Image for post
Image for post
Activities Screens

Goals

Goals is a feature that allows you to set specifics for a goal you want to achieve which you can later on track within the app. Adding a goal is very simple — you set the actual goal parameter on the top of the screen, like if you want to spend more/less time in a certain app/category. There are also settings — if the goal you’re setting is a daily, monthly or weekly goal, how long you want your goal to last or if you just want to manually delete it when you don’t need it anymore, and you can also set alerts which help you stay on track.

Image for post
Image for post
Adding goals & Goals screen

Review

So since this is just a concept project and with not a lot of screens designed, it didn’t make sense for me to user test, so what I want is for you guys to let me know what you think about this project. Do you like the end result? What flaws do you notice and what would you change or add?

Thanks for reading!

Make sure to follow me on Dribbble if you want to see more of my work.
You can also always contact me on my email: ilijav@mail.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store