UX Case Study: Pro+duktiv (A Sleep, Time, and Work Tracking App)
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
This is my first UI/UX design project during UX Design Class in Purwadhika Startup School . The UX case study was done for my Post Test on Module 1 lectured by Kenneth Mahakim.
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
A young professional with irregular sleeping schedule and disorganized time schedule. He want to change his habit emphasizing more on fixing his sleep schedule.
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?
As a part of the design thinking process, I defined the users, needs, and insight.
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:
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:
Ideation
Pro+duktiv is an application that helps young professional like Bram to have a better sleep schedule and time management. The user will be able to set alarm for sleeping and waking up time and more user will be able to track on his daily tasks with the work log feature.
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
Prototype
Before creating a high fidelity prototype, I created the wire frame on Figma.
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.
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.
High-fidelity prototype
After creating the design guideline, I started to design the prototype on Figma.
Key Lessons
I acknowledge that this case study is lacking in user research since I do not conduct any user interviews or surveys. The design solution was purely built on the brief given and on top of a few assumptions that hadn’t been validated yet.
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