Interviews conducted with members from the Jupyter community inquiring about their thoughts and feeling of our extension and what they would expect from it if they were to use it in the future. Through such responses created basic user personas to keep in mind the needs of our users and an empathy map to understand their though processes.
Quick sketches done on Procreate after conducting several user interviews with Jupyter users to understand what they pictured for the ToDo extension. All of the sketches implement a task nesting model.
Implements the extension to live in the "main area" of the JupyterLab space relying on todo files as tabs on the top, allowing users to create and navigate around multiple files. The overall model follows top-level tasks, and subtasks are nested with partial completed icons for the users to know the progress of the task item. Completed subtasks were to move to the bottom and lower its opacity to 50% while moving the rest of the list towards the top prompting the users to focus on items at the top. This action was to act as a guide to infer items on the top of the list were uncompleted and needed to be focused on more.
Like the first version, it implements multiple project tabs, but all project files are listed on top of each other based on the order of the project tab on the top of the screen. Subtasks have their own due dates inlined with each subtask. When subtasks are marked as complete, the due date is replaced with the date that the user completed the subtask. There is an edit button on the top of the right corner to allow users to customize their to do list. This option leads to the conversation of whether users will utilize this option to customize their to do list with colors or priority tags.
The most complex sketch with a side panel on the left side of the screen to help categorize the to do lists based on the file name (instead of a tab on the top of the screen) and tags. These tags would touch on multiple todo files. Still, users can mark a subtask with a tag labeling the type of subtask with labeling conventions like "research" or "code" to allow users more organization with their upcoming tasks.
This version also tracks the to do list based on the day and allows the user to look forward into the future to see what their upcoming tasks are for their convenience. Number tags show incompleted subtasks next to the top-level task to quickly alert the user how many tasks they need to complete. By numbering the open tasks, there are as the user works on their to do list, the number decreases giving users a sense of satisfaction knowing they are working on their tasks.
After conversing with mentors and the rest of the development team, we decided it was best to go with the second version and move the extension as a side panel. The open drawer allows the extension to give users a companion program experience, with the main area free for users.
Check out the Figma Prototype Here!
From rounds of user testing, the completed items move to the bottom of the screen to minimize clutter, while still allowing users to lookback and see the completed task items for a later use. Flagging and sorting is implemented in this interation with partial completion icons next to the the top level tasks. Sorting is based on the default nesting order and due date. The ability to add in task items "+ add task" moved to the top of the screen instead of the bottom to streamline the space. Two meta data fields are also added when users want to add in a task or subtask, like due dates with a calendar pop up screen and flagging. This iteration also shows how users can navigate through multiple to do files in a drop down and how to create a new to do file.
While meta data fields were further explored and implemented in this version the ability to color code wasn't seen favorably and let go.
Check out the Figma Prototype Here!
The most recent version of the to do extension with the most up to date features. Individual completed items don't move to the bottom unless all of the subtasks and parent task are completed. The number tags indicate how many subtask items are incompleted and open. The menu panel has been updated to allow users to either Sort the list by default (my order) and due date, View the list by flagged tasks, and Edit the list by either renaming or dismissing the list altogether.
Check out the Figma Prototype Here!