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

Sampling of initial wireframes for desktop and mobile

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

I presented many rounds of iterations for this one. My goal was to simplify task status from a drop down with 5 chioces to a check box. It was important for our users to have the ease of a check box to complete a task. They still had the ability to see "Past Due" tasks by seeing the due date highlighted in red. 

Task Status on Task List page. Click to Enlarge.

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.

Mobile Application Sitemap for Boardvantage Tasks. Click to Enlarge.

Back to Top