Work       About


Email Development System

Role: Lead UX Designer/Researcher
Team: Product Manager, Email Engineer, Design Director
Duration: 6 months
Client: BounceX
Deliverables
- Internal Research
- Service Road Map
- User Interviews
- Persona
- User Journey
- Prototype
- Usability Testing


In a digital marketing agency, our designers provide premier visual experience service for clients and work on different types of deliverables, including marketing emails, website banners, promotion design and UI integrations.

It’s exciting to see the design team growing and expanding fast. However, some problems also came along the rapid growth:

  • It costs more time to on-board new designers.
  • Every designer has his/her style, which causes design outcome inconsistent.
  • There are more miscommunication and revisions across teams due to larger amount of work and complex workflow.


I was tasked to look into problems existing in design team, and find a solution to improve team’s workflow. To kick off the project, I had a meeting with product manager and other stakeholders to discuss goals, timeline and requirements. To narrow down our subject, we decided to focus on a major deliverable all designers can work on, the marketing emails.

I created a service road map to demonstrate scopes and process how designers, email engineers and account managers work on an email campaign for client. It helped us clarify procedures step by step and find out touch points to dive deeper and approach.

According to road map, we found touch points located in
  • Pre-unveil stage - designer creates the first draft of email design
  • Integration stage - designer passes approved email design to engineers to code them out.

Both stages have designers involved, so we decided to focus on designers as the primary users and engineers are the secondary users.


To make our focus and goal clearer, I came up with the question:

How might we improve designer’s work flow in order to make marketing email development efficient and seamless?




I conducted 1:1 interviews with 5 designers and 2 engineers to study their thoughts and process of creating/coding marketing emails.


Designers
  • Spent 6-8 hours to create a design set (2 concepts of email design)
  • Spent around 10-30 minutes in creating email section modules before concept design.
  • Not sure what dimensions and guidelines engineers are using.
  • Found it time-consuming to make edits on numerous emails.

Engineers
  • Not sure what dimensions and guidelines designers are using.
  • Found it time-consuming to integrate various design concepts, which may postpone shipping timeline.

Email development medium
  • Designers create email concepts in Sketch.
  • Engineers code emails with design reference in Sketch.
Since both designers and engineers use Sketch as design and reference tool, I decided to build a system of email development in Sketch. The system should optimize design concepts variations, provide clear design guideline, and reduce production time.

Optimize design variations


Look into past design work to find patterns and translate into principles.


According to past email campaign data and some account managers’ feedback, an email’s hero section is the most impactful component in an email design. It can highly make a difference in campaign performance, especially conversion rate. Thus, I studied past design work, focusing on email hero design, to find design pattern by following the 3 rules:

Reusability
What variant needs?
How does it scale?
What style variables are in use?
Consistency
How to implement across different design and scenarios?
Optimization
How to optimize design styles based on consistent and cohesive modules?


Email hero variable modules

Make email hero sections easy to swap design concepts with pre-built modules.


I sat down with engineers to review all hero patterns I found, and we wanted make sure engineers can integrate emails and switch design easily on their end. It’s important to keep deliverables consistent both design wise and technical wise.

We sorted patterns into 3 sets of modules, based on time spending and technical feasibility. Modules were designed to align design best practice and integration standards to let designers and engineers understand the principles on the same page, and here is how to use:

  1. Designer picks a hero module to start on a design concept.
  2. For other variations of design concepts, designer should pick modules in the same set.




Make it once and do it all

Find repetitive and replaceable action in user journey.  


Apart from service road map involving designers, engineers account managers and clients, I created a user journey solely for designers. My purpose was to find repetitive action a designer takes every time design a new concept:

  • Designer reuses modules from different clients.
  • Designer usually creates each section modules from scratch.
  • Designer usually creates each email concept from scratch.


Create pre-built modules to kill repetition and make production efficient.


To eliminate repetition workload and leverage designers’ time, I came up an idea to create pre-built modules of each section:

  • Designer can grab basic module and start designing, rather than starting from scratch.
  • Pre-built modules can ensure design consistency and precision.
  • Pre-built modules follow design best practice and most updated email coding guideline

Adaptive and inclusive

Implement ADA compliance guideline and responsive design modules.


It’s all about humans.

Our emails are facing different groups of end users across industries. It’s especially important to make design accessible for anyone with any digital devices. Collaborating with engineers and designer with web accessibility expertise, I was fortunate to learn the latest web trend and add parts of it to the system:

  • ADA compliance guideline of font sizes, colors contrast and hierarchy.
  • Responsive design modules.
  • GDPR format.


System mock-up




Usability test & improvements


To validate the system, I conducted usability testing with 6 participants, 2 new designers and 4 experienced designers.

A pin-up wall was created to map out test result for better insights synthesize:

  • Email development system is rated 4.7 to be helpful in general. (5 is best)
  • 2-4 hours spent in pre-unveil after using boilerplate. (6-8 hours in the past)
  • Some designer said they may forget to check ADA compliance sometimes when projects are urgent.
  • New designers said some modules are too complex to start with.


With feedback and insights, we decided to move forward with improvements:

  • Research and introduce Sketch plugins accelerating work process.
  • Reduce complexity of some pre-built modules to give designers more control over design.
  • Add a checklist of ADA compliance and GDPR insert.
  • Create design kick off deck, and onboard new designers with email development system.


Takeaway

It was a great experience to work on an UX project beyond an actual product. The challenge is to set principles in the system, and keep it scalable and optimizable at the same time. Fortunately, I was able to talk to the end users, designers, easily and quickly to collect constructive feedback.

Email Development System has been for more than 1 year so far and receiving very positive feedback from experienced designers, new designers, design interns and email engineers. It is an ongoing project to refine and update with iterations. I am very excited to push it to the next level.