Blocks Edit visual CMS

Visual CMS for marketing emails and landing pages, with inline content editing, collaboration features, and integrations

Lead design efforts, including interface design and flow and making product decisions based on customer feedback.

  • Translating customer pain points into features
  • Interface design for a dashboard, inline editor, and panels
  • Maintaining core structure while adding and enhancing functionality
  • Developing user flows for integrations setup
  • Writing documentation around featureset

Retrospective

The idea came out of a need from the agency to make it easier for their clients to review the custom email designs the agency built for them. I lead design efforts, including interface design and making product decisions. My starting point was utilizing an internal agency practice of building templates from reusable components for their email designs, and came up with an editor that allowed for components to be constructed visually.

Inline editing

The core content editing would involve interacting with elements directly, so once a user dragged in a component, they would be able to click on its content and modify it inline. Text would be edited in place with no extra panels needed. In order to figure out exactly how this would work — and if it worked at all — a developer and I decided to put together an interactive prototype as soon as possible to learn from with hands on testing.

We came up with a model that felt intuitive: a hover state would show what can be edited, clicking would allow editing the text and show formatting options above the text region. Other elements like images would also show options available to them when clicked on. This would be the heart of the editing experience that we would build from with more advanced options. Prototyping early also helped with figuring out how to focus and reduce interface options to avoid cluttering the experience.

Editing setup

The way editing worked is conceptually similar to setting up a content management system where a theme would be designed and coded and then implemented for others to use through point-and-click editing. Because email requires specialized code, it was also important to keep the custom component code intact through the editing process.

I was able to greatly streamline the standard CMS implementation process by reducing the theme to a single HTML file made of components. Editing features would be enabled by only requiring HTML classes and attributes to be added around HTML dom elements to define what pieces should be editable and how. This simple model worked with any kind of design and was very quick to implement. It also included purposeful limits so the user would not be able to deviate from the design by changing things like colors or fonts.

I later designed a visual theme editor for adding this functionality by highlighting HTML elements to click on to automatically add the tags in the code. This allowed switching seamlessly between working with the visual editor and their code for more complex functionality.

Collaboration features

The more users started using the editor, the more we learned about how they wanted to work with their team. We already had the ability for multiple users to go into the team's account to edit content, but additional workflow needs would surface over time that we soon added features for, including:

  • Integrations - the ability to connect to other tools and platforms via an API. For example, they could export out images to a CDN, or their web host via FTP. Or, directly export to certain email platforms. Or, connect to their single sign-on provider. Integrations were made to be flexible for mixing and matching as they would work with a variety of asset sources and platforms and for many teams served as a final piece to a complete content production workflow.
  • Revision history - in the form of a sidebar on the right, dedicated to keeping a log of changes made to content. Each time someone made updates and clicked the save button to confirm their changes, a new revision state would get added. Users could then view a previous state and decide whether they wanted to restore it.
  • Commenting - the revision history sidebar evolved into an activity panel and we decided comments would also be a good fit, for users to see when comments were made in-between edit states.
  • External commenting - we later added the ability to allow comments to be made by anyone who wasn't signed up as a user, via a preview link that they were sent. This came out a request from users who had external team members that only needed to review an email and provide feedback.
  • Checklist - a list of reminders for what needed to be reviewed in an email before sending out. This was common practice among teams who had their own set of guidelines for what campaigns required. An item checked would be logged in the activity sidebar, with who checked it off and when.
  • Layouts - allowed for saving a group of components as a reusable template when starting new emails. The feature was used pretty frequently, along with the dashboard option to duplicate a previous email to start from.
  • Content pinning - the ability to save certain components to be reused across emails. This became a heavily utilized feature for some teams.

We went from clients that the agency brought in to use the editor, to having the product exposed to teams from organizations like AAA, DICK'S Sporting Goods, CorePower Yoga, College Futures Foundation, and Massage Envy. And the product had strong retention. Once a team of users started building emails, more and more of their team members would join in!