Previously at STANLEY Security emails were painstakingly designed and developed through Marketo and Drupal, with the process sometimes taking over 1 month.
By creating a componentized system in Knak, an email web builder, development time was eliminated by nearly 90% and the mess of coordinating with various teams was greatly reduced.
An example of an old email design
The purpose of using Knak for codeless email creation was to greatly reduce time spent for design and development of new and existing email designs.
The internal marketers that worked with STANLEY expressed frustration in the complicated process of designing new emails, gaining approval, and beginning development in Marketo and Drupal, and felt their emails weren’t up to industry standard, with outdated designs and accessibility issues.
After starting a trial, the goal was to identify key emails to design, break down, and componentize. A design system was created in Knak, and we decided to go with Knak long term due to the creative freedom it brought as well as pain points it addressed such as greatly reduced design and development time.
.gif)
Our team decided to use the double diamond design process in our approach for our projects, including this one. Empathy is the core of user experience, and by using a human-centered approach to all stages of thinking, we deliver the best experience possible for people, including our internal stakeholders.
Before beginning to start designing new emails and redesign old ones, we decided to take a big step back and start by understanding problems to be solved, opportunities, and identify user needs and wants. This was a unique project in that we were the main users, and we needed to hear all voices involved to make sure we addressed pain points that could easily be overlooked.
Create an easily digestible email design system for all experience levels?
Identify and create the most useful email components for re-use?
Make the onboarding process not as daunting and easy to get up and running?
To begin creation of key email components, we asked our internal team as well as members of other teams to define some of the most important features and components they wanted when creating emails in Knak. We then consolidated findings to focus on three major points.
To better understand the problem space and needs of those involved, we held many sessions with different stakeholders. These were largely informal brainstorming and question and answer sessions where focus was mainly placed on their needs, wants, and current frustrations.
To begin brainstorming key components to create, we held a mood boarding session in which we each did research and compiled together in a Figjam on the most important email types as well as pulled real examples of email best practices together to use as reference. Welcome/New member, new products, promotions, surveys, news, blogs, downloads, value, and more were all included in the moodboard.
.png)
After identifying key email designs and top practices of the industry, we then sectioned off and identified what we currently have built and what we want to build, as well as going through the mood board of examples and writing key insights pulled from each design as well as patterns and bits of inspiration.
During this phase, we took all of our research and identified user needs and turned them into a conquerable problem with key insights to be focused on. The concise key problem we focused on was: Email marketers find the process for designing and developing emails too time consuming and inefficient.
Emails took too long to create, which hindered progress and creativity (1+ month on average)
A 3rd party was required for development previously, which increased cost and time
Teams across the larger organization weren't doing everything in one place
Since all templates created had to be developed, they weren't flexible and able to be changed quickly
Due to lack of flexibility, time, and cost, templates created were behind industry standards
Lack of templates and guidelines, led to frustration, inconsistency, and accessibility issues
To best understand the pre-existing procedure for designing and developing emails, we held a collaborative session with internal stakeholders in which we learned their process and areas they experienced frustration. From this we pulled out important highlights to focus on and dubbed this the “pre-Knak process.” This then led to the creation of the ideal post Knak process.
After clearly defining our problem statement and identifying key areas to focus on, we then created a presentation to all stakeholders involved showing them our process, thoughts, and tentative next steps for feedback.
In this phase, we took the research findings and important insights to approach designs that would best fit our componentized approach for re-use. This phase included lots of collaboration and iteration as we wanted to have a strong foundation with approval before proceeding further.
After having in place key email designs for reference, we then used Figjam to hold a crazy 8 session in which we created a wide variety of sketches and ideas for each, compared and talked through our ideas, and ultimately decided on which to pursue further.
After better sketching out the ideas that we voted on for each email component category, we then divvied them up and focused on creating low fidelity wireframes for review before moving to high fidelity and pursuing them further in Knak creation. We also were tasked with creating STANLEY designs as well as Securitas Technology designs, so different branding was kept in mind for each component.
Once low fidelity designs were created for each component in STANLEY and Securitas styles, we then compiled and shared designs and iterated before presenting to stakeholders for review before moving to the next phase.
After iterating and gaining stakeholder approval, we created the email design systems and high fidelity wireframes, reviewed, and then decided on a final direction and design system to go with. In this case, we decided to first go with STANLEY Security designs but kept in mind Securitas Technology, which led to creating the modules we identified in Knak with a "low fidelity" look for easy editing for stakeholders and high fidelity examples.
Before starting on creating high fidelity prototypes, we decided to create a working design system for Securitas Technology and STANLEY Security branding including colors, fonts, and logos. This project in its expanded form for Securitas Technology is discussed in more detail here, if you're interested!
We received direction from stakeholders in late stage that we would be first proceeding with STANLEY Security designs, so we took those components and created them in Knak using a component approach and after building out proper naming conventions and groups, with correct image dimensions.
Once all modules were created in Knak and approved, we published them and held sessions with stakeholders to review and give guidance in any areas of confusion and how to proceed in the future. While the modules were launched, this is an ongoing process of editing and identifying new modules to create in the future.
Knak allows users to streamline their email creation and create new designs stress free. Our componentized email design system allowed for maximum re-usability and ease of use.
Based entirely around the users, our componentized design system greatly reduced confusion across several teams and streamlined the email creation process. After the initial delivery Securitas Healthcare and Technology modules and design systems have been created and implemented in Knak, and the major goals initially set have been hit.
This project opened my eyes to the fact that user centered design isn't always about external users, it's about all users, including internal. The process also taught me that there isn't such thing as too much review and iteration, as it was key in the development and understanding of this project. It was also a great opportunity to learn a new software and get more familiar with creating design systems for different projects and use cases.
I would reach out to different teams that I've never interacted with before and try to focus more on one aspect of the project instead of finding out which design system in Knak to develop first at a later stage.
I would create more designs such as survey emails and find different ways to create guidance for different teams. While we made the process as streamlined and beginner friendly, I still feel like giving more formal guidance at the start of handshake would be beneficial. I would also reach out to support earlier as there was a lag issue that wasn't addressed until the creation of the second design system.
