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

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.
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.
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.
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.
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:
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!