Published on | Prototyping: From UX to Front End — Medium Mj

Tick off your tasks and get more organized.

Photo by Alejandro Escamilla

It was a task given to me in an interview. The task was to design a mobile app to manage your daily tasks. So I decided to share the details with all the people here on Medium. Let’s start!

People are very busy these days and it’s really very hard to keep everything in mind, they must need an app where they can keep notes about the important tasks they have to do because everyone can’t hire a personal assistant to make them remind for everything.

Fear not — this idea of creating a task manager app can help you avoid drowning in a sea of tasks. I am aiming to help you get on top of your to-do lists or managing all your tasks which are important for you.

Objective:

To design a mobile app to manage your daily tasks.

About the App

This app is for managing all your “Daily Tasks” for increasing your productivity. The app is a simple mixup of Task Manager & To-Do app that helps you get stuff done in an organized way. Whether your task is like accomplish projects, work todos, learning languages, mastering skills, sports or travel, etc. This app will help you to collect, keep, organize and remind you about all your tasks you have to do on that day or in coming days.

The Research

I’ve spent a little too much time thinking about the process of this idea of making a Task Manager app. Whenever I start a work, I just like to discuss it with few of my colleagues to have some great idea or at least for a deep discussion so that I can get more of it to understand the pains and gains.

For this app too, I did that awesome thing of mood boarding and an excellent discussion. And I got so many ideas and problems as well for doing the task. The first confusion was to decide whether it would be a To-Do list app or Just the Task Manager, Let me describe the both here:

To-Do list Apps:

To-Do itself describes that it is An ordered list of items. To-Do list applications let you keep lists of things you have a to do in flexible UI environments. Unlike Task Managers, to do list apps only remind you what you have to do, but not how to do it.

Task Manager Apps:

Task Management applications have been built for structured collaboration. They can handle due dates, reminders, dependencies, discussions, priorities, task descriptions, documentations, task statuses, assignments, etc. They manage different levels of action and offer complete workflow management.

Besides, a task management application gives context to your work because you can organize your tasks in dedicated environments and complete them on time.

Discussion

The Challenge

As we can see the difference above between the To-Do & Task Manager apps, Now the challenge was to decide which one to pick, is it solving the problem for different kind of users, can I mix up the both, etc. In the end, I decided to keep things from both of the categories, few of to-do’s and few from Task Management purpose and started the work.

Pain Points

Adding Task Easily
Organizing Tasks
Motivation
Easy Deleting and Editing Tasks
Giving Priority
Shift Pending Tasks
Keeping it simple, yet effective
Tasks Category
Remember Tasks

The Solution

Creating and memorizing lists would be an easy task now by using this app, as is setting up deadlines for getting them done — and reminders to ensure you’re not caught out.

It shows which task you have to do in given time of the day in order to complete each of your tasks effectively and in time.
Whatever your task is like accomplish projects, manage daily tasks, work todos, learning languages, mastering skills, sports or travel, This app will help you to collect, keep, organize and remind you about all your tasks you have to do on that day.

Features & Benefits

Keeps your daily tasks align.
Remind you about all your work with personalize notification.
One step to adding task, due date & set reminder.
Keeps your tasks according to your priority.
Very clean navigations, no more complexity.
Shift your old tasks to a new day.
Edit tasks anytime with swiping right to left.
Categorize tasks which you want to keep separate from the list.
Minimalist and stylish design.
Increase productivity.

It’s the Time to Describe

1. Adding Task

The most important action in a task manager app is to add a new task, so it should be very clear to users. While discussing the idea about how to add a new task I got some new way to add a task, and one of them recorded through your voice it was a pretty cool idea of mine.

Think how awesome it would be to just speak and the app will add your input as a task, but it was little tough though to users to record their voice in a crowded & vociferous area like design studio where all the creatives or employees speak to each other in every second. For now, I kept this idea away as it needs more work to do and decided to go with the writing it in your own way.

Add Task

After tapping on the “Add New Task” button you will get the above screen where you can add your notes that what you have to do, set a due date, create reminders and last add the task to your list.

2. Create Reminders & Set Due Date

No one wants to be late in this fast pace world or to miss the right time to do tasks. And for gaining trust as well we should deliver our works on time and for this, we need to make us remind about our task. So that we can make our relationship and trust stronger.

Reminder

By clicking on this alarm icon on the “Add Task” screen of the app, User can set the reminder for their tasks as shown in below image.

Create Reminders

3. Swipe to Edit or Tick Off a Task

The swiping option as an action is common these days, everyone knows about it and it makes our actions easier to do. I also decided to play with this option to tick-off my completed task and also for edit any task.

Swiping Options

4. Category & Edit

When a user taps edit by swiping any task, a user will go to edit screen where He/She can edit the whole task like write notes, set due date, create reminders and the Categorize any task to their favorite category. If the category in which they want to create their task is not available then they can create a new category.

Edit Tasks

Also a user can set a task priority on this screen .

5. Task Priority

It’s a scientific fact that a human can only focus on one thing at a time. That’s why I added the main priority feature, User can set a priority accordingly. After having some talk with few users I got this point that a user should set priority to more than one task like priority 1 to top important work, priority 2 to after that etc.

6. Notification

It is really an important feature to all apps these days. In our case as well it is very major action so that we can notify our users about their pending and coming tasks.

Notifications

What if some previous task left uncompleted? I have a solution, as you can see on left in above image, this way I want the user to shift the task for today if uncompleted or just delete it.

Interactive Prototype

Please find below the embedded prototype for the visuals. For a better experience, you can open the prototype in another tab. Feel free to play around with it to experience the entire flow.

<a href="https://medium.com/media/bb30d9bbe6a32896f194fdee08155d32/href">https://medium.com/media/bb30d9bbe6a32896f194fdee08155d32/href</a>

The Process

I work with User-centered design process, my designs are based on user research, analysis, insight, concept and iteration.

image credit: Daniel I Kim

User Research

People have different ways to research about their target users but the aim is same. User research is the comprehensive and multilayered activity whose aim is to collect information about the potential target audience of the product. Via a number of techniques, user researchers collect and then analyze the information obtained from real users, and this outcome usually allows the designers to work on the optimal solutions which will make the product user-friendly and attractive.

To validate my assumptions, I started the process of user interview, for that, I interviewed few tech savvy people and also created the user persona.

Interview Questions

Do you work or study?
How often you remember things or tasks you have to do on a single day?
What do you use to add notes any app or just papers?
What encourages you to add notes?
What are your hesitations and influences?
What do you care about?
How do you feel when you achieve something?
Any other To-do apps you like the most and why?
Problems you faced in To-Do’s apps?
What’s your process to add task in app?
Finally do you want to see in a To-Do app which solves your problem?

I then kept mapping their responses and started comparing all the answers.

User Persona

I made some user personas for the app to keep the target users in my mind, It helped me to make every single feature more useful.

User Persona

Wireframes

Wireframes gave me an idea that how things would look like and made my work easy for visual design. I mostly use sketching or low-fi wireframes for my projects. Low-fidelity prototypes, in particular, are rough representations of concepts that help us to validate those concepts early on in the design process. I use low-fi because Low-fidelity prototyping helps me to find the middle ground between overspending and overthinking, between too little investment and too much user validation. By building a practical, preliminary version of product.

Low-fi wireframes

Visual Designs

For the UI design, I challenged myself to create something very cool and clean. I went ahead with a light UI keeping usability and easy navigation as the main focus. I chose the Cornflower Blue color as the brand color as it gives us the both professional and casual feel.

Visual Designs

All Done!

I hope it gave you a little insight into the decisions I made. I am little proud to doing this task. It was a lot of fun to work on, and I hope you enjoy using it as much as I had fun making it. This is no where perfect but I feel with its unique approach of managing tasks, this idea can help you to be productive.

Let me know what you think! Bye!

For more works, follow me on Dribbble & connect with me on LinkedIn.

Cheers!!

Daily Task Manager : Case Study was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Daily Task Manager : Case Study

Cool stuff, every week

More Articles