Weave

Serious games for solving wicked problems, collaboratively and at scale.

Client

Conteneo

Role

Design Lead

  • User Research
  • UX Design
  • UI Design
  • Visual Design

Project Overview

Conteneo hired me to redesign their flagship software in the cloud that harnesses visual frameworks for decision making and collaboration among agile product teams.

The two pieces of software. one for playing serious games, and one for managing them, were redesigned from the ground up with its users.

Challenges

Uninspired gameplay

Conteneo's original software had some very apparent issues after watching people, novices and experts, play games on it:

  • first time users didn't know what was going on or what they should do
  • people wanted to know who was in the game with them
  • even veteran users had trouble making their own frameworks

Unintuitive controls and opaque IA

The dashboard, where users managed their games and other assets, was even worse off. Through observing users fumble around the platform looking for their games, and through learnings from a customer-attended Design Jam, we saw and heard complaints of:

  • people not being able to find their games
  • veteran users relying on recall when figuring out how to use the system
  • first time users not knowing where to start

The Process

Learning mental models

I started the design of Weave with questions:

  • Who are our users and what do they need Weave for?
  • How are they using the MVP? Where are they having troubles?
  • Are there any easy wins we could find on their wishlist?
  • How do they imagine their assets organized in Weave?
  • Imagine Weave were a house: what rooms would be inside?

Joel pointing out problem areas in the MVP

Making feature requests for Weave

Explaining their card sort

How Weave is imagined as a physical space

Turning research into a user storymap

Taking what we had learned and what Conteneo's goals were with the redesign, the PM and I fleshed out how to bring the two together and put it all on the wall, in the context of a user (1) finding out about Weave, (2) signing up for a trial and trying it out, (3) bringing their team on board with them, (4) and how they might solve a problem collaboratively.

Using our primary persona of a Scrum Master, we mapped out what we it would look like to convert them to a subscriber from a trial user, and how to keep them engaged with the platform once they were converted.

To establish an editable source of truth for the whole team and, I digitized the storymap and put it on our team's Google Docs drive. To this day, Conteneo is knocking stories off the map and using it to guide their feature development.

Testing assumptions

While gathering feature requests and hearing pain points can lead to the right road, it won't always guide you down it.

After interpreting what our users asked for and told use about their experience, I designed an interactive prototype in Keynote to test some of the ideas the team and I had. We asked a handful of our power users to come in to try it out while we observed use the prototype.

Framework Creation Prototype

Getting users onboard

To cross check out user storymap and make sure we didn't have any blind spots, take a shot at stitching together the flow for onboarding, and build out some of the user engagement implementations (such as new feature emails) we were planning, I quickly built a prototype using old assets and some new wireframes we had worked on.

A new way to find assets

One of the biggest problems had with the MVP was finding your assets. Whether it was a game you just completed today, one you and your team wanted to go over the results of from a month ago, or one you scheduled for next week, they were sometimes seemingly impossible to track down.

This was because everything was organized in a "project-down" hierarchy. Projects contained frameworks, and frameworks contained individual games. If you forgot what project or framework your game was in, you were outta luck.

I redesigned everything to "live" at the same level, and everything had its own "homepage".

Establishing structure

While I was designing the components that would ultimately drive Weave, we had to devise how they would fit into the different pages they would exist in. To do this, I blocked out spaces in the header for different elements, and laid out a finite number of page layouts where this repeated header would exist.

While I would love to be able to say I established a design system for Weave, I think I came up short. Due to time constraints and a lack of wherewithal, I worked on what was needed at the time. If I had the chance to go back in time, I would spend more time defining the components and layouts of Weave to make a more cohesive and defined design system.

Components! Re-usable components!

Now that Weave's design offered some room to grow and we had a slew of features to implement in the backlog (ahem, story-map-log), we needed to devise a way to to do so that would be sustainable on a large, complex, and diverse platform with a team of three engineers and one designer.

Reusable components were the answer. That way, the user flows and user interfaces of different features (such as the framework card or guest list editor) could be implemented over and over with not a whole lot of repeated efforts.

To the left you'll find the user flow for the guest list component, and below is a prototype for it.

A picture may be worth a thousand words...

...but how many conversations, meetings, or debates is a prototype worth?

Quite a few I'd wager.

If I had to guess, I'd say that this is where I spent most of my time while working on Weave: creating, sharing, and iterating prototypes of different user stories and components.

Open prototype in new window

Solutions

More engaging gameplay

Who, what, where, and when
Weavers are now aware of who they're playing with and how to get more folks on board, what the objectives of the current session is and where they're placing items, and when folks entered the game and when they performed actions
Users = Creators
Thanks to the new framework creation tool, Weavers are able to create their own frameworks - not only for their enjoyment and business needs - but for other users on the platform to utilize

A new transparent IA

Flattening the heirarchy
The biggest issue with Weave was its information architecture, which led users on a loony journey when they wanted to track down one of their games.

Flattening the assets and putting them in buckets that made sense to Weavers was the answer. In addition, games, frameworks, and projects were given their own space where one can interact with and edit them.
Staying inline
Now that the landscape was flat and users could find their assets, they needed to know how to manipulate them. Refashioning the controls to exist inline, with all the actions intuitively placed exactly where the users expected them to be, increased usability not only for existing users, but brought new users onto th platform.

Praise for the Team

While the flexibility may’ve already been there, I really discovered it with Weave.


The explanation that “if it works on paper, it can be done in Weave” is a VERY powerful explanation that will make it easy to advocate for the platform."

- Director of System Development, Covance

"You’ve done a great job at making the platform easier to use, more visually interesting, easier to understand, and let’s just say:


a great user experience from novice to power user."

- Steve Wilson, Panoptika, Inc

"I recently conducted an innovation workshop with 40 employees in different locations....


...one participant said “I was dreading a 4 hour meeting on the phone. But, I was pleasantly surprised! The tools we used were fantastic! I felt so engaged. The time went by so fast.”

- Jodi Bradley, Experience Design Strategist, Cisco

"All of the navigation was so much more obvious and directly-manipulable.


As a facilitator of many of these forums, explaining how to use the forums became much, much simpler. Overall, an extremely satisfying experience to use now."

- Eric Rapin, Agile Coach, Salesforce

Conteneo was acquired by Scaled Agile, Inc. in May, 2019

Next project