While companies typically map out their company structure, for many working in project teams or matrixed organizations, work is no longer hierarchical or siloed. What we saw, and continue to see, was that goals were accomplished by cross-functional teams, each providing their expertise. We had an opportunity to help companies map out how work was actually being done within their organizations.
Design principles
– Enables users to visually see how they are connected to others via goals
– Supports users with few goals as well as users with large goals
– Enables users to see multiple levels at once
First round of wireframes
The team selected from a variety of potential use cases to focus on one value: transparency. Enabling anybody in the company to be able to browse and explore goals within the system provides an unprecedented levels of support and transparency. 
At BetterWorks, we embed Goal Science into our product, and a core pillar is support. A supportive company is a powerful company, but true support can only happen in a transparent environment. We believe that it would be easier to discover and connect to goals if they were visually available. Connecting goals would allow progress to flow from goal to goal. If we could make discoverability and consumption of goals easier, both vertically and horizontally,  we could help users easily jump to other groups.
Second round of wireframes
This time, the obstacles faced were more “design challenges” related to the platform. We had some goals that had 2 or 3 branches at the nodes. On the other end, we had a users with over 50+ branches. The designs of the goals would burst at the edges. We began to introduce constraints.
Constraint 1: Limit View
My PM and I experimented by adding a bunch of different constraints to the problem. For example, what would happen if we designed for the mobile only? While it may have made sense for a mobile device, it required too much clicking and didn’t maximize the available space. 
When we reduced interactions by locking  down horizontal movement, we realized that asking the user to interact with X / Y caused too much friction because users weren’t familiar with goals. Additionally, in an OKR model, goals cascade as they are broken down to smaller objective work units. A vertical view could show how a contributor connected up or help the top navigation trace from apex to leaf.
Constraint 2: Limit Pixels
While the early design worked, we were spending a lot of visual space showcasing goal clusters.  In his 1983 book, The Visual Display of Quantitative Data, Edward Tufte said
"A large share of ink on a graphic should present data-information, the ink changing as the data changes. Data-ink is the non-erasable core of a graphic, the non-redundant ink arranged in response to variation in the numbers represented."
The idea that we asked ourselves here was how could we be more stingy with our pixels? In other words, what visual fat could we cut to leave just protein?
Constraint 3: Limit Rules
The second constraint was to reduce how we treated linkages vis-a-vis the line. Showing connectedness was really hard as things kept getting lost. We tried special casing to try to reduce the clutter. We finally introduced the idea of simple rules. This lead us to the breakthrough came when we came up with the concept of a “spine” that cut through all goals. A simple line down the middle solved balance, scalability, and provided a solid structure for showing alignment of goals.
Interaction design
Final design
The team
Product manager – Vince Huang
Product design – Randall Hom
Back to Top