Empty States UI

In this project, I undertook the challenge of auditing, designing, and implementing empty states within a digital product to enhance user experience. Empty states occur when a user encounters a screen without content, and these states need to be intuitive, instructive, and visually consistent to maintain usability. My approach involved research, iteration, and collaboration to create a scalable design solution.

My Role: UI Designer

Team: Solo project within a team of 6 Product Designers

Year
2019

Client
mtribes

Problem Statement

Prior to my work, the product’s empty states lacked consistency, clear guidance, and a cohesive visual identity. Some states were actionable, some required instruction, and others simply reassured users that the system was working as intended. Without a structured design approach, users could become confused or disengaged when encountering an empty state.

Research and Audit

I started by conducting an audit of all existing empty states across the product. I categorized them into three types:

  • Actionable States: Screens that required user input to populate.

  • Instructional States: Screens that guided users on how to proceed.

  • Non-Actionable States: Screens that reassured users but did not require action.

To further refine the design approach, I conducted research on best practices for empty state design across various digital products. I found that effective empty states often incorporate clear instructions, minimal distractions, and a visually appealing yet unobtrusive design.

Design Process

Actionable States

These states were already implemented across the product but lacked consistency. My task was to standardize their styling while ensuring they remained effective. I developed a unified style guide that categorized and structured these states, improving their visual coherence.

Instructional States

For instructional states, I researched how empty states were represented across the web and found two main types of actions: either a directive or a stylistic representation of the required action. I decided on the latter and experimented with different levels of realism for illustrations;

High Realism

UI elements were directly embedded to show users what to do and where to do it. However, this approach was too distracting drawing the user’s attention away from the real, actionable CTA’s.

Minimalism

Highly simplified illustrations to reduce distractions. However these lacked sufficient clarity for users.

Balanced Approach

A middle ground that used abstracted UI elements resembling thumbnails found across the site. This “sweet spot” was the most effective, as it provided enough detail for guidance without overwhelming users.

Additionally, I refined the background shape from a harsh circle to a more organic ‘squircle’ to improve visual warmth and integration within different screen layouts.

Colour and Visual Style

Given mtribes brand and design system adopts a flat design with pops of colour using gradients, I initially explored using the primary purple and secondary blue and grey brand colours and splitting these into shades giving consistent monochromatic palettes for each type. I also explored a more colourful state with a variety of shades across the palettes to reflect the actual UI.

First round Findings

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 States 

Since these states did not require user input, I adopted a more abstract illustrative approach inspired by existing onboarding and marketing visuals. These states were used as a reassurance that things were working but that more data was needed. I chose a similar style of humans/users interacting with the product but with more static and less detailed illustrations.


Simplifying

  • However the illustrations felt too similar to the onboarding illustrations so I ensured alignment with instructional empty states by using the same grayscale palette and a minimalistic style, removing unnecessary gradients and elements that could increase cognitive load.

  • Each illustration was styled to give context to the empty state.

Implementation and Guidelines

I presented a few options for each type to key stakeholders and based on feedback implemented the empty states into the relevant screens. To ensure a seamless implementation, and avoid some states taking up entire screens and others needing to be nested, I established spacing and sizing rules for both non-actionable and instructional empty states:

  • Maximum height of 150px for consistency across different screens with the option of text and a CTA below.

  • This maximum height would also apply to spaces allowing for a height exceeding 150px with the empty state centred within the remaining state.

  • Padding of 24px (top) and 32px (bottom) for proper spacing based on the height of the container.

  • Illustration sizing based on remaining space in the container to maintain proportionality.

  • Text positioned 16px from the illustration to maintain readability as opposed to 24 due to there being a smaller container.

I documented these specifications in the design system (for designers) and added them to the Zeplin document (for developers) so they could be referenced when implementing the designs.  The spec sheet shown can be enlarged for viewing.

Final Refinements & Development Handoff

Impact & Results

Established a cohesive and scalable design for empty states in the mtribes design system.

Reduced user confusion by providing clear instructional guidance.

Improved product brand consistency and usability through refined color and illustration choices.

Ensured seamless developer handoff with detailed spec sheets.

Key Takeaways

Through this project, I developed a deeper understanding of:

Designing within system constraints while maintaining consistency.

Balancing aesthetics with functionality to enhance usability.

Collaboration between design and development for successful implementation.

The importance of user guidance in reducing friction within digital experiences.

Final Thoughts

By structuring and refining empty states, I contributed to a more intuitive and engaging user experience. This case study showcases my ability to conduct research, iterate on designs, and implement scalable solutions that align with business goals and user needs.

Final Deliverables:

Audit of empty states, updated designs in product design system, annotated UI designs and empty states spec sheets for developer handoff