Case Study: From Confusion to Satisfaction — Using Microcopy to Improve the User Experience on an Empty State

I improved user satisfaction and unlocked the business potential of a digital signature mobile app by changing the microcopy on an empty state.

Background

Empty states are screens or pages that appear in a mobile or web application when there is no data or content to show the user. These states are frequently overlooked by designers and product teams, despite the fact that they have the potential to have a significant impact on user satisfaction and business outcomes.

examples of empty states on website

Empty states are typically displayed when the user has not yet interacted with the app, has searched for something but no results to display, or does not have access to something. In this case, new Privy app users do not have access to their perks feature.

Process and Solution

The original empty state encountered by the user when they first signed up for the app and browsed the personal data section. The copy is clear and concise, but it is still unhelpful. It simply showed an image and the message “You currently have no perks.”

empty state in the perks section

I saw the potential impact of improving this empty state and began a redesign. First, I conducted some background research on the company, its vision, its products, and the “perks” feature mentioned on the page. After understanding the product from a business standpoint, it is clear that the perks feature has the potential to generate revenue and improve the user experience.

I discovered two user needs regarding the feature on the brainstorming phase, that the information on the original page does not address: 1. Information on the perks 2. How to improve the perks. This realization gave me an idea for how to create the flow later on.

The main issue now is the copy. I want to make a cohesive copy, so I learned the copy from the original app and applied the copy that I believe is more appropriate for this empty state. The original tone is more serious than whimsical, and it is more informative and direct. I decided to stick with the same tone. Following that, I created a microcopy canvas to complete the microcopy.

Microcopy canvas that helps me completing the microcopy

Aaand, here’s the final result:

I changed the copy to make it clearer what the user can do, and I added two buttons to make it easier for the user to do the action. It is now easier to upgrade users’ perks by going to the perks information page

User Testing

I invited 5 people to the user testing interview; three of them are HRGA employees, which I believe corresponds to one of the app’s user personas. In this testing, I used the A/B testing method and asked them to try both the original and my design.

The Result

User satisfaction and business outcomes improved significantly as a result of the new empty state design. Users who saw the new empty state were more likely to upgrade their benefits. The time it takes to click the CTA (upgrade button) and the error rate have both decreased, indicating that users can navigate the app more easily.

the new design shows improvements from all aspects

Overall, the redesigned empty state demonstrated the potential of small UX improvements to drive substantial business benefits. By prioritizing the often-overlooked empty state, the product team should be able to provide a more engaging and effective user experience.

Disclaimer

This UI/UX study case is a mock-up project. In this study, I am not representing the company (Privy).

Logo, colors, some icons and illustrations on the UI belong to the right owner (Privy)

Picture and illustration credits: freepik.com, flaticon.

Tools used: Figma

…

There are a lot of details that I spare from you in this article because of some limitations. If you want to know more, or just want to study UI/UX together, feel free to reach my mail here: jejen.foruiux@gmail.com