Taskforge is a project management app that helps teams efficiently organize, plan and complete projects. It provides a platform for brainstorming, task tracking, and time management.
View Prototype
As part of my education, myself, one other UX designer were tasked with designing an internet app that would allow small to medium sized teams to manage tasks, delegate workload, and track their progress. I contributed to research, ideation, wire framing, prototyping, usability testing, and the final design, including four of the six main user-flows.
As organizations grow, they increasingly rely on tools to help them delegate and manage tasks as part of their workflow. Your company helps non-profit organizations transition from manual pen & paper or word-of-mouth task management to an online platform that streamlines and provides reporting capabilities.
Your product manager wants you to explore ways to increase efficiency in small to medium sized teams in how they assign tasks to their workers, and track the progress of the task.
In our research we found that the bulk of users used email followed by word of mouth in combination with other things.
62% of users reported that they were satisfied or very satisfied with the way their organization currently managed tasks and projects, but when we looked a little deeper, we uncovered some issues. 56% of users reported that they weren’t aware of a certain aspect of a task or project that they needed to complete, and 80% of users had reported a task or project done, only to discover that they forgot a part of it.
Our finding was that people are satisfied with how they currently do things, but they aren’t actually getting the job done.
She is a thirty-five year old living in San Diego. She just started a new job that she is very excited about, a community outreach coordinator at the non-profit Feeding California. Not only does it allow her to feel fulfilled, but it also challenges her to learn and grow. She has always loved working in a group setting, collaborating and brainstorming with others for ideas and solutions, and watching pieces of the project come together to form a whole. At the same time, she appreciates when she knows exactly the tasks assigned to her. When things are less clear, she is not afraid to seek clarification on what is needed and expected from her, although it’s always appreciated when it isn’t necessary. She is visually driven, and loves getting to cross off her goals when they are completed.
Pain Points
1. Lack of clear instructions or guidance
2. Due dates being sprung on them without warning
3. Steep learning curve to start a new software
Goals
1. Work efficiently on projects with need for minimal clarification from leadership
2. Collaborate with team members from the start of the project through completion
3. Be mindful of the timeline and due date of varying tasks
With that we began writing out our user story map. We separated it into two main goals organizing a project and completing a project.
1. Organizing a project: users would need to create a project, brainstorm, create tasks, definitely the timeline, get approval from a manager, and then assign the project to the correct team members.
2. Competing a Project: Once our team members had the go-ahead from their manager, they would be able to start on completing their assigned tasks, identifrts, and of course insurance through the app in case of damage or theft.
Once we had an idea of the journey a user would take, we began wire framing possible solutions for the user. I tried to come up with a variety of ways to show the timeline of the projects, including a swipe-able option, a variety of versions of a traditional timeline, and even some fun animations just to switch things up.
In meeting with my teammate, we found a traditional timeline that we had both drawn similarly that would meet the needs of our user based on our research. It would clearly lay out exactly what needed to be done in a project, and make it obvious when something had been skipped or missed.
To give individuals a better sense of accountability for themselves as well as their team, I nailed down a way to both show the teams tasks and specific tasks assigned to the user. My teammate spearheaded the brainstorming and project planning aspect.
Our mid fidelity prototype was an extension of our wireframes. Heavily based on our drawings, we were able to add interactions like adding and organizing brainstorm cards, adding task groups into a timeline, resizing items in the timeline, as well as adding and completing tasks. This would allow us to test the usability of our app over our rough drawings. We chose a simple interface that would be easy to use for users just getting started with a task management software.
My mockups
My teamates mockups
Our testing focused on three main parts, walking through the brainstorm session, working on the timeline, and adding and marking tasks as completed. We had our users run a complete brainstorming session, adding tasks, organizing them, and assigning them to specific teammates. Then we had users adjust items on the timeline in both length, and where they fell on the schedule. Finally they would check off tasks for specific users, and add tasks for a specific user.
Overall, they were typically able to complete the steps assigned, but we got several important takeaways from observing our users.
1. The coloring system used to mark tasks as overdue, upcoming, and complete on the timeline was too complicated.
2. The terminology task group, task, and sub-task was not clear to the user.
3. There was a disconnect when it came time to take the brainstorm and add it to the timeline.
4. The menu and homepage were difficult to understand and navigate.
We jumped into our high fidelity with the user feedback fresh in our minds. We altered the color scheme to be more visually neutral and give a better hierarchy and emphasis on things like buttons as well as more white space that allowed for better legibility and contrast.
We then simplified the coloring system on the timeline based on our usability testing. We reduced it to three main colors (green, red, and a neutral color) and added an icon to the past due item for clearer visibility to those with red green colorblindness as well as a hover state with the exact reasoning for the icon.
Based on user feedback we clarified the verbiage so that users could add a category, task group, and new task when brainstorming their project.
Users struggled to understand how the brainstorm session was supposed to be dropped into the timeline. We had tried an add button, but the link between those two sections was just not clear enough. To simplify the process, we opted to have users add the categories and associated tasks in the actual brainstorm. Users would be able to input the needed information, and managers could then lock the category and add it to the project timeline.
The homepage got a complete refresh and was greatly simplified so users could see top level view of all their projects, get an overview of specific projects, or dive in and see the brainstorm, timeline, team tasks, and user specific tasks.
Finally, micro interactions like a subtle drop shadow effect on hover was added to give the high fidelity mockup a more polished look.
If I were to continue exploring this project I would add things that originally fell under our MVP like the ability to provide feedback/comments on tasks, as well as additional user testing on the brainstorm and timeline sections to ensure that our changes improved the clarity for users. I also would really like to simplify the brainstorming process.
This project was really able to push me. It took something that was very organization and planning heavy and allowed us to think of ways to more simply and visually show things for someone just getting started with task management. I appreciated how much I was able to learn and get creative in prototyping in Figma things like drag and drop, expanding timelines, and moving items. It also helped me better understand components and stylesheets and how that can drastically speed up my workflow. A little planning at the beginning goes a long way the rest of the project.
