All time management begins with planning!

Covers the story, process, and design (UX/UI) for the time management app

Mansi Birani
7 min readMay 3, 2017

I am a Graphic Designer who also loves clean and intuitive interfaces. I decided to clear my concepts and learn more about it by taking a specialization in Interaction Design from the University of San Diego, California at Coursera.

As my capstone project, I had to design a mobile app to showcase what I have learned so far. But it doesn’t end at that ;)

After having so many interviews and user testing I am motivated to improve it further, add secret sauces and go on with it to solve the problem of task management that is faced by many of us. I would love to be of help!

Let’s hop onto how it all started? I’ll walk you through the story of Neo (name of the app). Why I started to build this app in the first place and the process behind it.

The idea for this app hit my mind way before my capstone started. Once I started with my specialization and my Instagram channel I started to have a long to-do list, tons of alarms and reminders. I started achieving less than what I aimed for. (maybe I was making unrealistic Goals :O). Feeling overwhelmed was the first feeling I went through every morning as I looked on to my to-do list. “Where to start from?” So much to do and manage!

I knew this, that what I am doing isn’t out of the world. Everybody is doing it. Household chores, work, study, side hustle, exercising, cooking(three meals a day) and Instagramming :D. But I needed to organize it in a way so that it doesn’t feel overwhelming!

Having this endless to-do list hanging over my head, half of my time was spent thinking where to start, what is the most imp and what can be done tomorrow? what are the deadlines? etc etc.

It was becoming messy with everything on paper and nothing that can be accounted and tracked. So I started hunting for an app that can feed my needs. I tried many apps, but nothing worked for me! Hence, I ended up with more sheets around me! Oops.

My typical to-do list looks like this

One day sitting at my work table and gazing outside the window thinking about how to get tasks done… I came up with an idea! :D yay! And time will tell if it’s needed by just me or there are more people like me who need this sort of thing! (Hope I am not an alien! :P)

And the process begins..! Let me explain how it goes ;)

  1. Needfinding
  2. Research
  3. Storyboarding
  4. Paper Prototypes
  5. User Testing
  6. Wireframes
  7. User testing
  8. Final design files
  9. Working Prototype
  10. User testing
  11. Handover files to the developer (This won’t be done till I have included all the secret sauces in my recipe! :D)

And between every step lies so many iterations. No, I am not scaring you ;). In fact, changes at this stage when everything is on paper is less time taking. So, when the best version from your side is ready then you can proceed to use software to design the screens.

And after the user testing and final iterations, you hand over the files to a developer to go forward and develop it.

1. Needfinding

It’s time to face reality.

Is it really needed?

Do people feel overwhelmed when they see their to-do’s?

Do they want to be productive in their free time instead of watching tv?

Do they seek for help?

Etc etc.

<<< Fast Forward >>>

Yes, they did! Everyone felt overwhelmed when they have endless tasks to do! There are days when they seek for motivation and appreciation at times for managing it all. Phewww!

“It feels good when I scratch the task off on paper. It gives a good feeling of doing it, a software developer said during the interview”.

Surprisingly, out of all the people I interviewed 90% were using both paper to-dos and applications. On asking why they said they use multiple apps for different features.

And if you are still reading this you need it too? Right? Thank you so much! I don’t feel like an alien anymore :D

Now based on all the needs I found, I made a list of needs and how they currently manage.

2. Research

What are the apps currently in the market? Can they fulfill the present need? What are their pros and cons? I tried finding as much as I can about time management.

This takes a lot of time but trust me it’s worth it!! And so necessary as you don’t want to waste your time doing what already has been done and is out there.

3. Storyboarding

Here you share your story. Some quick line drawing via which you showcase the experience of your app straight from the need to satisfaction.

Need — > Satisfaction

Storyboard is a canvas where you show how your app is the solution to a problem.

Here comes mine :D Hope you like it!

Storyboarding

4. Paper Prototypes

Before paper prototyping, I listed down every feature people wanted the app to have and then decided the flow. And soon enough my paper prototype was ready.

It evolved at least 10 times at this stage (or more may be ;D )

5. User testing — Paper Prototypes

Even after putting in so much time and effort after testing it felt it has millions of bugs! :|

But, but, but...

It’s all worth it guys..trust me it is..you have saved 3x of your time if you directly did it on software and did everything digitally from the start.

And you will enjoy the process of creating and testing the paper prototypes. Different users..different perspective..and so many new ideas! :D

Homescreen

6. Wireframes

Creating wireframes on the software is the next step. Everything is black and white so the focus still remains on functionality than visual appearance.

Wireframe of my Home screen looked like this -

7. User testing

Still focusing on the functionality user testing is done on mobiles now using prototyping tools. I used Invision and Marvel. Here testers were fellow mates who were also doing the courses and I did it with some friends.

8. Final design files

All stylizing is done here. How the buttons will look..how they feel will be, colors and fonts are decided.

Some of the final screen for you to see :)

9. Working Prototype

This prototype is totally stylized

Checklist looks like -

  1. Improvised Screens
  2. Colors
  3. Fonts
  4. UX
  5. Recheck Above (endless times before you start testing it with users)

Link to my Prototype :) It would be great if you have a look :)

https://marvelapp.com/2fh69g3

10. User Testing

User Testing was a wonderful experience! I used Usertesting.com. Letting people try your app who won’t be biased and give their honest opinions about the app. Especially, reading their thoughts out is great feedback in itself. Their tone of voice while using different areas was really helpful to me to develop the app further and for its finishing and polishing.

You get a totally new perspective. There are things that I could see after it which were invisible to me before. It also made me laugh at a few silly mistakes that I did :)

Now when you know the recipe. Let me tell you about the ingredients. And throw some light on its features (And some secret sauces ;))

<< Features >>

To-do list (cutting off the tasks is a feeling that every to-do list person can relate to :D)

  1. Be productive with your free time
  2. Get appreciated when you complete a task!
  3. Set Monthly Goals
  4. Track your progress
  5. Motivates you every time you open the app
  6. Notifies you from time to time to get done with goals that you set
  7. Track progress over time

Very long story short (But I hope you enjoyed it ;) :D)

We all are so bored of maintaining to-do lists on paper (especially when we have endless tasks to do!) We can’t keep a track on what was done when to track our progress..too much time taking.

So why we need NEO?

  1. Paper lists are had to maintain
  2. More tasks, more overwhelm
  3. We need motivation (I need it all the time! So do you.. Right? )
  4. We love being appreciated! (I love it, don’t you? ;) )
  5. We achieve only 50%-70% of what we aim for the day..and overtime.

Did you relate to my checklist? Even if 2 on 5 of this were the same for you. We are so alike! We like our life to be organized and we want to achieve so much more in a day.

If you think I should be creating a more improvised version of NEO please like or comment below to let me know.

The video that will introduce you to the app :)

Suggestions and your insights are welcome :) Thank you so much!

--

--