Pivotal + Invision – Our Two-Tool Solution for Managing Design & Software Implementation

It’s not often that design is completed before implementation begins. With multiple to-do lists taking place at the same time, finding a way to keep track of everything that needs to be done is crucial to staying on top of a project.

There are two great tools to help make this happen—Pivotal Tracker and InVision. Together, they’ve given us a powerful combination to keep us and our clients apprised of progress.

Pivotal Tracker provides a solid way to track software under construction. It’s user-friendly and simple, but not so simple that it lacks features, nor is it overly complex. There are a few features which stand out:

  • Basic management of features, chores and bugs
  • Status of project (not started, in progress, complete, accepted)
  • Commenting on questions that arise
  • Labels to help group similar stories
  • Slack webhooks to notify the team of updates to the backlog

InVision helps create clickable prototypes and manage the design process. You can add comments to specific parts of the design to better annotate and direct questions, and the workflow offers a swimlane status for designs to keep everyone up-to-date. Linking the designs allows fast clickable prototypes.

Here’s how you can use these two solutions together:

1. Creating a Backlog Skeleton

After wireframing the rough scope of the project, create user stories using Pivotal Tracker. These stories can be as detailed as you like.

For example, if you know there is going to be a “My Account” section but it’s not yet clear what the content will be, you can create a placeholder story and add a label/flag to indicate that the story needs more definition as information comes to light. If you know there will be three sub-sections in the “My Account” page, you can break it into individual stories.

Identifying Stories Needing Design

Review the backlog to find any stories that are blocked from being marked as sprintable because of visual design, and tag them with a “needs design” label to mark them as not ready for implementation. This may help you avoid some of the back-and-forth communication that could muddle the user story.

Staying in Sync

When you have broken down a page into multiple stories, you may find a little disconnect between the visual design and the backlog. Mirroring the visual designs to the user stories can help you maintain parity between the backlog and InVision. Breaking down or merging user stories and visual designs as work progresses is a good way to keep in sync.

This is where InVision is especially helpful. Use the comments to discuss and iterate on the designs, then use the workflow tab’s swimlanes to manage the progress of the visual design. Designs can be marked as “not started,” “in progress,” “review,” “accepted,” or whatever buckets you create.

Finishing Visual Design

Once a visual design is accepted, mark it as accepted in InVision, and remove the “needs design” tag from the user story in Pivotal Tracker. Then identify tasks in the user story to help the implementor understand any requirements in the designs that may not be obvious, and add a link to the visual design in InVision as an easy reference.

Thinking of Pivotal Tracker as the main backlog and InVision as the supporting visual design backlog until there is enough feature definition has added some much-needed structure and transparency to our process. I hope it’s helpful for you.