Create a Project and Task Management System for the relaunch of an existing SaaS software, Boardvantage.
Product Design, UX, UI, Information Architecture, Rapid Prototyping and Usability Testing. I was the sole designer but frequently worked with my design team (Rich Hemsley and Erin Newby) to gather feedback and align direction. I also worked with several Product Managers and our Dev Team to meet our launch date of January 2018.
This project actually started with a request for me to clean up some concept screens that had been created by another designer before I arrived.
Personas & User Stories
User research was done prior to my arrival on the project, so I first spent some time studying the personas and listening to interviews to understand first-hand accounts. The Product Management team also provided me with highly detailed user stories and use cases.
Using a simple paper prototype, I tested the initial screens that had been handed over with as many people as time allowed for (5). I got some really good insights:
"Am I on a project or a task, it's hard for me to tell the difference between them?"
"How do I know which project needs my attention first?"
"There's so much going on here, I'm not sure where to start – or how to find what I need"
I knew I needed to improve these things:
• Visually differentiate between tasks and projects to eliminate confusion
• Create a better system for helping to prioritize their projects and tasks
• Simplify the design to avoid decision paralysis
Before I could start sketching, I needed to create user flows based on our user stories and lay out an initial framework for information architecture.
Sketching and Design Studio
I collaborated with team members and sketched out TONS of screens. It always helps me to sketch quickly before moving into digital.
I needed to make it very apparent that tasks and projects were different. If you check out the interaction below, you can see how the transition from an open project to an open task is much different in the "after" version.
Helpful Project Status
In the initial concept, project status was automatic and limited to: not started, in-progress, past due, and completed. In the revised design, those were eliminated in preference of a progress bar that shows % of completed tasks in each project.
We updated the task status to a combination of a check box, drop down status selection (not started, in-progress, or completed), and color marker for quick reference while in list view. We have 2 ways to change the status because of 2 types of users. We wanted smaller teams to have the ease of a check box to complete a task.
Our product management team was mindful of our clients with large teams, so they wanted the option to change task status from "not started" to "in-progress". We added this feature on the task details page as a drop down. If you click the check box—it will automatically change the status as well.
(My prototype at the bottom of the page shows this feature better).
High Fidelity Prototype
I used Sketch and Invision to create this prototype. Password is "teal".
Native iOs Application Design
I designed mobile, tablet, and desktop screens together. If an element didn't work on mobile, most likely I changed it in Desktop so that the design elements remained consistent across all platforms.