• Date: 03.2018
  • Platform: Web
  • My Role: User Research, IxDesign, Visual Design

Overview

Stack is an innovative new feature at SpaceIQ. It is meant for space planners and facility managers to optimize multiple departments and teams in a building. It enables de-fragmentation of current layouts with the optimum configuration. An example is a facility manager stacking all engineering in the same floor or engineering and QA in the same floor.

Objective

Create a Visual way for Space planners to look how the space is organized now and optimize it.

Tools

User Interviews, Invision Freehand for wireframes, Adobe XD for Visual Design, Icon Design, Principal for animation.

Steps

Multiple User Interviews for Facility Manager. Created User Persona. Designed Wireframe mockups. Created high quality design with specs for engineering, for implementation.

UX Process

The whole project took 6 months, starting with User Interviews, Presentations, and then multiple wireframes and discussions with all the stake holders including Product managers, Engineering leads and QA lead. Once we narrowed down the final design, created final pixel perfect design for delivery for engineering with specs.

User Interviews

The first step of the UX Process was the take interviews of space planners and facility managers. This being my first project at SpaceIQ I needed to understand who is the user of the product. I needed to understand the persona, to segment 80% of the potential users. For this I interviewed five of our customers with a set of pre-defined questions. Created a set of questions and went through them with each of them. The result: I had a great understanding on how users were stacking currently and a brief understanding about the User. My conclusion was to create an interface for non-tech savvy users. I gave a presentation on the findings to the senior management.

Wireframe Sunburst View

Next step was to create multiple wireframes to flush out the idea into low fidelity mockups. For that I created three different mockups Sunburst, Tree Map and a Tree View. The first two are shown below. Create all the needed features and interactions without any graphic element and have a discussion between Product manager and Engineering.

The first wireframe was a sunburst view. A very powerful mockup for city, buildings, floors, and departments etc. We flushed out all the potential features of the Stacking process. A Visual drag-drop was the easiest approach. I also came up with idea of a "Shelf" for shelfing all the departments which can be put back in any floors.

Wireframe Treemap View

The second mockup effort was a treemap. A advantage of treemap was that it looked similar to a building and the Building/ floor analogy can be easily understandable in that. Here is the link to all the wireframes

Visual Design Sunburst

With wireframes we had a pretty good picture of the essential interactions. The first visualization effort was a sunburst. With Sunburst view, I had some challenge visualizing and interacting with the 100's of Departments in a floor. when I finally was able to visualize it and showed to the Product team and engineering, one thing we learned was it was a bit complex although it was very powerful. It was not a good match for the non-tech savvy persona we had.

Visual Design Treemap

I put together another Visual Design with the tree map. The simplicity of the tree map was beacuse of the fact that the rectangles looked similar to a building and the floors can be individual compartment. This made a very easy to understand design for the space planners.

Animation

I also created an animation in Principal to showcase drag and drop functionality.

Conclusion

The Treemap design was a big hit. Everybody loved the design, we showed it to the customers, they get it and said, "we are dying to put our hands on that".

The next step was to create all the Design for each step of the interaction. Here is a link to all the variations of designs.

And the delivering the design specs to the Engineering team. Design specs.