Inspiring users with chronic procrastination to complete their tasks and avoid the negative effects of procrastination!
Overview
Role
Lead Product Designer
Context
2023 Northwestern Capstone Project
Result
Prototype Design
that went through 3 stages of testing
What I Did
Research
Lo & Hi fidelity Designs
Testing
Prototyping
What is Timely?
Timely is my Graduate Capstone Project! I wanted to encourage users with chronic procrastination to complete their tasks and avoid the negative effects of procrastination!
Wheres the gap in the market?
Most productivity apps are for productive people who aren't organized. Timely recognizes that and aims our features to help users organize their schedules as well as educate and encourage our users to become more productive! While most people believe procrastination is due to laziness or lack of will power it is actually your bodies natural response to being in a negative emotional valence state. Contrary to popular belief the solution is compassion for oneself, self honesty and proper preparation.
Problem Statement
How might we create a product that helps users with their habit of putting of their tasks, in a manner that recognizes their current emotional and physical states.
How did we solve this problem?
Breaking down Tasks
Timely breaks down tasks and makes it easy for users to start them breaking the inertia commonly found in chronic procrastinators.
A friendly face and emotional check-ins
Timely is a productivity assistant that serves as an accountability partner for users who chronically procrastinate.
Teaching users about patterns and best practices
Timely has a lessons feature that provides tips and modules on common procrastination patterns arming users with the knowledge to stop procrastination.
Research
Literature Review
Procrastination by Dr. Fuschia Sirois 2022
To set up users for success before tasks even start so that they have a greater chance of not procrastinating.
To help users truly evaluate their mental and physical states before engaging in work or studies.
Treat the problem of procrastination with compassion rather than judgement.
Designing for Emotion by Aaron Walters
In order to create a cute character the design must follow the face shape of a baby with large eyes and head and a small nose.
Connect with users emotionally as to make stronger memories and experiences.
User Survey
To create an app that helps users avoid procrastination we needed to find out their procrastination patterns. To do this we targeted our questions to 3 different points.
What types of tasks did users procrastinate?
What productivity apps and calendars they used?
What would they want to see in a productivity app?
Key Findings
With 15 participants taking the survey we wound up learning key information to start fleshing out features, and targeting pain points for users. Below were some of the main findings that we used later in the design process.
Trouble staying on task was commonly stated as a major pain point for participants.
50% of users asked for an accountability partner.
The two most popular productivity apps were Google Calendar, and Reminders.
70% said that they procrastinated most when they were students.
Design Patterns
I consider design patterns before I do my wireframes, and user journeys in order to find out how other apps are solving my users problems. With my survey done I knew I had 4 different goals in my research.
To find an example of a suitable accountability partner.
To find away to keep users on task.
To find out how other apps break down larger tasks into smaller ones?
To find out what users like about google calendar and reminders?
To-Doist Learning
The card system communicates levels of urgency, this creates an order for tasks that keep users focused. This made me think of the different card states.
They also have a great method of breaking up tasks by group, this way users can separate and compartmentalize their tasks.
Their app also lets users see into the future by easily switching to week and month views giving keeping users informed and organized.
Duolingo
Duo the owl is possibly the most famous accountability partner on the app store and so I chose to use its shape language for my own accountability partner.
Their lessons section is a great method for positive reinforcement and encourages users to keep up with their goals!
Reminders
This app has a great compartmentalization system where users are able to see their completed tasks, and this gave me the idea for the history section of the app.
This is more a shoutout to the IOS timer app, when looking at how I wanted to interact the landing page with a card system. I realized that I could combine the timer card with the reminders landing page layout.
Google Calendar
As the app used the most by our participants our first iterations of cards looked very similar to their task cards.
We also wanted to stay true to how users schedule their tasks and used their add a task as inspiration for Timely’s
Wireframes, Brand, and First Iteration
Wireframes
We were really focused on two things here; The first was creating a series of flows that would really give users a sense of control over their tasks, and creating flows that could be feasibly built in the time constraints.
Brand Design
To create an accountability partner I had to center the brand around a character. Based of our design patterns we decided that a character similar to Duo the Owl would do that trick, and so we created Timely!
With this we were off to the races! I created the Timely character as well as some other expressions, and matched the main branding colors focused on hope, trust, and focus.
First Iterations
With my brand and wireframes I set out to create the first iteration of timely!
Reactions
Peoples initial responses were a bit confused. They large spaces of red while looking good on the outside weren't exactly inviting, users were also getting confused by the nature of the red card itself. This is where I had a design thinking session with my mentor to work out the kinks in the user flow!
Steps Forward
We go back to the drawing board, and rethink the user flow, and card design. We end up adding an additional details page to the this flow where users click on the card are taken to a details page and then they can begin their tasks. This way when users interact with the task itself they have a better understanding of whats going on!
Testing and Second iteration
Second Iteration
This iteration really focused on a revamped user flow that focused on informing users of how to interact with their tasks, making it easier to plan in the future, and creating emotional checks and reflection.
Details page
As mentioned in the previous steps forward we implemented an updated user flow which takes users to a details page of their task, and this helps users understand what’s state their tasks are in, and the ability to focus on one task at a time. They can also edit their tasks in real time or add them to an external calendar to create a better organization.
Right in the Feels
We also took this step to ask ourselves how are we effecting our users emotions? This is how we created the pretask, and post task checklist. We want users to understand that part of being ready for a task is not only preparing their enviornment but centering themselves and ensuring that theres no looming emotional challenge to get through.
Cutting the Calendar Feature
After pivoting and amending the user flow a little bit we also took a look at how we wanted users to interact with their calendar instead of having a dedicated calendar feature we put the ability to switch between days, weeks and month views right on the dashboard.
User Testing session
Set up
This testing session consisted of 4 user interviews and an AB test to finalize the card design.
4
1
A/B Testing results
The purpose of the A/B test was to find out which “started” states users liked best. From this we found that users chose the left most screen.
What questions did we ask ?
At this point we had wired up a simple prototype where we asked our participants to go through 4 flows.
Add a task
Start a task
Start a lesson
Find their notes on a previous task
After each flow we asked how easy it was for them to complete the task from 1 - 5, and if their was anything they liked or was bothering them.
We then switched focus to the A/B test, and ended the session with a discussion of what they would like in a productivity app and how Timely compares to their current app.
How did our participants do?
With four participants we observed their actions closely to see if their was any issues below we have summarized each user reaction.
Ali, Masters Student 23, score 17/20. Ali really enjoyed using the application as he thought that the Timely character was cute and made the app fun. He struggled most with the lessons portion of the app where he was a bit annoyed that it wasn't easy to navigate between each lessons screen.
Michael, Product Manager 26, score 16/20. Michael also found the character fun and struggled most with starting a task saying that the pop ups were a bit confusing and had too much text.
Miriam, Librarian 24, score 18/20. Miriam had been only involved in the copy up until this point, but her familiarity with the platform was also an asset as even though she's seen every screen she had issues finding the notes of previous tasks.
Saif, Developer 29, score 12/20. Saif had the most trouble with the app. His first impression was disliking the look of the dashboard, he said that something was bothering him about the cards, and he didn't understand the difference between task states.
Any surprises
The last session with Saif was for certain the most surprising session. It gave me many things to think about, but mostly it made me believe that the dashboard needed a complete rework.
Surprise Final Iteration
Third Iteration
After the testing session the class was coming to a conclusion. I put together a presentaion of what I had, and my class was quite pleased with what I put toogether. I however was unsatisfied, I couldnt get what Saif’s test out of my head. With this I decided to do some extracuricular design.
Following Dark Themes across the world.
As mentioned in the previous steps forward we implemented an updated user flow which takes users to a details page of their task, and this helps users understand what’s state their tasks are in, and the ability to focus on one task at a time. They can also edit their tasks in real time or add them to an external calendar to create a better organization.
Clarity above all else
We also took this step to ask ourselves how are we effecting our users emotions? This is how we created the pre-task, and post task checklist. We want users to understand that part of being ready for a task is not only preparing their environment but centering themselves and ensuring that theres no looming emotional challenge to get through.
A nod to IOS
After pivoting and amending the user flow a little bit we also took a look at how we wanted users to interact with their calendar instead of having a dedicated calendar feature we put the ability to switch between days, weeks and month views right on the dashboard.
Learnings and Next Steps
Lessons
This was quite a long project with alot of iterations and testing in such a short time span, but I wouldn't have it any other way. The differences between the first screen, and the last iteration are worlds apart and at every step I could give reasoning for my decisions. I did however come away with 3 different lessons.
Test, Test, and Test again
Every major change came as a result of asking my peers, testing with my team, and with outside participants. In my next project I would also like to test feature by feature, making it a much more frequent back and forth.
Follow your instincts
At the end I really trusted my gut that the second iteration wasn't good enough. What really sprung me forward was seeing my classmates apps, and Saif’s testing session. I couldn't let that feeling that the app wasn't the best it could be sit. This was ultimately for the best and has given me an app the looks and feels like a productivity app rather than a class project.
Revise the Flow when you can
I think that this entire process could have benefitted from a better understanding of the user flow from iteration to iteration. In my next project I will be sure to have a better understanding of the changes that I make and how they effect the user flow overall. Making sure I mark the changes and update the flow.
