MC

Tulip Tasks 

Tulip Tasks is designed to help users overcome decision paralysis and prioritize tasks effectively by providing a structured and intuitive interface for goal, project, and task management. 

Half the image is a messy desk covered in post it notes. The other half of the image is a laptop on a clean desk open to Tulip Tasks.
  • •  Built using Vite with React & Typescript.
  • •  Supabase for real-time data and auth.
  • •  Local storage utilized for account-free use.
  • •  Tailwind CSS with Shadcn-ui for UI components.

Project Timeline 

  • User Interviews | UI/UX Design

    October 2023

    Started discovery with user interviews utilizing insights to drive the initial UI/UX for Tulip Tasks.

  • Technical Discovery Phase

    November - December 2023

    Learned React & Typescipt. Selected a tech stack. Built a practice React project (Resume Builder) to solidify understanding.

  • Front-End Development

    January 2024

    Began front-end development using React, TailwindCSS, and Shadcn. Continued refining the UI/UX.

  • Back-End Development

    February 2024

    Started building the back-end with Supabase and SQL for live data and authentication.

  • Launch & Feedback

    March 2024

    Launched the app, collected feedback, and fixed bugs.

User Interviews 

Screenshot of user interview conducted via video call with shared white board of users process of generating a personal todo list.

Interview Process

  • Current Methods: Discussed participants existing organization tools and techniques to understand their approach to task management.
  • Task Brainstorm: Participants listed all their tasks and projects across various life areas.
  • Prioritization Exercise: Asked participants to organize tasks by urgency, importance, excitement, and into to-do lists while narrating their thought process.
  • Tool Brainstorm: Explored ideal features for an organizational app, addressing current method shortcomings and desired improvements.
  • Analysis: Used insights from interviews to refine Tulip Tasks scoring system and user experience.

Creating a Todo List

"I'd like to lower the barrier to entry where instead of being overwhelmed by everything that I want to do."

"I struggle to find a starting point, so I don't do anything."

"The 'No Zero Days' mentality helped. I had that pinned on my phone until I started to feel guilty. So I archived it because I was like, 'I can't do this anymore.'"

"Give me the smallest step to do something to initiate some momentum. Moving the pebble turns into a boulder."

"Not everything can be high priority."

"I've got so much stuff that I want to do, but I can't decide, so I'm not going to do any of it."

"I guess what motivates me the most is what I'm most excited about."

Evaluating Other Apps

"I already don't have the time or energy and this looks like it's going to take all day to complete"

"I tried a bunch of different systems and I'm tired of getting my hopes up."

"Just looking at all the tabs and buttons made me feel overwhelmed."

"The last one I tried just became a source of anxiety so I stopped using it."

Creation Insights 

Considerations

Excitement / Fun Level
😟   😄
Effort Required
Easy | Hard
Deadline
Soon | Awhile
Importance
Low | High

Hinderances

Number of Tasks
😵
Low Motivation
😒
Guilt & Shame
😔

Experience

Mindset
Users required a deliberate shift between long term planning and short term planning.
Overwhelm
Breaking down projects into granular goals could be overwhelming.
No Framework
No distinction of scope between todos.

UX Goals

Low Cognitive Load
Avoid overwhelming the user with too much information or options.
Minimize Guilt
Avoid any ui/ux elements that might trigger shame in the user.
Fun
Using that app should feel cozy rather than cold like the software they use at work.

A Framework

Goals
month+
Projects
day+
Tasks
<  day

Goal

Project
Task
Task
Project
Task
Task
Task

Goal

Project
Task
Task
Project
Task
Task
Task

Factors

Internal

Excitement
😄
Complexity
🚀

External

Urgency
📅
Importance
⬆️

UX Wireframing 

Screen grab of wireframing diagrams using Excalidraw in dark mode.

App Overview 

The "how about list" recommends projects by the most exciting, highest complexity, and most important of both the project along with the overall goal, encouraging you to spend your time on what project aligns with your priorities and feelings. 

Summary screengrab of the home page for Tulip Task with the 3 main columns for the how about list, goal list, and project, list.

Project Recommendation List 

Each goal's score is the sum of complexity and excitement minus double its index-based importance rank. Project scores use the same method and adds the related goal score. 

Screen grab with arrows and bubbles communicating how the how about list is intended to act as a recommendation list not a list of demands. Another bubble illistrates how the there is a countdown of days remaining until the target date. When the target date has passed by 6 days the count goes negative but at 7 days past the counter dissapears to not guilt the user about passing the target date.

Importance Rank 

Use the arrows to prioritize your ambitions. 

Diagram with screen grabs illistrating that the higher a goal or project is on the list the more important it is, increasing the importance scrore.

Goals 

Complexity and excitement metrics are entered when a goal or project is created. 

Diagram with screen grabs of the goal creation form illustrating the complexity scale from No problem, a peice of cake to this is going to require some tools to might as well be rocket science and goal color selection menu.

Projects 

Projects are color coded to match thier parent goal as well as track the target completion date. 

Diagram with screen grabs showing the color coding features and calendar of the project creation form.

Tasks 

Tasks are not currently included in the calculations since they influence the micro scale as opposed to the macro scale of goals and projects. 

Diagram with screen grabs showing the task creation form and the time estimate slider.
Visit Tulip Tasks
🌷