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?!
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
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:
01 Research
02 Sketch & Wireframe
03 Moodboard & Resources
04 Design
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.
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 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?
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
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.
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!
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
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.
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.
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.
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.
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.
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.
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.
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?
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!
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
