App Design – TaskFlow

Client: Concept | Software: Figma, FigJam, Illustrator | Type: Concept

The Project

As a designer and a home project enthusiast, I am always looking for a good list app. The problem is, none of them had the features I wanted to work the way I worked. So how would I ever find such an app that does exactly what I want it to? Make my own!

Using Figma as the design tool, including Figjam for initial idea sketches, and eventually AI to help in development, this project should be available in the app store soon (or later, I really need something to help keep all the aspects organized).

The Goal

The goal was to create an app that would allow me to organize my projects, whether work or home, into several levels. A main project, tasks, and sub tasks. Once the subtasks were done, a task could be checked off as completed, and once all the tasks were done, the project would automatically be set to complete.

After playing with the design, I also wanted to include incentives for finishing the tasks. So, after each task, or sub-task, is complete, the user will get points. Once all the tasks are complete, and the project is finished, more bonus points are added.

But why?

This method, as least for me, helps organize projects into simple, easily achievable, tasks. Instead of looking at the project as one big endeavor, the app lets me break it down into smaller parts, and even go even smaller if need be. Creating a flow of tasks leading to the completion of the project. A Task Flow if you will.

As for why to include arbitrary points? To make it a game. Just like in certain games, where the more points you earn, the better you are at the game, the point system gives that feeling of accomplishment. As the app took shape, I also include a social feature where you could compete with friends or colleagues, to earn the most points.

Another thought was that the points could be used internally to play mini-games. Credits for a Casino game, or points to give you more moves in a puzzle game. Sort of like the games where you earn points through mini-games, then use those points to clean up a Mansion, but in real life, and the other way around.

While there are plenty of task and list apps out there, this one feels unique because of the way it to organized, the UI, and the incentive factor.

But Who?

Who is this app for? Anyone who likes to stay organized, but needs a visual way to keep track of everything as well as a little incentive beyond a job well done. I see this being more directed toward men, and possible as a tool for individuals with ADHD, who need that extra focus.

The Design

This needed to be very simple with large titles and large buttons. But it also needed to have enough features to make it useful. For the overall UI, I wanted something that made each project stand out, and pertinent information to be easily seen at a glance, such as how many tasks still needed to be completed.

Colorized

Each project would be automatically color coded to indicate how much was done. Red would indicate no tasks had been complete, and Green would indicate a completed project or task. This let you visually see where you were at in a project, and give some urgency to the project that may need a little more attention.

A True Icon

Icons would be another way to add a quick visual cue for users to see what needed to be done. This would be achieved through categories. Home, Yard, Work, etc.

Go with the Flow

The flow is always crucial in any app or website, but for TaskFlow, it was even more important (it is the name after all). Making it simple for users to go into a project, and see the various tasks, but also see if any task had sub-tasks, needed to be simple, straightforward and intuitive.

Testing the Design

The best thing about applications like Figma, is the ability to visually put everything together into an interactive prototype you can test and use just like a user would. While I have worked with some design companies you simple lay out each page in Figma, with nothing but a change of screen connecting them, I prefer to make as many elements of the prototype actual work. This helps to experience what the user would experience. Every click, every swipe, every scroll needs to be tested for the best experience.

AI Development

While I know just enough scripting to do some damage, I prefer to rely on the experts. Since I can’t afford the experts, I will go with the next best thing; Generative AI.

While some may assume that developing something in AI is as simple as a few prompts, it is a lot more complicated. You have to not only know how to talk to the AI, but you have to know the technical details that it will understand to develop what you want. This takes a lot of trial and error and testing, and even more experience working with developers in real life, to guide the AI to where you want it to go.

Test, Rinse, Repeat

While I may not know how to code in python, I know how to explain to the AI what I want so that it can deliver the best code for me. This code requires extensive testing and returning to the AI to make changes. Much like you would work with a real life developer, working with AI requires a back and forth. Knowing how to test code, how to check for errors, and how to tell the AI what isn’t working, and troubleshooting why both with the AI and on your own, is crucial in creating a final, working code.