top of page

Exploring Invision's Workflow feature living inside of their Spaces feature.

My role: Product Designer.
The tools used: Sketch, Invision, Adobe CS.
The team: Invision's VP product design, and me.


Some background:
"Workflow", Invision's design-driven management tool lets you easily view and organize screens within your project. You can assign screens to any collaborator on the prototype, and project managers, can assign a due date and time, and color code the change for added attention. You can drag and drop screens between project status columns to manage progress and keep your projects up to date.

"Spaces", also by Invision are the working groups for your design projects. Spaces aren’t just documents; they are the place for groups of people rallying around particular design challenges. Spaces let you create standards, structure, and order to encourage effective design processes. Spaces also provide windows into the status and progress of design initiatives for your teammates.

For some of the ideas portrayed below, I was provided with sketch files that I could use as to adhere to a certain style and at the same time explore ideas of my own.

The Challenge:
The Invision team had requested an exploration from my own personal perspective, and show how "Workflow" could live inside of "Spaces". For this test challenge, there was limited information to work off of, and an extremely limited time frame to explore, test and iterate.

The solution:
Iterate, iterate, iterate. Once I gathered all the information I could, and dove deep into Invision's style while looking for inspiration, my next step was to exhaust all potential solutions via countless iterations prior to producing final deliverables and interactive prototypes on my ideas for the team. 


Sketch Design:
Below the critical step of sketch design to explore multiple ideas, prior to more polished designs produced in sketch or photoshop. 

Animated Hi-Fi designs

Workflow tab inside Spaces:
Here's "Workflow" as a tab inside "Spaces" and how it would display all projects in four common states: On hold, In progress, needs reviews, and approved.


Workflow inside Spaces (view #1):
This bird's eye view allows for a sneak preview on the status of each project upon hover, while maintaining each projects title and date.


Workflow inside Spaces (view #2):
This bird's eye view allows you a sneak preview of the status of each project upon hover, plus a detailed list of each task and the respective status column.


Filtering the States (view #3):
This view allows you to view all projects as a list, and also shows how you could potentially filter all projects that have the majority of it's tasks held up in one particular state of the process.


Conclusive thoughts

The end of a starting point
These designs were shared with the Invision team as a starting point of discussion as to continue exploring these ideas, and many more, and the potential of incorporating "Workflow" within "Spaces".

bottom of page