Modernising the Content Editor: Revamping with Atomic Blocks

As a Senior UX/UI Designer I worked with a team of developers, a PM, QA, and a UX researcher. My role involved UX strategy, UI design, data analysis, customer interviews, wireframing, Figma prototyping, and live product user testing.

The images presented highlight the transformation from the original editor to the final result after implementing various changes, including the adoption of the atomic block approach, integration of a contextual sidebar, message lifecycle-based navigation, and the application of a new design system (which I also spearheaded and can be explored further in my portfolio).

Now, let's dive deeper into the rationale behind these proposed changes and how I collaborated with the developers and product team to bring them to life.

In order to revamp the content editor at SnapComms and address its existing issues, a comprehensive user research phase was conducted. The primary objective was to gain deep insights into the current pain points and challenges users were facing while using the editor. By employing various user research methodologies, including interviews, surveys, and usability testing, valuable data was collected to inform the design process.

Together with an in-house UX Researcher, we were looking for experienced SnapComms users who regularly publish content using our platform and have used the content designer at least once. We were able to target those specific people (thanks to Pendo) with a custom invitation message directly in the product, with a direct Zoom call booking link via Calendly.

The final script had a total of 10 assumptions to be tested. This was done using 17 questions, some of which could be skipped, and some that allowed the interviewer to dig deeper with the help of a semi-structured format - depending on how the interview goes. Most questions were focused on defining the primary goals of using Content Designer, and what business problems it helps (or fails) to address.

During the interviews, we asked customers to demonstrate a few content examples for their content and to perform several editing actions to test some assumptions about how the editor is being used.

Atomic blocks allow users to create messages using pre-defined components that can be easily customized. Based on customer interviews, I found that many SnapComms users were already familiar with atomic blocks, making it a suitable choice for our revamped content editor.

Each atomic block offered granular customization options, including background, padding, alignment, device visibility, typography settings, and button specifications. This allowed users to tailor each content section to their specific needs.

After a step-by-step UX testing script was created for an interactive prototype I came back to some of the participants of the original interviews. I also recruited more testers for this - both new users and some existing SnapComms users using data from Pendo - screening for an active cohort of Content Designer users.

Some polishing has been done based on customers' feedback - some atomic block categories have been renamed, the icons redesigned, and some tabs were renamed.

Having an accessible and comprehensive Figma prototype that demonstrated the high-end concept of the product changes proved immensely beneficial for both stakeholders and developers. It facilitated important discussions with front-end developers on the limitations of this approach and helped kickstart the necessary preparations early.

In the suggested content editor, I proposed separating message content from design using a sidebar layout, following a similar abstraction approach used in web design apps and headless CMS. It allows content creators to focus solely on crafting compelling and engaging messages without being constrained by design considerations.

Decoupling content and design also enabled developers to create more extensive customization options for individual elements such as titles, text labels or buttons, with the knowledge that these same elements would be reused in other atomic structures.

After conducting interviews with SnapComms paying customers and collaborating with the UX researcher, I proposed a revised navigation approach for the content editor, taking into account the life cycle of a message. The original product had scattered features across different areas, making it inconvenient for users to access specific functionalities.

Collaborating closely with the Chief Product Officer, we created a roadmap for the transition towards an atomic block structure. This endeavour was a substantial undertaking for our developers, but we strategically divided it into multiple milestones.

The initial milestone focused on additional validation, wherein we created custom templates based on atomic blocks, seeking feedback from existing customers and securing their buy-in for the forthcoming changes. Subsequent milestones centered around transforming existing elements like text and images into more customizable atomic versions and implementing a contextual sidebar for editing.

These iterative milestones allowed us to validate the concept of the contextual sidebar with live users and gain invaluable insights before committing to the extensive rebuilding of the existing product. As the transition was planned over an extended period, the subsequent milestones aimed to introduce more custom widgets, foster deep integration with other products within the Everbridge suite, and provide additional atomic blocks categories for users who had become more comfortable with the new editor.

By adopting atomic concepts widely used in the design community and tailoring them to SnapComms' specific requirements, we have empowered users to create highly customizable messages with ease.

The implementation of a significant portion of the work has led to a noticeable (33%) decrease in support load, a significant increase in trial conversions, and a streamlined content creation process for our users.

This pivotal moment for our product sets the stage for deeper integration within the broader Everbridge suite. Following Everbridge, Inc.'s acquisition of SnapComms in 2020, our product's success has laid the foundation for seamless integration and expanded capabilities within the Everbridge ecosystem.

As a direct result of this project, our company has recognized the immense value of prioritizing customer experience research as an integral part of our software development process. By continually collecting and analyzing feedback on the content editor, we can gather valuable insights that drive ongoing product development and ensure that future iterations align with our users' evolving needs and expectations.