Modernized editing

Reimagine the sign-up unit editor

When I started working at Attentive, the first thing I did was audit the content in the Subscribers tab, an overgrown area of the UI where marketers can create sign-up units—new ways for customers to sign up for emails or texts. This area of the UI had never been touched by a content strategist before. As such, my audit had a lot of "What does ____ mean?"s and "???"s, so I knew I had my work cut out for me.

Luckily, my team decided to prioritize usability improvements while I was at Attentive. The projects were iterative and I worked closely with my team's product designers to reimagine the content. Here are a few of my favorite examples.

Summary

Audience

Marketers using the Attentive platform

Challenge

Make a complicated, high-impact area of the UI more usable

Solution

Reimagine the entire content experience, from the information architecture to the error messages

‍

My process

Discover

My content audit was a great starting point for rethinking what we want to say in the Subscribers tab and how. It set a baseline for the content and served as a reference point.

Next, it was time to validate my findings. I walked through the UI with my team's product designer to understand exactly how each component works. We discussed my content audit and identified opportunities to make improvements. I also met with a Client Success Manager to find out what our customers struggle with. A few weeks later, a new product designer joined the team; her usability audit validated many of my findings and gave me new ideas.

Improve

I started off by writing a list of terms and phrases in the UI that weren't user-friendly and proposing an alternative. Along with my fellow content strategist, I met with the technical writing team to get buy-in. Then, I worked with an engineer to update the code and launch the changes.

After these initial changes were made, I worked closely with a product designer to rethink the content in each iteration of the editor redesign. We regularly collaborated in my content strategy office hours, as well as asynchronously in Figma.

Streamlined styling

There are two types of styles for sign-up units: page styles—which only live on one page, like the email page—and brand styles, which persist throughout the sign-up unit. To make this distinction clear, we separated them into two tabs.

I also renamed the components to make them more clear. My philosophy here was to call each component what it is. For example, most users don't change the default "Continue" button text, so calling it the "Continue button" makes more sense than calling it the "CTA button".

New bubble settings

One UI improvement gave users the ability to easily update the bubble (in this image, it says "GET 10% OFF"). My main focus was to ensure that the language was jargon-free and readable. Marketers also prefer when we give them guidance on what type of sign-up unit performs best, so I added a recommendation to the text.

It was also important to safeguard users from accidentally taking destructive actions. So when a user clicks the 'X' icon next to Bubble or Email, they have to confirm the action. I wrote the Attentive style guide format for confirmation modals, which I used here.

Outcome

My content updates—along with the UI improvements led by product design—were well-received by my team, internal stakeholders, and customers. Gradually, the team stopped referring to the Subscribers tab as a "hot mess." But there's still more work to be done. Before I left Attentive, I completed user research on the Subscribers tab content. Some high-profile terms (especially "sign-up unit") received overwhelmingly negative responses, validating the feedback I'd gotten from internal stakeholders. Updating these legacy terms will further elevate the UI in the future.