Case Study: Making UI Patterns
Here are the steps I took to design patterns for panels and empty states. I've also documented the steps we took to "sell" our work to the larger organization.
Here are four examples of panels I collected during an initial audit. Some were contextual, some weren't. Some appeared at left of the view, and others at right. Different controls did similar things, such as using either a dropdown menu or a toggle button to switch between panel types.
Our working wall
In the audit, I documented 49 different panels by pinning them up onto a wall. I met with designers who owned a given feature set to understand how each one was used, making notes right on the wall.
Once I understood each panel example I found, I catalogued them in a spreadsheet, grouping similar ones together.
The final pattern
After regrouping, themes emerged. From these themes, I developed a pattern that proposed two panel archetypes: the "Design" panel and the "Details" panel. Both archetypes were contextual based on user selection. The difference between the two is that one enables a user to consume and maintain object properties. The other enables a user to add and edit object properties.
Every panel has a set structure so there's consistency between panel types and from view to view.
After: the "Details" panel
Three examples of the "Details" panel using the pattern. Each one must start with the object name (that the user has selected) followed by meta data and property information.
After: the "Design" panel
The "Design" panel has controls that enable a user to add and edit object properties. In the examples shown, one can build a chart, add or remove data members, or format a "Story".
The "Design" panel in context
The user has opened an empty "story". (A "story" is place where you can build out charts based on a data source.) The "Design" panel opens automatically with options to format the story.
A "Design" panel for building Charts
As soon as the user has added an object to the Story — in this case a an empty Chart — the "Design" panel changes with options to build out the chart.
Toggling between panels
A user can toggle between the "Design" panel and the "Details" panel. In this example, the user has opened the "Details" panel. It shows properties of the empty chart currently selected.
Navigating objects within a panel
The user can navigate the hierarchy of objects in a "Story" by clicking on the breadcrumb navigation at the top of the "Details" panel . In this case, they can go back to the "Story". The panel would update to show "Story" properties.
I also looked at empty states: the places where the user has yet to add their content. An empty state can either be in a first-time experience — when the tool is new — or when the user has opted to clear everything.
How empty states looked before
I found a lot of blank spaces when I did an audit.
Cataloging all of the blanks spaces
Like the "panel" audit, I collected all of the blank spaces I found in the application and noted them in a spreadsheet. This action, while tedious, helped me to get a good overview.
Categorizing empty states
Once I had completed my audit, it was simple to draw where empty states could be throughout the application with birds-eye user flows.
The final pattern
Here's the final pattern that could be used for any empty state that needed a full-screen view. I included suggestions for content and structure as well as the visual design.
An example of an empty "Model"
In SAP Business Objects Cloud, a "Model" is set of rules that can shape data. Here, a user can begin to create their "Model" in one of three ways.
The four of us that worked on the UI pattern library thought it was important to broadcast its value to the organization.
Adding value for our audience
In our marketing efforts, we emphasized the value of using the patterns to our audience: developers and designers.
Sell sell sell :-)
Lots and lots of talking
We set-up a booth and presented at all-hands meetings. We presented to anyone who'd listen. The site gets about 40 unique visits a day which is great considering the audience is about 500.