Opportunity

Bluescape is a highly interactive product, which meant customers’ mental models for how the product should work was based on real-life experiences. For example, customers would drag and overlap widgets to try and create groups or templates.

Before introducing the Attach feature, customers would be frustrated in their attempts to create groupings.

Leading the end-to-end design process, my goal was to define a solution for customers to create loose groupings between widgets.

Impact

The Attach feature was a huge success, laying the groundwork for even more beneficial features like pre-made templates. Some key success indicators were:

• The most used feature: there was an overwhelmingly positive reception from our customers when the Attach feature was released, enabling them to work more efficiently and fully take advantage of Bluescape.

• User feedback, early and often: I introduced usability testing and user research into our design process, which not only proved to be pivotal for this any feature but also paved the way for including users in our design process moving forward.

• Increased collaboration: building this feature in a cross-functional working group for the first time proved to be successful, becoming the standard for future projects.

Supporting existing behavior

When I started working on this feature, the product team already had an idea on how to tackle these issues. Our initial concept of loose grouping would essentially allow users to stack assets on top of each other, while still having the ability to manipulate and edit individual objects within these groupings. 

The devil is in the details

We wanted to ensure our solution would support current behavior, so we started brainstorming based on real-world experiences.

Inspired by the real world

To get a better sense of what this interaction could feel like, I started with paper prototypes, exploring the nuances of what would feel like a natural interaction. Working in this way helped guide our design decisions and ensure what we designed would support existing behavior as much as possible

Translating physical to digital

After I had a strong understanding of desired interactions, I created animations to highlight how the feature would work. Designing within the digital space, I needed to iterate on balancing visual affordances that gave just enough information to the user.

Designing Attach

Once we finalized product and design requirements, a working group of key stakeholders was created to implement a proof of concept. Each sprint we would meet to review the current implementation, provide feedback, and update accordingly. This working model helped us catch issues and edge cases earlier to manage scope creep.

Making tradeoffs

A major point of discussion was defining an MVP that would work well with our existing product construct. With the variety of widgets customers were able to interact with, it was important to consider which widgets made sense to initially support.

Testing with users (for the first time)

Before this feature, we didn’t have a practice of conducting user research. This was largely due to the fact that a majority of Bluescape customers were in industries that require a high level of secrecy (i.e. media and entertainment)

For a feature this complex, I knew it would be important to conduct some testing before it was ready for release. So we decided that we would test this feature internally to see how usable and useful this feature was.

We were able to conduct tests using our primary form factors: our large touch screen monitors and our web application. This gave us the benefits of understanding the different interaction expectations between the form factors as well as the A/B test some feature aspects we were undecided on.

Key learnings:

• Higher learning curve: even though this feature was based on a mental model derived from the real world, seeing it in our product still took some getting used to

• Balancing visual cues: we were able to receive feedback on what was perceived as ‘too much information,’ where overcommunicating interaction states resulted in cognitive overload and confusing our users.

Takeaways

• Show, don’t tell: I really enjoyed being able to prototype at different fidelities to communicate the interaction requirements for the Attach feature, which is an effective way to communicate designs.

• You can always get user feedback: even without access to our users, we were still able to get valuable feedback to inform design decisions.

• Teamwork makes the dream work: collaboration highlights different insights and considerations that wouldn’t possibly be covered by one person, which is important for designers to define solutions with important context.