PRODUCT DESIGN • DESIGN TOOLING
I helped scale and evolve
a customer data platform
by codifing empty states.
Intro
Segment is a customer data platform that collects user events from web & mobile apps and provides a complete data toolkit to all company teams.
I audited, redesigned, and codified empty states in the Segment app.
__________________________________________________________________________________________
Role: Product Designer
Team: Dylan Kim, Segment Product Design Team
Timeline: October 2020 - February 2021
___________________________________________________________________________________________
Problem
I focused on two main issues:
1. Lack of consistency
Segment is a complex product that doesn't do a lot of hand holding. This can be particularly frustrating when users reach a dead end state — they want to continue working, but are not always provided with the tools or information to do so. Moreover, the existing visuals varied from screen to screen and caused confusion.
2. Missed opportunity to build trust and expertise
Empty states are like a little glitch in the matrix — with a thoughtful approach, they can be an excellent opportunity to delight and educate.
How can we create a consistent and delightful experience when a user encounters an empty state — and scale it across a technical product?
Above, one instance of an empty state before and after the redesign. Below, additional examples of redesigned empty states.
Process
1. Audit and analyze the existing empty state experience.
2. Develop a framework to help organize my thinking and explain design decisions.
3. Diverge and go down some weird rabbit holes (one involved a curious sloth illustration).
4. Run design workshops and critiques with stakeholders.
5. Iterate. Rinse and repeat.
6. Ship small, tweak, and then scale!
6b. Realize a lot goes into a good empty state (pun intended).
Excerpts from the empty state audit and framework I developed to organize empty state thinking.
Initial explorations
My initial explorations ran the gamut from playful illustrations to pointed in-product education.
In order to refine and focus, I solicited feedback from designers across the Segment app. I also organized a design workshop to generate new ideas and gain a broader perspective.
Examples of my initial designs and feedback from critique and workshop sessions.
Codifing empty states
Multiple iteration cycles with feedback from cross-disciplinary stakeholders led to the current design. These are a few features I think set us up for success.
Defined components and layout
I explicitly defined the nine possible components of the empty state, and established three main sizes that would cover the majority (with some adaptations) of empty state cases.
Put the fun in functional data
Some say Segment isn't necessarily a "fun" product. But I say, not with that attitude! I imagined empty states as a brief pause in a non-stop workday, and tried to infuse a bit of delight into the visuals and messaging. I especially enjoyed working with our engineering teammates to add winks of animation to some graphics.
In this case...literal winks! When Segment is unable to find results for a user's query, the binocular icon blinks :)
Standardize visuals
I decided to use a monochrome palette in order to clearly differentiate empty states from active content across the board, yet keep them distinct from disabled states. This approach can also be extended to other instances in the empty state family, like permission gating and health checks. I also created an icon bank for designers to quickly draw from.
Implementation
I approached implementation with detailed hand-off documenation that included:
1. Anatomy of an empty state. Explicitly defining components and base line sizes.
2. Forms of control. Translating visual design into specific inputs and outputs to maintain as much consistency as possible in development.
3. General rules. Dictating how an empty state should, and should not, look and feel.
A brief overview of the empty state hand-off documentation.
Results + Reflection
— New empty states pattern affects every pillar of Segment
— First major pattern proposal after the launch of Segment's new 2021 design system, Evergreen 6
— Streamlined design and development of empty states across all departments
While I was working on this project, Segment was at an interesting growth stage. It was well on its way to becoming a world class, standard-setting customer data platform, and its future was, and is, very bright.
However, while the function Segment provides is worth its weight in gold, it's still a complex product that doesn't do a lot of hand-holding. This means that user experience can be a few steps behind product function. Establishing expected, consistent, and sometimes even delightful behavior across all areas of the app, like empty states, can make the difference between a product customers need to use, and actually want to use.
"Tess has been instrumental in leading the redesign of our empty states pattern, which is in the process of being rolled out across the app. Her efforts have transformed a once inconsistent, and admittedly unhelpful element, into one that is thoughtful, scalable, and rather charming. I’ve been continually impressed by Tess’s collaborative nature, carefully considered process, and meticulous attention to detail, all of which, she has directed towards making our empty states work and feel whole."
