UX Case Study: Pro+duktiv (A Sleep, Time, and Work Tracking App)

Pro+duktiv App on Flat Design

Whether you are looking to track your work, time, or even sleep schedule, Pro+duktiv cover it all. This app allow young professionals to get stuff done, focus on important tasks, and boost their productivity.

Project Overview

The brief of the case study is about how to create an application that will help Bram: a young professional that live alone in Jakarta who wants to change his living habit.

Here’s a little background about Bram:

Bram used to have a flexible working hours in his previous job. The flexible working hours ruin his circadian rhythm. For his new job, Bram will have a fixed working hours. Thus, he want to change his habit starting by fixing his sleep schedule.

This case study was solved individually. The concept is mainly intended to identify existing problems and to suggest potential solutions or alternative approaches.

I use Design Thinking method to help me guide understanding user’s needs, define the problem, and deliver the right solution that works.

Design Thinking Step by Step:

Empathize → Define → Ideation → Prototype

Empathize: Understand the user

Bram Illustration by yours truly

Here’s my findings based from the brief given:

· Bram have a bad time management skill

· Bram have irregular sleeping schedule

· Bram want to change his lifestyle starting from his sleep cycle

Define: What to solve and who are the users?

First, I need to define the user I’m targeting. Here are my findings based from the brief given:

· Bram have a fixed hours job

· Bram have a bad time management skill

· Bram have irregular sleeping schedule

· Bram want to change his lifestyle starting from his sleep cycle

What the user needs:

· Change his sleep cycle to maintain good performance at work

· Sleep tracker to tracking his sleeping time and quality

· Alarm to remind him to sleep and wake up

· Work log to keep tracking on what needs to be done

Insight: The effects of a lack of sleep on user include reduced efficiency and productivity, more errors, and accidents. Therefore, user would like to fix his sleeping schedule, time management, and work tracking.

User Persona

I made my user persona based on my interpretation on Bram from the brief as below:

User Persona Penuh Asumsi

How Might We:

Based on the user, his need, and my insight below are the How Might We:

· How might we make sure he get enough sleep?

· How might we improve his time management?

· How might we remind him to sleep and wake up on time?

Comparative Analysis

To determine what kind of features to put on the prototype, I did some comparative analysis on two sleep tracking app, SleepScore and Sleep Cycle, and one work log app, Toggl. I chose those apps as comparative analysis because all three apps are the top rated sleep tracking and time tracking app on IOS. Here’s the highlight of features from each app that I liked:

Comparative Analysis


Pro+duktiv’s features

1. Sleep: users can personalize their wake up time and bedtime on selected day(s) they set

2. Statistic: giving users information and data on sleep quality, sleeping hours, and more

3. Journal: users can track their daily activities, work, events, and others by adding it on this page

4. Calendar: users can track their activities, work, events, and others in a week, month, even year


Wire Frame Pro+duktiv

UI Design

Before I start designing the UI, I started by designing the logo for Pro+duktiv first. Design inspiration for the logo itself comes from imagining the combination of waxing crescent moon, clock, and plus sign, representing sleep tracking, time management and improve productivity, respectively. The plus sign is cut by half and each side contradicting in color representing the sensitivity of options to either cut out or add in something when people want to be more productive. Blue color chosen since blue is an intellectual color. It represents trust, logic, communication, and efficiency. Moreover, it is proven that blue tend to make people to sleep faster.

Pro+duktiv icon by me

As for the colors, icons, and other components in the UI itself selected to emphasize the feeling of calmness and peace. I design the UI in dark mode since the user most likely will use the app in the night trying to sleep (for the sleep tracking feature). Black background enhances visual ergonomics by reducing eye strain and providing comfort of use at night or in dark environments.

Lato type family was chosen as its simplicity suits well with the clean design. The simplicity in design was done on purpose to highlight the cleanliness of organized life and the calmness that follow.

Design guide for Pro+duktiv

High-fidelity prototype

After creating the design guideline, I started to design the prototype on Figma.

Pro+duktiv Prototype by me!

Key Lessons

Things I believe could be improve:

· User research

· Copy writing

· Read more on design feature and guidelines

· My Figma skill lol!

Thank you for your time reading my first UX case study! Appreciate it. To be perfectly honest designing this whole thing took me a really long time but it was such a fun thing to do since UX/UI design is a new thing for me and my civil engineering background could only do so much ha!

Any feed backs are highly appreciated to make me a better UI/UX designer.

Please do reach me at: Linkedin

You can also find more of my artworks at: Dribbble

Sometimes I write. Sometimes I draw. Most of the time I think about world domination. Portfolio:http://fidetay.net/onizleme/rarastest/