Want-to Design Mockup

This idea popped up when I was frustrated with me looking at different productivity apps. Some were too rigid, some were too flexible, and some were too punishing for the user. And with calendars, I feel like they can get very punishing if your day does not align with it. This is from my personal experience, I get very demotivated when I am 5 minutes late to a deep work session I planned. I thought of "what if instead of these time blocks, what if you do these tasks within specific contexts?". Sure you can do that through calendar and tasks, but I wanted something that focuses on this idea.

While I was listening to Casual Magic, a podcast about intentional living, Unjaded Jade talks about reframing tasks and calendar events. In my head I thought "wait thats what my therapist has told me as well". I thought of those ideas, and with the inspiration of this podcast and my therapist, I created (and live of) the idea of reframing tasks as "want-tos" because it helps set the intention on WHY you want to do that task. For me its way less stressful, and also, you know the motivation behind why you want to do that task.

And with non-negotiables like events and appointments, I reframe them as "anchors" because they provide a lighthouse on how you want to plan your day around it.

On top of this, your day would be set to contexts. I looked up the validity of this, and I realize context switching is a very real thing that exists, and thats why workers feel tired in the workplace from quickly switching contexts. With these ideas in mind, I thought "wait this is getting too real. Your day is composed of contexts with 'anchors' and 'want-tos'".

I started brainstorming a design through Figma. Though the challenge is, I do not know how to use Figma. So I turned to the internet to find tutorials. Luckily there was one from Figma themselves with learning the basics called "Figma Design for Beginners". I have gained useful knowledge such as learning how to make auto-layouts, components with variants, prototyping, and making cool animations.

Throughout the process, I do think its important to know what I want the user flow looks like. I tried to make a user flow about the "today screen. This helps me what I should design and what I want to make so the user interface seems smooth and not disruptive.

To begin my designing process, my thought was, "lets start small, lets intentionally choose the fonts and colors that would fit well with this app" and I was looking through Figma and online to see if this is a good strategy. Turns out there is a strategy to this called "Atomic Design" which is a type of methodology. I got the template that teaches me this workflow and played around what the template is about.

Then I started using that strategy to my Figma project. I started with the texts and the hierarchy so that the user can see what is important and not important in a screen. From there, I start combining these texts and icons to create small components and added more components based on smaller components.

At that moment, that was a good way to make the design feel cohesive. I felt more motivated because of that, and from there I built onto the components to bigger components. And honestly, I feel proud on how these bigger components turned out.

And then from there I made the three main pages, the "Inbox" page where the user can dump thoughts and tasks, the "Today" page where the magic happens with contextual planning, and the "Horizon" where the user can see upcoming "anchors".

From there I had the urge to dive in to code, but I slowed down, and I realized I want to make prototypes to see the behavior if a user presses this button, etc... So I started prototyping. I tried to figure out the features on prototyping in Figma through looking up tutorials. This was honestly my favorite part because it makes my design feel like its a tangible thing.

And there we go, here is a workflow going from the today view to the inbox view.

I was planning to develop this through Flutter, but I had other priorities. I want to learn React and Next.js because these frameworks were very popular. If I had more time, I would have honestly worked on making this a tangible thing through Flutter and Dart.

Maybe in the near future, I might want to develop this app for myself (and for others too).