Timely

Inspiring users with chronic procrastination to complete their tasks and avoid the negative effects of procrastination

Role

UX Designer and Researcher

Context

2023 Northwestern Capstone

Team

Samir Harb - Product Manager

Miriam Nordine - Copy Editor

Mohamed AK Sr. - Mentor

Jonas Phillips - Mentor

Objective

To create an app where users develop healthy work habits and complete their tasks using techniques for emotional regulation.

Problem Statement

How might we create a product that helps users with their habit of putting off their tasks, in a manner that recognizes their current obstacles

The solution

The Problem

While most people believe procrastination is due to laziness, it is actually your body's natural response to being in a negative emotional state. The solution is compassion for oneself, self-awareness, and preparation.

Breaking down tasks

Timely breaks down tasks and makes it easier for users to initiate them, breaking the inertia commonly found with chronic procrastinators.

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 putting off their tasks.

A friendly face and emotional checks

Timely is a productivity assistant that serves as an accountability partner for users who chronically procrastinate. This helps encourage users and keeps their motivation up.

Apple Watch app

When researching the best way to complete a task without distraction, we also considered the potential need for a watch app, allowing users to focus without looking at their phone.

Key Design Patterns

Research

Literature Review

This project was originally inspired by the teachings of Procrastination by Dr. Fuschia Sirois. To supplement her teachings and create an emotional impact, I also read Designing for Emotion by Aaron Walters.

User survey key findings

- Users stated that they procrastinated difficult, confusing, and long tasks the most.

- Trouble staying on task was commonly stated as a major pain point for participants.

- 50% of participants asked for an accountability partner.

- The two most popular productivity apps are Google Calendar and Reminders.

- 70% of participants said they procrastinated most as students.

Key design patterns

Duolingo: Character design, lesson modules, and dark mode

Todoist: Card component structure and filtering tasks

Reminders: User history section

Google calendar: As the main design pattern we aimed for our task detail page to work similarly.

Apple Timer: This card was the final inspiration for our task card's functionality.

Building Blocks

Project Timeline

One of the key strengths of this project was working with a project manager to create a timeline for sustainable work. After discussing the research and deciding on features, we sat down to create a work schedule that mirrored a sprint-like work environment.

Paper Wireframes

We were really focused on two things here; flows that would give users a sense of control over their tasks and designs that could be feasibly built in the time constraints. Using the research I accumulated I created several iterations of paper wireframes to flesh out the features we thought would solve the problem.

Brand Kit

To create an accountability partner I had to center the brand around a character. Based on our design patterns we decided, that a character similar to Duo the Owl would do that trick, and so we created Timely!

Design System

The design system that I created saved a lot of time, especially when it came to iterating quickly and prototyping the app over the four iterations. I had learned how to organize a design system from my internship and applied that to this project.

Initial Iterations

First testing session

The initial participant responses were mixed. They found the large red spaces visually appealing but not very welcoming. Users also had trouble understanding the purpose of the red buttons. I then had a design thinking session with my mentor to troubleshoot these issues.

Second Iteration

Streamlined User Experience:
We updated how users navigate our platform. Now, when they click on their tasks, they're taken to a detail page. This helps users see the status of their tasks clearly and focus on one task at a time. They can even edit tasks in real-time or add them to their external calendar for better organization.

Emotionally Aware Design:
We also considered how our platform will effect users emotionally. That's why we introduced pre-task and post-task checklists. We want users to know that preparing for a task isn't just about their surroundings; it's also about finding a balanced state of mind. These checklists help users prepare for any task by first addressing the root causes of procrastination.

Calendar Interaction Redefined:
We've made changes to how users handle their calendars. Instead of a separate calendar feature, we've made it easy to switch between daily, weekly, and monthly views right on the dashboard. This simplifies the process of managing your schedule, giving you more control.

Major Test

Test 3

Setup:
This testing session included 4 user interviews and an AB test to finalize the card design.

A/B Testing Results:
We used the A/B test to determine which "task initiated" state users preferred. The majority of users chose the leftmost screen.

Participant Feedback:
Ali, Masters Student, 23 years old, scored 17/20. Ali enjoyed the app, particularly the cute Timely character. He had some difficulty with navigating lesson screens.

Michael, Product Manager, 26 years old, scored 16/20. Michael also liked the character but found starting tasks confusing due to excessive text in pop-ups.

Miriam, Librarian, 24 years old, scored 18/20. Miriam was familiar with the platform but had trouble finding notes from previous tasks.

Saif, Developer, 29 years old, scored 12/20. Saif had the most trouble and disliked the dashboard's appearance. He found something off about the cards and didn't understand task state differences.

Surprising Insight:
The session with Saif was the most surprising. It prompted a reconsideration of the entire dashboard's design.

After the testing session, my class was wrapping up. I prepared a presentation, and my classmates liked it. However, I was still unsatisfied because Saif's test bothered me. So, I decided to do some extra design work on my own.

Final Changes

Revised flow and Retest

When I looked back at why Saif disliked the previous flow, I realized that I could cut out a few steps and make it more intuitive by including a play button on the card. This idea came when looking at the Apple timer widget on my phone. After making this change I retested the flow with Saif, and he said that interacting with the cards made more sense and felt much smoother.

Learnings

First, I witnessed the importance of continuous testing with team members and external participants to improve on user flows. Each test made the product better and better. By keeping track of it all, I could see my design thinking evolve as well.

Secondly, I learned to never settle for mediocrity. I could have stopped this project when I turned in my capstone, but from user testing I knew the dashboard needed to be restructured. I'm glad I went the extra mile to make the changes you see reflected on the left.

Lastly, I reflected on my internal processes including my Figma organizational hygiene and my documentation of design thinking. If I had made these reflections sooner I likely could have had less iterations, saving time and money in the development process. After this project, I have become much stricter in my workflow and design organization.

Home