Background

I have personally used many tools to track my productivity and to plan my day. I’ve used Apple’s native Reminders app on iOS and loathed it, which then inspired me to create a more efficient to-do list app.

Learning how people view productivity apps

According to my research, I discovered that many people had the same issue as me:

1
Found it frustrating when their current productivity apps lacked the ability to add multiple reminders
2
The current notification delivery systems made it difficult for users to actually be reminded that their tasks needed to be done, especially if the tasks had deadlines.
3
Users desired features in their current to-do list apps such as the ability to create multiple lists, add sub-tasks, and plan tasks effectively.

Crafting a story

I wanted to whip up a convincing, realistic persona with real needs and problems. By using the 5 WHY’s technique and empathy map, I was able to turn Cara into a well rounded persona with practical frustrations, goals, and motivations.

Problem solving and ideation

Another way to enrich my persona was creating a storyboard that demonstrates the environment and situation where she’d hypothetically use a to-do list app. I based the storyboard with the problem statement I created below:

“Cara needs to complete her tasks on time in order to avoid any potential stress and anxiety from overflowing tasks.”

Let's help Cara out

After gathering information about users’ frustrations with their current methods of to-do lists, we can come up with solutions that will fix or improve their current situations. Since many felt that they were not able to customize multiple reminders, organize their tasks by category, and/or hesitating to use any to-do list apps due to time and effort, I came up with a few solutions:

— Allow users to add multiple reminders for each task to avoid forgetfulness
— Include the ability for users to create lists, add tags to tasks, and filter tasks by their status to improve organization
— Create an “auto-schedule” function which will populate tasks with the help of artificial intelligence (AI) based on conditions inputed by the user to reduce effort on planning when to do tasks and the order if the user is in a mood for a “task completion spree”.

To the (metaphorical) whiteboard!

After making user and tasks flows, it was now time to create some screens. I used crazy eight’s for the first time to sketch 8 different ideas for each of the main screens all under 8 minutes each. This process really helped me flesh out different more varied designs than just basic sketching.

Building branding and design systems

I created a simple color scheme to keep a clean look. I wanted the app to feel simple, intuitive, and motivating. So I kept everything minimal to prevent a cluttered-looking app. As I went from mid to high fidelity I took advantage of the auto-layout functionality in Figma to create quicker and responsive frames with tons of interactive components and variables. This made creating the frames for tasks much more cohesive in a quick matter!

Testing gone wrong

The plan was simple. I was going to perform usability testing with my mid-fidelity wireframes for my main 4 flows. I went straight into my usability interviews.

However, the way I worded my questions turned my usability interviews into discoverability interviews. I indirectly told them the name of the tasks they needed to perform instead of just stating a scenario.

After discussing this with my mentor, I had learned that I had been testing discoverability, not usability. I had failed to write an interview guide and script beforehand, so now I know its importance!

So what now?

Due to time, I kept the feedback from my interviews since they still provided valuable insight and made my affinity map. I came to the following top priority revisions to make:

— Distinguish the “add new task/list” icons to make them more clear
— Increase overall icon legibility and clarity
— Include a preview of selected tasks when making a new list
— Clarify AI Auto-schedule function in the app itself

Updating my designs

The biggest priority was changing up the appearance of my main CTA button as shown below. I also Increased overall icon legibility and clarity, included a preview of selected tasks when making a new list, and added a tooltip of an explanation of auto-schedule feature. You can glance at the final prototype here.

Before

Users immediately clicked the plus button to create a task but were confused by the two options and mostly chose the first which leads to the Add a New List screen.

After

The solution? Switching the icon order, adding text labels to the icons buttons and menu, and improving the overall micro-interaction of the plus button.

Final designs & words

The majority of my time that I spent on this project was playing with prototyping. I spent hours getting my anchor links to work the way I envisioned. I wanted them to be scrollable, clickable, and sticky. When you click on a category, the selection will scroll to the section you want. This helps users to navigate the extensive menu a lot faster!

I learned a lot of valuable lessons in this project. I learned the importance of having a user interview guide, auto-layout and smart-animate in Figma. If I had more time, I would definitely play more with animations and transitions to make the app smoother and maybe go through a round of actual user testing with a rehearsed script in hand.

Designing an AI feature into a productivity app to automatically schedule tasks