With Substantial’s office currently under construction as we expand to the full floor of our building, there’s a lot of intention going into making our new space a remarkable experience that reflects our values and culture. Hot on the heels of a challenging project, our team (2 dev, 2 designers & an engagement manager) took a few days to pause and reflect, then we were soon ready to dive into something fun and creative where we could play around and experiment with some fresh ideas. Our mission: make a working prototype that shows off Substantial’s capabilities and creativity to excite visitors to our office and give them a sense of who we are.

Niko, one of our designers, brought a fantastic book on short-term prototyping strategy into the mix - Sprint by Jake Knapp & folks from Google Ventures - and lead us in adopting this format. We looked at the week ahead and planned our days to follow the Sprint prototyping journey.

Design Sprint Map

After a project kick-off meeting to get the lowdown on our challenge and a tour of where our creation would live in the new space, we headed out for a long lunch and brainstorm session. Ideas always flow better with a pile of tortilla chips in front of you, right?

We wrapped up the day with a productive “How Might We…?” session which is a great process to stay broad and in the inquiry of what’s possible. Collectively we aligned on what felt most important to our design challenge: making something whimsical and useful, and making something that our own employees would engage with regularly.

Our homework was to come prepared for a show & tell the next morning on ideas that inspire us. Cue lots of Google and Pinterest searches…

Design Sprint Sketch

Starting off the day with “Lightning Demos” was a great way to get things flowing creatively. From the videos and images everyone shared, themes started to emerge - ideas about how to translate our company’s unique culture, interactive elements, light and sound projection, informative & intuitive dashboard experiences, and the concepts between private and public domain.

Jumping into sketching ideas on paper was the next part of the flow – so the day continued with us working together, but independently, in order to get the most ideas worked out. Before lunch we did a “Crazy 8s” exercise where you take one idea and draw 8 different variations of it on a piece of paper. With the tight time constraint of 1 minute per square, you have to rapidly iterate on ideas and explore different avenues quickly.

Next up was storyboarding - we got 3 index cards each to tell a more in-depth story of our favorite idea. It’s so great to get non-designers drawing pictures! It was really fun to feel everyone stretching their creative muscles and get into storytelling mode. At this point we had 5 solid ideas in front of us, with the “big ideas” highlighted for each experience.

Design Sprint Decide

With our storyboards presented as a gallery in front of us, we did a round of critiquing to surface elements what we liked about each one. We wanted to come to a decision on a direction sooner than later so we could move forward! Donte, our VP of Culture, was the perfect representative to make the final call. After we had a chance to review the storyboards and vote on the elements we liked best, Donte came in with his “super delegate” votes and made his selection.

So which won?

Design Sprints

Sum of Us & Them (described later) was the concept we went with because the visual presentation was really appealing and it carried over some concepts we liked from other experiences. It also felt like it had the capacity to evolve depending what kind of data we wanted to explore.

Breaking down the idea into the first pieces we could work on was a revealing process where we distinguished some of the core details of the experience - the visual environment, displaying data in both an active and passive state, and ensuring the information was useful. With the general pieces in front of us, we were able to create some initial stories in a Trello backlog, Brit made us some design assets to play with, and we discussed our technical options so we could get started with building.

The name of the project quickly shifted to SubVerse, as in, the Substantial universe. An array of dots of various sizes representing different projects live in a field that also includes our logo, activated when commits are made to GitHub. When no commits are being made, a passive state triggers other dots representing past projects to come forward.

Design Sprint Prototype

This is where it gets real…and where we had to make progress with the constraints of time and technology we chose. We decided on building in webGL with the javascript 2D rendering engine pixi.js. It was the fastest to do it in javascript since it’s something we’re familiar with - probably a little overkill for a prototype but it was a way to keep everyone involved. We realize designers could have gotten the idea across in AfterEffects and faked a video of the experience but part of our challenge was to make something that could be maintained going forward. Knowing we were going to get to pass this off to another team made us think about the long haul and setting this up like a real product.

Lucky us, we found out we had a couple of extra days to play with the project so we knew we could spend all day Thursday & Friday building. We had Donte check back in and give us some initial feedback - it was good to feel the enthusiasm and pull to develop it further. We were still focused on the basics and wanted to get the behavior of all the different elements right.

By the end of the day on Friday we had a working prototype, and had identified another team we could crossfade with and fully hand it off to for further development. We made a plan to start the week together validating our idea with our peers.

Design Sprint Test

We all found the testing part of the project really juicy and completely needed in order to feel the completion of the sprint cycle. Mike set up the prototype on a webpage for us to use, and Heather, a fellow engagement manager, and I spent an hour on Monday and Tuesday conducting quick interviews with dev, designers & other employees of Substantial. After the first round, we made some adjustments to our setup. We put the prototype on a large touchscreen monitor instead of a laptop, and we set up in a conference room with video chat so the rest of the team could silently observe.

The dominant themes after our team synthesized all the feedback were:

  • Pacing - people wanted more time to read the details that were popping up
  • Feelings - people said it was dreamy, intriguing, sparked curiosity, technical feeling
  • Interactivity - this thing wants me to touch it!
  • Purpose - this shows we are building things but why should I care?
  • Detail - some details were more meaningful to some than others

As we prepare to take the prototype to our executive team for the next iteration, we’ll need to decide whether this is meant to be a more passive or interactive experience, what the core story we are trying to tell is, and ultimately what is the most valuable thing to invest more time in to bring this to fruition.

SubVerse in Action

A screen capture of the SubVerse prototype in action. Each dot represents a Substantial project, and information about that project appears to provide more context, describing the platform, services we provided, and a list of contributors. Next areas of exploration include interactivity, what sort of information to display, and researching the path to production.