TaskPies: the neurodivergent task management app!
We developed an app called TaskPies to manage tasks for neurodivergent individuals. Our title and app name are derived from a task prioritization strategy that is highly recommended by psychologists called the bucket system. A bucket system benefits neurodivergent individuals since it allows them to break down large, daunting tasks into smaller, manageable tasks in categorized to-do lists. It can be challenging for neurodivergent individuals to regulate their energy and delegate tasks accordingly. The bucket system encourages them to organize tasks according to their high, medium, and low energy levels. As part of our app, we have implemented a prioritization system that uses the symbol “!” to indicate the priority level of a task and, therefore, the amount of energy needed to accomplish it. So the smaller lists or buckets allow users to manage tasks based on energy level, which “cuts down the possibility that you’ll wile your prime energy time away” on small tasks (Caldwell and ADDept.org). We used a pie chart to visualize task completion, hence Task Pies.
This was a semester long project that was not finished when the semester was over. This is not the final project as we are planning to update it when time allows.
Brandi Kuehn, Claire Pini, Thomas Rusch, Vi Conrad
TaskPies is a to-do list app designed for neurodivergent individuals, created to alleviate the issue of feeling overwhelmed by tasks. Other apps available are not designed for neurodivergent individuals and can result in a wall of text, creating an overall feeling of helplessness. TaskPies has a simple UI and multiple features targeting neurodivergent behavior, including a notification system that notifies the user multiple times throughout the day until the task is completed. The app also has smooth animations and rewards, such as confetti, to provide the user with a small but essential dose of serotonin and dopamine. TaskPies allows users to record thoughts, title tasks, and organize them into groups. Users receive points each time a task is completed, which can be used to purchase hats for their user icon. Celebration animations will also play when a task is finished.
This app is for those who have ADHD and need a way to organize and delegate tasks. The smiley face mascot helps you remember that your actions affect others, so do something nice to yourself. The app was designed with users of all ages and abilities in mind so that it can be used by millions of people across the world. With the app's customizability, easy set-up, and amusing prizes the user can unlock, any user using this app will have a more challenging time falling behind on their assignments or forgetting to take care of their personal needs.
Once our app is complete, the user will be able to utilize it regularly to help them organize and complete their daily tasks. This app will cater to those who are neurodivergent, although it will have features that can be used by anyone to remember all the tasks they need to complete in a clear, concise, yet not overwhelming fashion.
As a task app, it is only natural that the main feature will be creating tasks with set completion dates. These tasks can be stored in separate categories to keep everything organized, so you can stay informed on how many tasks are learning, personal, or work-based. The user will be able to check off tasks throughout the day, keeping up to date and ensuring a task isn’t completed twice.
There are four levels of prioritization which reflect different amounts of energy expended by each task. The levels are none, !, !!, and !!!. Along with these are different categories. The three default categories are personal, learning and work. We wanted to make the app accessible to anyone, even if they were not students. In the future, we would like to allow the user to set the names of the categories, but as of now, they are preset. The image to the right shows the homepage, where the user can add new tasks. There are “!” next to one of the tasks, which means it is low priority and low energy.
The user receives coins for completing their daily tasks, which can be used to purchase hats for their avatar. The amount of coins depends on the task priority level. By doing so, the user is immersed in the application, allowing them to customize it in a small way to suit their preferences. Whenever a user creates a task, the app will send them notifications, reminding them to complete it by a specified date. When the user has accumulated enough coins, they can use them at the store to purchase decorative hats. While it is not possible to wear more than one hat at a time, it is certainly possible to collect all of them and switch between them whenever you wish.
The image to the right shows the shop, which is key to our reward system. Currently, the images are not showing up due to a bug, but the user can equip new hats to put on their avatar. An example of an avatar wearing a hat is shown in the image below:
Once you have downloaded the app, you will be guided through the tutorial, which will explain where you need to go to utilize all of the features available. As the app progresses through the different pages, it will fade out and point out specific areas to avoid confusion. If a returning user is using a different device, or if the individual feels that they will be able to figure out how to proceed without the tutorial, they may skip it at any time. The tutorial can be easily accessed through the settings area, under the profile page, in case a user forgets where the different features are located or just needs a review after a long period of not using the app. Below are two mockups of the tutorial:
During the design process of this app, we sketched out designs using various drawing and sketching programs to develop different layouts. Using Adobe XD, we were then able to transform the sketches into mock-up versions of the app, which we were then able to refine. the Material Design UI Kit from Google was used to create the icons for the mockup. To implement the application, we decided that CSS would be a good choice based on the programming languages and apps we were using.
Our original plan was to create our project as a ReactJS-based PWA wrapped inside of Capacitor as a ReactJS-based PWA. We would be able to load our website instantly, and it would also be possible to work offline if we made a PWA. We would be able to use Capacitor to make our website work as a native application, with access to all the hardware features that is associated with it. Unfortunately, time and budgetary constraints forced us to change our plans.
As a result of Capacitor, we would be required to learn iOS and Android native app development, which is not our area of expertise. As we do not have a budget to pay for a WebHost and HTTPS certificate (PWAs are incompatible with GitHub Pages or LocalHost), we could not make our project a PWA. However, it would be straightforward to turn our project into a PWA if we had a budget.
However, we were able to use ReactJS as planned. Having a navbar and near-instant loading times gives our site the appearance of an app. By using LocalStorage, users' tasks remain visible even after the web browser has been closed, resulting in an even more app-like experience while using the site.
It was decided that GitHub would be the best tool for us to work together on the code. After some difficulty, we could get it to work, but it was not easy initially. We were unsure of how to push the code from our different IDEs, so we had to learn how to stash the code. We encountered a significant problem when it came to switching back and forth between branches and stashing code. The problem was that we would switch to a new branch, but the code would remain the same. We put the code into a Zip file and merged it for some of the collaborations. Our latest branch was successfully merged with the main branch, and we conquered GitHub.
For this project, we used IntelliJ, VS Code, and Brackets. Collaboration was difficult when using all three IDEs, but they all worked for each of us individually. Vi used Intellij, Thomas used Visual Studio Code, and Claire used Brackets. Our respective IDEs were well-known to us, but this project allowed us to learn about each other’s IDE.
We used Recharts for the Pie Chart. It is a React library that can create charts and data visualizations.
https://recharts.org/en-US/api/PieChart
To format the pages, we used some Rebass, but not on all pages due to time constraints. The UX would be improved if we were given more time to explore the library and perhaps a template.
Throughout our application, we use the jQuery framework on the Stack data visualization page and the NavBar. We use both the selection power and the animation system it provides. It's bad practice to use jQuery inside a ReactJS app. it adversely affects performance, which is particularly pertinent since our project targets mobile devices. The combination can make the entire computer unstable when pushed too far. Future versions will replace jQuery commands with more modern alternatives.
The animation system in the Stack data visualization is more complex than it seems. There are many extra features to make the animations as satisfying as possible!
When adding or removing many tasks, each task is animated one after the other. This system is provided with the time delay that should be between each animation and with the maximum combined time that the animations should take. If the total time to play all animations would be longer than the maximum time, the provided delay is ignored and replaced with a fraction of the maximum time. This is all to make the animation look cool, but it never takes too long to become annoying.
Another way we avoided making the STack animation annoying was to make it only play once per time that the app is opened. This means that the user doesn’t have to wait for the animation to play whenever switching through the app’s pages. However, this feature is temporarily disabled so that we can more easily show the animations during our final presentation.
When possible, our animations are designed only to animate an object’s transform and opacity properties. Those properties are far more performant to animate than any other properties so we can do many animations at once on mobile hardware. In the future, we will remove jQuery from all animation systems to further increase performance.
When the user completes all their tasks, 🎊s will appear on the Stack alongside a congratulatory message.
As the semester ends, our application is finally coming together. As the project progressed, we used mockups and bounced ideas off one another, implementing multiple features and finally consolidating them into a single application. There are a variety of features that have been completed for this project. We have created the main page, the profile page, the task page, and the store page. We are still working out the bugs in the system due to the time crunch, but most of these pages are working properly.
The first time we met, we threw many ideas at the wall to see what stuck. For a bit, we really liked the idea of a Google Chrome Extension, but after researching its feasibility, we pivoted to React. The idea to create an app for neurodiverse individuals came about as any of our group members were neurodiverse. We all wanted a better task management system to keep track of our assignments.
After we figured out the kind of project we were making, we met up more to brainstorm ideas. Many of our proposed ideas are shown in the sketches. Some of these were quite outlandish, and others were more true to our initial vision. We decided to make the app upbeat and encouraging, as dopamine deficiency is one of the leading causes of incomplete tasks (Doyle and Colley, 2022).
From the beginning, we knew we would need a system for prioritizing our tasks. Instead of just reading what a task is, this system would allow users to visualize each task's importance, facilitating the completion process. In addition, we wanted to include a tutorial so that new users would not feel intimidated by this application. The tutorial would be shown the first time that a user opens the application. It would be stored on their profile page if they need to refer to it in the future. To make the process of creating tasks as easy as possible, we decided to use a type-and-enter system, which acts almost like a text editor. A simplified task-creation process would eliminate the need to create detailed tasks and allow users to break tasks down into smaller, more manageable components. As a final step, we decided that a reward system would be a helpful way to boost dopamine levels and encourage users to accomplish more. Using confetti and incorporating game elements into everyday tasks seemed like the most effective way to do this.
To achieve our goals, we decided to create a PWA application. With this application, users can create a to-do list of tasks they need to complete and then add descriptions to those tasks. It is possible for the description to include information such as the date that the task was completed, the due date, the title of the task, and other pertinent information. It's now possible to see what kind of tasks your users are creating and when they are completing them using the new TaskPies service, thanks to the data collected from the TaskPies database.
Throughout the development of this project, we generated quite a few designs that would allow for better user interaction. Originally, we intended for the pie chart pieces to gray out as more tasks were completed. In its place, Thomas' Task page and its completion bar were introduced. Additionally, we originally coded the color of each task to give you a sense of how many tasks are in a specific category. Our reward system didn't have as much development as it does now. Only confetti and no hats or coins. As part of our original design, we wanted it to have a fun, relaxing feel so that users would not feel intimidated. The app avoids harsh colors or shapes to provide the user with the best-tailored application for their needs. While debugging, we set some of the app’s colors to be bright and jarring so they would stand out to us, but if given more time, we would mute the colors, so they resembled our design better.
Using Adobe XD, Claire created a variety of sketches and mockups to ensure that we have a good idea of what the app will look like, and we decided together what elements to include. For example, we did not like the drop shadow behind our pie chart, but we really liked the shadow behind the tasks themselves because it helped differentiate them. We also thought a visual representation of a light versus a dark mode would be beneficial. It is common for users to be able to select between these two modes, depending on their preferences. It seemed like a good idea to have a light and dark version of the app to add some more customization to the app and allow users to customize it according to their preferences.
When it came to coding the page, we primarily used CSS. Our pie chart was created using Rechart, and the layout and UI were created using Rebass.
After we created the mockups, Vi created the app's skeleton since she knew some React already. She put together the initial App.js page and the initial to-do list. She started with this tutorial to get things working. It all worked until she tried to make a category filter. She copied what the tutorial said to do for the first filter, and it broke everything. This went on for weeks, and the filter still does not work. She also made the first navigation bar, and Thomas made a better one afterward.
Initially, we had everything in the App.js page, which meant that we could not switch or show the contents of other pages. This was a challenge as we wanted a multi-page app. Vi tried many different ways, but none of them worked. Thomas figured out how to format the page so that we could have a separate App.js page and a Home.js page.
The app's main page has the general appearance of our rough draft, which shows the user a list of the tasks they need to complete and a pie chart showing how many tasks have been completed, as well as what category they are stored in. As soon as the user pulls up the app, this page will be shown with the welcome message at the top, helping to create a stress-free and welcoming environment. The current home screen is shown to the right.
The active and completed filters work and adding a new task works. Adding a category to the new task also works. We are still working on editing tasks. Initially, editing tasks worked, but since we added categories and priorities, it does not. Marking tasks as complete does work.
Currently, the pie chart is supposed to show the completed tasks that are not completed, but it is not totally functional. When setting the variables for the pie chart, we had issues selecting only the completed tasks. The count of tasks works, but it doesn’t show the finished versus not. We put in four for the number of tasks done to ensure that the pie chart worked.
For our profile page, we went off of the original mockup designs, substituting a blank image icon for Thomas’ photo. This profile page will allow the user to have three categories for tasks. This page will also allow the user to change their primary color throughout the app, which is used in things like the navbar. The image to the right shows that the profile page is currently basic and static. Despite the title saying “Settings,” it is the profile page. As of right now, the profile page is purely static. We hope to bring in customization of color and category types in the future. We would also want the user to access the settings page and tutorial on the profile page.
The “Stack” page is what makes our app different from competitors. It is true that other apps display tasks as a list, but our app uses a unique data visualization system to elicit an emotional response from the user and to motivate them to complete their tasks. This system was inspired by a web comic about executive dysfunction, in which the small and quick tasks a person has to manage are shown as giant weights above the head of the person (Iraprince).
The first image on the left shows the task page, and it looks like any other app. when the user adds tasks on the home screen, they show on this page as “weights” on the avatar. The task page may seem redundant, but it has two purposes. The first is to allow the user to visualize their task load and how much energy it takes to complete each task at a glance. The second purpose centers around neurodivergent brains specifically as it relates to executive dysfunction.
Executive dysfunction causes a person’s brain to ignore future responsibilities. We figured that by giving those future responsibilities a visible presence, we could encourage people to finish tasks and feel relieved afterward.
The task page will show you a picture of your avatar with its corresponding hat image. Then, your created tasks will appear as bricks over your avatar, squishing it down under the weight. When tasks are completed, you can click the “clear completed tasks” button, which will transform those tasks into coins stored on your account. The completed tasks will even be deleted from your checklist. Tasks with higher priority will reward exponentially more coins, incentivizing the user to focus on them first. If you complete all tasks weighing down your character, the weight will be lifted off, allowing your character to be unhindered, much like you will be with all your tasks done! You will even get a congratulatory message! As shown in the image to the right, the character is overburdened with tasks and quite literally squished beneath all their responsibilities. The only way to save the user’s character is by completing tasks.
The shop page was created to allow users to use the coins they collected from completing tasks to customize the app with the purchase of hats. When opening the shop page, users can view the coins they amassed from completing tasks, the selection of available hats, and their costs. If they decide to purchase a hat, there will be an option to “unlock” the item, allowing them to equip it to their avatar used on the task page. You will only be able to equip one hat at a time, but that doesn’t stop you from buying as many as you can. Currently, there are only a few hats in the shop to choose from, but that just makes it easier for the user to collect them all!
The shop page is static, so the first image below is the concept design. The second image is the current state of the page.
Our original idea was to create a Google Chrome browser extension. It would detect what site the user was visiting in the active tab, and I would play the music that the user had associated with that site. An example could be playing music that helps focus when the user studies Quizlet. Unfortunately, this idea is no longer possible because of the new Manifest v3 extension system. To improve security, Manifest v3 greatly restricts what browser extensions can do. New extensions cannot edit sites, so we cannot inject a music player. They also cannot access media on the user’s local device, so the user would not be able to upload their music. The Manifest v3 system is already mandatory in all Chromium-based browsers and will soon be required in Firefox. We had to scrap this browser extension idea and create the idea we are moving forward with now.
We initially wanted to create a React Native app as we thought it was used for app development more than react. We also didn't know they were too different but were soon proved incorrect. Then we switched to React. We have more skill with web development than native app development, so we wanted to create a PWA for our project. Unfortunately, PWA limitations create several challenges for us. IOS devices do not allow PWAs to send notifications as native apps can. This is a significant problem because our app focuses on sending users notifications.
We have decided to use a PWA container to let us have the best of both worlds. We researched React Native at first, but it wasn’t the right fit for our project. We then switched to React, and after three iterations, we finally figured out what we would build our app with.
One of the main problems we are currently facing is ensuring that the app is helpful for neurodivergent. Understanding how much stimulation is needed to keep people’s attention and interest while not overwhelming them is important as being able to keep everything simple and not easy to overthink.
So far, we have come up with a few ways to make this issue obsolete. The first is by creating a tutorial that can point out all the available features to the user, so they can understand exactly how every button is used. We have also ensured that the original font coloration and style are simple and easy to read compared to bright colors. We are also working on exactly how our mascot will look, as our first run was less cute than intended.
We found many different ways to help make the app more neurodivergent-friendly. One thing is that having easy-to-understand language and a simple text font was the way to go, as it helped keep everything simple and easy to understand. Another idea that we found from the research was that we needed to add features and stimulation that helped evoke dopamine to encourage more task completion.
Adding too many tasks can cause the app to have trouble rendering. In the worst case, it caused Thomas’s GPU to become unstable and need to reboot! As a temporary fix, we’ve limited the app to only being able to hold 500 tasks. In the long term, we want to increase performance by removing jQuery from the app and further optimizing animations.
We struggled with figuring out GitHub and pull requests. We were not sure how to push to the branches initially, but after trial and error, we figured it out. We also had a few merge conflicts that Vi went through and resolved.
The CSS proved to be a challenge over the course of this project. Though we had an idea of how the website would look, the implication of said CSS was far more complex. Some of our implicated code did not transfer seamlessly on their given page. Our store page CSS even implemented its CSS on all of our pages, even though it was only assigned to the said store page. In the future, we hope to make our website the same CSS throughout to give it a nice welcoming look.
Linking pages together and sharing data between them took a while to figure out. We initially had the Home page and task page functioning independently. Since the stack page’s data was stored with LocalStorage, we modified the Home page’s data also to be stored there.
The navbar uses React Router (LePage).
Our biggest issue was that we were very ambitious with what we wanted to do with the app. Initially, creating a to-do app seemed like the most straightforward idea, but it quickly became complicated. Midway through, we readjusted our priorities and what we needed to complete, and what would be nice to complete.
With the four of us combined, we have an extensive and diverse skill set that allows us each to specialize in different areas. We each worked on separate tasks to complete them faster, and we met once a week to check in and delegate new tasks.
Brandi Kuehn researched ADHD and how neurodiverse brains compare to neurotypical ones to help find direction in starting the project. In doing this research, she found many different ways to help make the app more neurodivergent-friendly. She also created the first hats that will be unlockable in the app. Brandi coded the app's Shop page and created mockups for the app’s future tutorial.
Claire Pini used Adobe XD to design a mockup of the app and optimized UX with Brandi. She created numerous sketches and discussed them with the group before creating the mockup. She was able to create designs for both light and dark modes. Additionally, she created the static profile page and the CSS for the app. Claire also drafted up and created the logo used for Task Pies using Procreate and Adobe Illustrator.
Thomas Rusch helped sketch a couple of initial designs for the app. He did most of the research into a Google Chrome Extension and later React Native, Ionic, and Capacitor. He has been vital in building a foundational understanding of React for the project and will contribute heavily to the CSS in the future. After the planning stage, Thomas Rusch designed, coded, and animated the “Stack” data visualization page. He also animated and helped code the navigation bar to allow for the app to have multiple pages. He also changed store tasks in LocalStorage so that the tasks persist through page reloads and reboots.
Vi Conrad was the project manager and worked on the code. She organized and delegated tasks to the group and helped ensure everyone was on track. She also coded the initial todo functionality, combined all the code, resolved merge conflicts, and edited the reports before submission. She created the initial Navigation bar and the app’s skeleton which included the App.js page, and all files in the pages folder. She also organized the code into folders to make it easier to navigate.
