Empty States

Audit and matrix

I began by creating an audit of all the empty states currently existing / needed within the site, as well as what task was required to populate this empty state. I found that there were ways to group these screens under one of 3 categories. I named these Actionable, Instructional and Non-Actionable states.

Actionable states

Instructional

Research

I began researching how empty states were representing across the web and found that when there was an action that could be directly performed from that screen it was either a directive or had a stylistic representation of the action needed to be performed. I decided to take this approach with my Instructional empty states.

I experimented with 3 levels of realism for the empty states illustration.

I then took the opposite approach and created a set of hyper minimal empty states so as to not be so distracting. However this made it hard for the user to distinguish just what had to be done to populate the screen and caused more confusion. As a result I explored a middle ground similar to the style of the thumbnails around the site. This “Sweet spot” had enough detail to indicate what the user had to do but not so much as to become overwhelming.

The background circle felt too cold and harsh so I decided to change it to an abstract ‘Squircle’ by warping some of the vertices. This also allowed for greater personalisation in order to make sure it fit the content and to ensure visibility no matter what colour the background of the state.

Colour palettes
Mtribes adopts a flat design style with pops of colour using gradients. I decided to adopt the colour style of experience thumbnail images so as to fit in with the surroundings of the site. I began exploring by taking different variations. By taking the primary purple, secondary blue and grey of the main palette and splitting these into shades, I was able to have consistent monochromatic palettes for each type. I also explored a more colourful state, implementing a variety of shades across the palettes to reflect the actual UI.

I felt the colour seemed to still distract the user from the actions needed to be taken and decided the greyscale option was the way to go. However, as the grey was taken directly from the palette, there was too much overlap with the site’s backgrounds and as a result it wasn’t possible to have a consistent colour style across all backgrounds. Therefore I created an additional pallette of simple shades of pure grey. This way the empty states would not blend into the background but would also not distract the user from the action needing to be taken.

Non-actionable

For the non-actionable state we wanted to take a more abstract approach, similar to our onboarding and marketing illustrations, as there was no clear action that could be taken from this screen. These states were more to be used as a reassurance, that “yes, things were working” but they just needed more data.

I adopted a similar style to the illustrations of humans interacting with the product but more static and with a less detailed illustration.

I then felt the illustration was too similar to the on boarding illustrations. I wanted to make them distinctive and also align them with the other forms of empty states. I therefore decided to use the same greyscale palette as the Instructional empty states. I removed all gradients and used a similar style for the background content and styled each illustration to give context to the empty state.

I presented a few options for each type to key stakeholders and based on that feedback I began implementing the empty states into the relevant screens. I made each state a max height of 150px for consistency with the option of text and a CTA if necessary below it.

Spacing rules

I then encountered the issue that some of these states would take up the entire screen but others would be nested. Therefore there needed to be rules to ensure these states could be consistently scaled dependant on the size of the container the state was nested within. I based these rules on the height of the container: the empty state had to have 24px padding at the top and 32px at the bottom, the height of the illustration would then be derived by whatever space was left. The text would also be 16px from the illustration as opposed to 24 due to there being a smaller container. This would be the case for not only the non-actionable empty states but also the instructional ones. If the space allowed for a height that exceeded 150px the empty state would remain at the maximum height of 150px and centered within the remaining space. In order to accurately convey these rules to the developers and future designers I created a spec sheet that would exist in the design system (for the designers) and on the zeplin document (for the developers) so that they could be accessed should they need reference. The spec sheet is shown below:

What I Learned.

From designing this feature I learnt a number of things. I learnt how to create content in keeping with the stylistic restrictions of a design system; I exercised my analytical ability to find and predict all forms of empty states and to create a suite of empty states that served different scenarios and purposes whilt all feeling as if they were in the same family. I also learnt the importance of simplistic design and ensuring there is proper balance so that nothing deters or distracts the user from their initial purpose when coming to that screen, but rather directs and aids the user reaching their desired outcome.