Empty state designsEmpty states are key moments in the user journey, offering opportunities to guide, inform, and engage users. This focus was on creating clear, actionable experiences through thoughtful messaging, visuals, and design patterns.
User research, information architecture, visual design, illustration, copywriting, interaction design, user flow optimization.
Key skills used:
-
Problem statement
The existing empty states were unclear and disengaging, leaving users confused about what to do next. Many of these empty states featured generic messages with no clear call to action, resulting in frustration and hindered productivity. Users often didn’t understand why they were seeing an empty state or how they could resolve the issue, leading to increased abandonment.
-
Objective
The purpose of this redesign was to transform N-able’s empty states into clear, engaging, and actionable moments that guide users through the product. By providing relevant messaging, intuitive calls to action, and visually appealing designs, the goal was to reduce user confusion, and improve task completion rates.
-
Team roles
As the lead designer, I was responsible for conceptualizing and executing the redesign of the empty states, ensuring they were visually engaging, user-friendly, and aligned with the products overall experience. I created messaging guidelines to help designers curate clear, concise, and actionable user guidance.
Project overview
For clarity and action 📝
The goal of this redesign was to transform N-able’s empty states into clear, engaging, and actionable moments that guide users through the product by curating effective messaging guidelines for other designers, enhancing visuals, and incorporating intuitive calls to action. The goal of the redesign was to reduce user confusion, boost task completion, and improve overall satisfaction.
Lead designer: Diandra Thompson
Company: N-able
(All designs and content featured in this project are the property of N-able and are used with permission for portfolio purposes only.)
Current user — manually deleted content
Image: A static, straightforward image that visually relates to the context or situation.
Title: A brief, welcoming message. Where possible, phrase it positively to encourage action, e.g., “Welcome! Start by importing data” instead of “You don’t have any data yet.”
Body: Clearly explain why the space is empty and outline the next steps to populate the space, highlighting the benefit of taking action. There are three options for presenting the primary action:
Direct users to the primary action button positioned below the copy.
Include the primary action link within the body copy (optional).
Direct users to the relevant UI element, helping them learn where to find features and how to use them in the future.
Primary CTA: The main call-to-action button or link in the body copy (optional).
Secondary CTA: If relevant, include a secondary action, such as a link to documentation or further reading, positioned below the copy.
Horizontal layout
New user — No content/data input
Image: A static, straightforward image that visually relates to the context or situation.
Title: A brief, personalized heading that acknowledges the user’s action, e.g., “You’ve deleted your data“.
Body: Clearly explain why the space is empty due to the user’s manual deletion and guide them on the next steps to repopulate the space. Highlight the benefit of taking action. There are three options for presenting the primary action:
Direct users to the primary action button positioned below the copy.
Include the primary action link within the body copy (optional).
Direct users to the relevant UI element, helping them learn where to find features and how to perform tasks in the future.
Primary CTA: The main call-to-action button or link in the body copy (optional).
Secondary CTA: If applicable, include a secondary action, such as a link to documentation or further reading, positioned below the main copy.
Vertical layout
A brief overview
of the process
01 | Original Empty State
I analyzed the current empty states to identify key issues in messaging, visuals, and user flows. This helped pinpoint areas of confusion and disengagement.
Illustration: The illustration is basic and generic, lacking emotional appeal or engagement, making the empty state feel stale and impersonal. This undermines the goal of providing clarity and motivation.
Opportunity: Modernize the illustration to align with the product’s branding and context. Use visuals that are inviting, engaging, and add personality, turning the empty state into an opportunity rather than an error.Heading: “You do not have any users” is negative and passive, focusing on what’s missing instead of what the user can do next.
Opportunity: Reframe the heading to be positive and action-oriented, such as “Get started by adding your first user” or “No users yet—let’s add one.” This encourages action and reduces frustration.Body copy: It’s too technical, jargon heavy, lacks motivation, and doesn’t highlight the benefit of adding a user, which may confuse users, especially those less familiar with the product. The mention of documentation feels secondary and impersonal.
Opportunity: Simplify the message to focus on guiding users, emphasizing the benefit of adding a user "(e.g., “Unlock full access to your Console and Cloud services”) and offering documentation as an optional resource.CTA “Add a user”: This lacks motivation and engagement. It’s functional but doesn’t encourage users to take immediate action.
Opportunity: Make the CTA more compelling by rephrasing it to be action-driven, such as “Get started” or “Add Your First User”.
02 | Exploring Ideas
I sketched concepts to explore different solutions, experimenting with layouts and visuals to guide the final design direction.
This iterative process allowed me to quickly test ideas, refine key elements, and visualize how users would interact with the empty states. By focusing on clarity and engagement, I was able to explore different approaches to design elements, ensuring that the final concept would be both intuitive and effective.
03 | Final Designs
Enhancing engagement involved using a cohesive colour palette, modern visuals, and clear messaging to guide users toward action.
The designs incorporated a bright, dynamic colour palette that aligns with the brand’s identity or design system, using both polychromatic and monochromatic elements to ensure clarity and focus. Custom, modern visuals were created to enhance the user experience, making empty states feel welcoming rather than empty or frustrating.
Additionally, I developed messaging guidelines for other designers to reference when creating their own empty state messages. These guidelines emphasize clarity, conciseness, and actionability, helping ensure that the messaging is not only on-brand but also motivates users to take the next steps with ease.
