Problem

Create a Project and Task Management System for the relaunch of an existing SaaS software, Boardvantage.

My Role

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. 

P.S.

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. 

Our Personas for this project

Initial Testing

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"

Takeaways

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
User Flows

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. 
Visually Differentiate

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.
Project Details > Task Details : an important interaction. Click to Enlarge.
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.

Click to Enlarge

Task Status

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.

Task Status on Task List page. Click to Enlarge.

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).

Task Status on Task Details page. Click to Enlarge.

Demo of Tasks

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.

Mobile Application Sitemap for Boardvantage Tasks. Click to Enlarge.

User Testing

...Coming Soon!...
Back to Top