Design & Code Editor

“Your visual designer editor of templates screws with my html/css. I open a template and do nothing, and when i save it it changes stuff, i have to keep a copy of my code and paste it on the code section every time just to prevent you from fucking up my designs. -- SendGrid Customer "

Problem Statement

As an email marketer wearing many hats, when I need to make simple edits to my email's code, I toggle back and forth between the HTML and the drag and drop design editor, so I can check my work and make sure that the changes I am making look good in the design editor. Currently, when I toggle back and forth, the HTML breaks and my email looks all messed up. I like using the HTML to edit and the design editor in order to preview the email changes I made to the HTML.

Toggling back and forth between the Design Editor and the Code Editor caused unexpected changes to the underlying HTML.

SendGrid's old editor included a toggle switch that allowed users to bounce back and forth freely between code editor and design editor mode. This switch would unfortunately break the HTML. Speaking with customers during a research phase revealed that they wanted the two experiences split apart so that their HTML would not be altered by our editor by mistake.



Learn Phase

Persona's are very important during the learn phase. They help keep the team focused on solving an accute problem for a specific persona, as opposed to trying to boil the ocean.


Old Email Editor

Old Editor

Problem Validation Phase

My team and I interviewed customers that matched the Olivia persona. We conducted over 10 customer interviews via Google Hangouts. In addition, we ran surveys to collect qualitative data and used feedback gathered from our in-app feedback tool, Webengage, to better understand the problem. By keeping the user at the center of the process, we are able to focus on digging into the problem that our customers actually experience. Then, the solution phase can begin because we understand the problem we are solving.

Solution Validation Phase

I start the solution phase by whiteboarding concepts with my team. This may include other designers, developers, product managers and marketers. This allows for a lot of ideas to be generated quickly and great conversation and debate occurs during the whiteboard sessions as well. From here, I will take the initial sketches and either further sketch them out on paper or jump into Sketch and begin wireframing lo-fidelity designs. I use Invision to create lo-fidelity prototypes. After the prototype is created, I begin recruiting for usability interviews. I usually test 2-3 different design directions and gather qualitative feedback. Based on the initial round of testing, I will take the feedback and create a hi-fidelity visual design using Sketch and Invision. I recruit more customers and test the hi-fidelity design with more customers that match the Olivia persona. This process ensures that once the designs are ready for developers to begin building, that we have a great MVP that customers love and value.

Code Editor Wires

New Design Editor

Design Editor Hero

New Code Editor

During our interviews in both the problem and solution validation phase, customers kept asking for a side by side view of editing code and previewing the email. The old code editor did not have this feature. You had to write your code and then click "Preview" to view the email. This was very frustrating to our customers. Although the project did not originally include this in the scope of anticipated work, it was deemed important enough to include in our Beta phase as we rolled out the new editing experience. Customers were thrilled to have the new code editor.

Code Editor

One of the coolest, most helpful features built in the new code editor allowed users to click anywhere in the email preview and the related section in code would be highlighted and scroll into view. See the demo above.

Build Phase

My prefered method for working with developers is to communicate and collaborate a lot, especially during the initial handoff. I set up meetings to review designs with engineering early on, this way technical limitations can be addressed earlier in the process and also allows engineering the time they need to figure out a techincal solution. SendGrid uses a style guide and UI Componment library in React.js, allowing for a more consistent experience across the app. This also means less annotations on the designs. I still add some light weight annotations to help guide the developers to the right style guide components and also to address any gaps with the custom css and style guide components.