Productivity Tracker App — Small UI/UX Case Study

Productivity App concept inspired by Rescue Time

Introduction

The app concept that I’ve been working on is meant to solve exactly that issue — to show you how much time you’re spending on your phone and computer and where exactly that time went, calculating how productive you’ve been throughout the day.

Design Process

01 Research

02 Sketch & Wireframe

03 Moodboard & Resources

04 Design

Research & Wireframes

Some specific problems with Rescue Time app were:

  • bad information hierarchy on the home page
  • 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
Rescue Time UI

Rescue Time has a mobile and desktop app, on desktop the UX is not as bad as on mobile, so for this project I focused specifically on mobile, even though I might revisit it again and do a desktop redesign as well some time soon.

So let’s get to work!

I always start with sketching out on paper and taking notes, that way I can easily see if what’s in my mind makes sense at all without taking up too much time to wireframe it just to realize what I envisioned won’t work. Pen and paper are still pretty useful, even in 2019… Who would’ve thought?

Wireframes

After sketches come simple wireframes that are a cleaner, on screen representation of my sketches which I use for reference while creating the actual UI. This also helps a lot since I can map out the whole user flow and see if the UX is good already, and after all of that comes the most fun part out of all, the UI design. But first, let’s get some inspiration…

Moodboard & Design

After gathering a few designs similar to the design I aim for, I create a moodboard which I use along the way to inspire myself in case I get stuck. Invision is a great tool for creating moodboards, you should definetely check it out!

Moodboard for my project

Starting off with the design, after the moodboard I collected colors and a font that are very suitable for the design as I wanted to achieve a feeling of seriousness, but also wanted the app too feel motivating and have that “game” factor and be a little playful as well, and I think the combination of typography and colors I chose works just awesome!

Home Screen

For the Detailed page, along with the info mentioned above, you also get a graph showing how much productive/unproductive time you spent per hour/day/week depending on the period you selected. Along with that, you also get a card with all time milestones which shows you information collected from since you started using the app.

Home — Activity Screen

Calendar

Calendar Screen

Activities

If you, on the other hand, select the Apps tab, it only shows you the apps you used with time information, sorted by time you used them for from most to least non depending on the category.

Activities Screens

Goals

After you set your goal you’ll be able to see it on the goal page, along with information about how much time you’ve spent using the app within the selected time period, and ability to delete, edit or view detailed statistics from your goal by clicking on the “more” button.

Adding goals & Goals screen

Review

Most importantly, since this is my first Medium post, I would love for you guys to give me some feedback on my writing as well if you have the time. 😊

Thanks for reading!

Enthusiastic UI/UX designer from Serbia.