mock5 Project Management Product

mock5
Project Management Product

Organization and efficiency are my jam. I lovingly nurture my ToDo list the way some tend to their gardens. Or their kids.

But I’m what they call a “creative”. My tools are InDesign, Sketch and Illustrator. They don’t let us near the Project Management (PM) software. Log your time and get out. Maybe throw in a note or something. But otherwise, you’re not welcome here.

The thing is, I love spreadsheets. Gantt charts are my passion. Now that I think about it, why aren’t I using PM software? Why isn’t it a component of my work habits?

Oh, I remember.
Because PM software sucks.

MY ROLE

Lead researcher and designer

WHAT I DID

Secondary research, including a heuristic analysis of 3 competitors
User interviews, including creating a Screener and Discussion Guide
Synthesize data using Affinity and Empathy Maps
Create User Stories and MVP
Ran open card sort to help determine the sitemap
Sketching, wireframing and continued testing
Create style guide
Create and prototype high fidelity screens
Usability testing, including creating the Discussion Guide

Problem

PM software for creative agencies is pretty awful. It’s either beautiful to behold (but low on talent). Or it has powerful capabilities (but is dense and hard to learn).

Worse yet, it can’t scale. Software that’s a perfect fit for two employees doesn’t work when you add that third. Got a new Account Manager? Yikes—time to scrap it and start over. Gotta relearn, transfer all your data, rinse and repeat.

And worse yet, from the software engineer’s perspective, no one in the studio except the Project Manager uses it. At some point in time, PM software acquired cooties. The thing is, cooties or not, everyone does have to use PM software, even if just to log their hours.

Can’t we can do better? I think that we can...

Our Mission? Create a bespoke project management system for people who might not be project managers.

Our tools? User Experience research along with User Interface design.

Our journey? Fraught with peril, discovery and redemption (like Goodfellas with with quantitative data).

Gaining Insight

Lets start at the beginning, at the caveman phase. Me do secondary research. Me do interviews. That make Problem Statement. Club nice man. Make nice family. This is science, people.

My Process: a slightly tweaked Double Diamond model

This is my Process. Kinda nice, right? I get kinda annoyed when I see Design Thinking/UX process models that try to ram into it everything plus the kitchen sink. For me, the Process is about understanding what it is trying to accomplish: a cycle of research, ideating, verifying. Repeat as needed. It’s pretty perfect as-is. My only innovation is adding “repeat as needed.” With arrows. I’m what you call a genius.

Secondary research and interviewing help me craft a Problem Statement. But why bother? So we don’t start adding “kitchen sinks” to our work. I used this type of research to create my problem statements. And problem statements keeps a gal honest—they are my North Star. It’s how I find my way back after thinking “you know what this product needs? More spreadsheet tables.”

I started with Secondary research into three PM “standouts”: Monday.com, Trello and Webvantage. Trello represents the easiest entry point. However, it lacks muscle. Monday.com represents the “sexy” side of PM. However, it lacks true power, (especially with reporting). And finally, Webvantage is the benchmark in terms of power. This software can do it all, especially complex reporting. But it comes at a cost: nothing is simple–—you always have to enter multiple pieces of data. Worse still, this software breaks every single Usability Heuristic. (Especially: no visibility of system status; lack of consistency; unclear or total lack of error prevention.)

Interview info, comments and ideas were committed to stickies and then arranged, grouped and regrouped until categories revealed themselves. I then plotted them along a continuum of experience. As you can see, the top contender is, by a landslide, “ease of use.” Nothing came close. Other important takeaways were a desire for integration (one place for all PM tools), notes capability, job status indication and notifications.

Testing helps to either vet and approve assumptions or shine a light on bias.

Ideation

Nothing beats a mash-up for finding that sweet spot between two very different personality types. And nothing does a mash-up better than heuristic ideation.

Dial in two extremes, pretend to ask them a few questions and then combine. Throw in a little Ideation Story and some brainstorm sketching, serve it up with User Stories and you’ve got a meal (also known as MVP1: Minimum Viable Product 1. The “1” is what makes it spicy.)

For the heuristic ideation I created a grid that explores how two completely opposite personality types would approach a problem. The problem was gleaned from the Affinity Map: notes, reviewing, status and collaboration. I then explored these problems through the lens of each personality type and how I thought that they would solve the problem.

I chose these two personality types as extreme versions of our different users: creatives (alien) and accounts (military). This type of ideation allowed me to approach the problem from both POVs.

Where this form of ideating shines is when you mash up both into the Combo row (magnified) to create standout ideas like keeping status front and center and using real-world words that people understand.

I started with ideas based on what was generated in the Ideation Stories (brainstorming along three How Might We statements). From those, I sketched a few ideas: When someone hovers on a Gantt chart line, they have more visibility into the project. They can see the name of the project along with other key data (to be determined later, after further research).

This is an idea for how to collapse all project Gantt charts, arranged by person, to show studio capacity. The Gantt line is color coded to show how “at capacity” someone is along with an icon to show when someone is booked for the day.

Ideation sketching: Calendar with Join Meeting prompt

This is an alert notification that automatically provides an easy “Join Meeting” button so a user can join a video meeting from their calendar notification.

I did an open card sort of twenty participants to help create intuitive categorization. This became the basis of my sitemap.

I identified four key Red Routes (time tracking; adding and viewing notes; create a calendar event; create a project) and then mapped out the user flows for each. These red routes were determined based on the MVP1 data and represent “game changers”.

No Notes, Please

Has a child ever asked you for a ketchup and jelly sandwich? This isn’t your first rodeo so you know it’s not as good as imagined. But you give in because you’re dealing with a fussy child. The child eats it, spits it, and screams “that’s not what I want!” That’s testing.

So when users say that they want Notes that are available all over the dang place — in addition to the comments that are within a task — you know that’s just as gross. But you do it anyway because there’s a smidge of a chance that it could be delicious. And that’s verifying.

Low fidelity wireframe sketches

The sketches provided me with low fidelity tools to go out and get user’s first impressions. Here you can see how the layout started, with the Notes feature as a slide-out (to the left of the main sidebar navigation); a caret for each Project and Task line item to reveal more details; a button to the Job Jacket; plus two different means to enter your time (either start the stopwatch with the Start button or enter manually). The testing was successful with minor changes (mainly to naming, such as changing “event” to “calendar” when adding a calendar event).

Wireframes

However, after testing the wireframe prototype, issues were brought up that necessitated making improvements. The most surprising and impactful change was the feedback about the Notes. In the initial interviews, users wanted globally available notes. However in practice, testers were confused by the notes: did they tie in to projects or tasks? How? Where? It quickly became apparent that globally available notes weren’t providing any benefit. They went on the chopping block.

Also on the chopping block was the calendar. Once testers saw it, they found it more useful to have visibility into more of their tasks. They also wanted an Announcement feature—something that could send out broadcasts (either about the system or other, company-wide messages). That meant that I needed more real estate. So the calendar was also nixed.

And finally, I got key feedback on what was important for each line item: Job Jackets wasn’t important to Designers and of only limited use to Accounts and Project managers. There also needed to be visibility into the job numbers that are assigned for each project.

Even at the high fidelity stage, there were still several key issues that users had. Notably, the line items were still wrong. There needed to be space for Due Dates, a way to have insight into the task communications (commenting and checklists) as well as some way to view project budgets and job status. This actually made a lot of sense: during all subsequent testing, more information and sentiments came out, notably around project accountability and teamwork. Having this visibility for everyone, regardless of what role, really supported the notion that projects belonged to everyone.

So I consolidated the time function into 1 button, created iconic representation for comments and checklists, and made more room to fit everything in. I added 2 color-coded bars to visualize the project budget and the projects status.

This is a hover that allows a user to input their time. This is the same hover modal that appears whether you click a task line button or Add time from the utility nav that’s at the top of every screen.

When a user has a stopwatch started, there is a visual indication in the utility nav.

The Devil’s in the Task Details

So if nothing is right and everything in testing shows me to be a big, dumb loser it’s all a lost cause, right? I thought so until… the project detail page. Did I hear that there was a need for large amounts of data’s spirit to be crushed and broken?

I don’t like to brag, but I’m pretty awesome at taking loud mouth, wordy data and manhandling it into beautiful, scannable infographics. There is nothing in the world that comes close to the thrill I get when I make data do what I want it to do. I push, I prod, I bully. Data, I will break you.

The original red routes didn’t include a page for a Project Detail. But it became clear that I needed to flesh this page out in order to close some loops in the flow as well as take the opportunity to use this real estate to give additional high-value information. This page expands on the information in the task line items. The teams have more detail (and also include the client: a key driver for collaboration.) I did some quick sketches and then added to my high fidelity screens. Testing confirmed the importance of adding: this screen is, by far, is everyone’s favorite.

During testing, it became apparent that collaboration with the client is key and people want more of it. But also, in order for that to occur, there must be value placed on the work that’s being done. So I added a way to keep the project’s budget and profit goals front and center on the project detail page. But what also gets visibility is the “team”—and that includes information about the client.

In most programs, this information isn’t visible to the designers. Seeing this now allows the client to become more “human”.

Also, the task line items are more fleshed out than in the My Tasks section on the Dashboard landing page. Here, you can see the number of days you have for each task as well as the start date. You also see the team member(s) who are assigned to this task. This is because this screen, unlike the My Task section on the landing page, shows a viewer all the tasks, not just the ones assigned to you.

When a user clicks on a task line item, they are brought to this task detail modal. Here, you can add or delete team members, read, add or reply to a comment; read, create or check off checklist items and change the timeframe for a project. As a side note, any changes to the project timeline here will be reflected in the Gantt chart schedule.

If a user would like to see all of the comments and checklist items, they can click on the Project Communication tab. Click on an item’s summary in the left column to view the details in the right side of the screen

YOU Get a Project and YOU Get a Project…

And finally, we get to create a project. Like Oprah, I’ve given everyone the gift of something more valuable than a Pontiac (they’re out of business, you know). I’ve given you the gift of creating complex projects without Tom Cruise jumping all over your couch. At least take off your shoes, Tom.

Generally, adding a project isn’t easy. There are lots of details that need to be included and a handful of those details are connected to each other. Unfortunately, powerful PM software usually lists all the input fields on one page. Even if they are split between pages, you still get the entire list of fields. It’s up to you to decide whether you need to input data into them or not.

But most projects don’t need all of that information. If it’s a Digital project, it needs only the digital-specific info. If its a print project, then it needs print-specific info. So I broke up the information so that it is presented in a way that listed only what you needed to fill out.

The fields are “smart”: by listing out questions in a Yes/No flowchart fashion, you only see the fields that are relevant based on your previous answers. For instance, if this is a digital project, you only need to fill out information for a digital project. This way, it keeps the power of heavy-duty, inter-connected software, but the burden on the user is low.

Don’t Stop ’Til You Get Enough

Here we are, at the end of the world. What a journey, eh?

Sure, there were challenges. Lots of tears (turns out, testers don’t like to be pinched. Only testing could verify that). And, more times than not, lessons learned from people far smarter than myself (thank you, Oprah). What is that old saying? A journey of a thousand miles begins by eating an elephant.

On a serious note...

Good UX and UI requires empathy. I hope that I made reading this Case Study enjoyable for you, the viewer. I also hope that I imparted how wonderful and fun this project is for me as well. Thank you!