How we built our
eDM design system.
Introduction.
ME is a digital-only bank with over 500,000 customers, which is currently undergoing a somewhat grass roots digital transformation across its digital channels and products.
Having worked across our eDM designs over the last 3 years, I recently began to notice patterns in our workflow that were impacting collaboration, design lead time and efficiencies with developer hand off.
These patterns included:
Inconsistencies in design and specifications in eDM designs in Photoshop.
Breakdowns in communication between designers and developers.
Delays in time it took to implement design changes from stakeholders and how these changes were communicated.
These patterns in turn affected our team’s capacity to deliver on higher value projects that came through the studio.
I wanted to find a way to mitigate this risk and streamline the end-to-end design process of our eDMs to make it more efficient for stakeholders, designers and developers.
Audience/Stakeholders.
Our internal staff, external vendors, developers and our 500,000 plus customers who see our eDM marketing materials.
Roles.
I lead this project across research and design, working with external developers and our brand and marketing team to ensure we clearly articulated our brand and technical requirements without sacrificing our customer experience.
Constraints on this project were:
Time limitations.
Specific developer/vendor requirements and specifications.
Requirements for customisation of components for the brand and marketing teams.
Goal.
Create a design system of reusable and accessible components to build emails that are available across internal and external vendors.
Measures of success.
The adoption and use of the eDM design template by external developers and the brand and marketing team.
Reduction in time:
During design & handover between design team members
Implementing rounds of stakeholder feedback
Developer handover and implementation
Research and discovery.
To kick off our research, I wanted to get a better understanding from each team on their individual requirements so I met with external developers, internal marketing and brand teams, and other UX Designers to gather more feedback on the current process and the ways in which each team works. We also created an audit of our current eDM designs that are in market.
An original email we found in market (right) and our redesign (left and centre) using the Email Design System and Type System.
A few key call outs were:
Developer feedback:
We are provided with inconsistent components and specifications, we’d like to see some sort of standardisation that is easily accessible by our developers.
Internal design team:
Incorporating feedback in photoshop across multiple eDM’s in both desktop and mobile is way too time consuming and feels like an inefficient way of designing for digital campaigns.
Marketing:
We need a template which is easily adaptable to new campaigns that we can customise and feedback on quickly.
We needed to build a template that was consistent, fast, customisable but still beautiful.
Tool time.
Based off feedback received from developers and designers, we needed a tool where we could implement feedback quickly but was also completely collaborative between designers, marketers and developers.
Photoshop proved too slow, cumbersome and wasn’t collaborative. It also didn’t offer the level of detail we needed for developer handoff.
Figma, however, was already being used successfully by our UX teams, provided easily componentised design and offered tools to improve collaboration and the hand-off to developers in code that wasn’t offered by our other design products.
Home improvement.
To get started on the build of the components, I took a list of build specifications from our external developers and started building our components accordingly, relying heavily on Figma’s ‘Auto Layout’ tool that allowed me to design responsive components that are flexible and airtight that can be easily used by other designers across the business.
A collection of our components in progress for our email design system.
I noticed during developing the components that Figma didn’t offer much flexibility in regards to how imagery and padding react within components – the beauty of using Figma however was that I was easily able to reach out to Figma directly and submit additional feature requests. In the interim, I developed a temporary solution that still fits the purpose of this project.
Outcomes.
While this project still very much a work in progress, I was able to run a live stress test of the components I designed and built across a large marketing campaign for the launch for Apple Pay and Google Pay. I worked in real time with Brand and Marketing to iterate on the design and ensured components were adaptable to each requirement. Simultaneously, I worked closely alongside our external developers to ensure what I was creating aligned to the correct specifications for a seamless handover.
An example which shows the size of singular email campaign for Apple Pay for our “Buck” card product
With the implementation of new processes and tools, I estimated that build time for our email design and feedback implementation was reduced by up to four times. Additionally, the feedback from developers was overwhelming positive and the new process reduced feedback between marketing and design.
With Figma constantly releasing new features and the continuous review and iteration of component builds, I anticipate build times will continue to decrease further in the near future.
This project was a really good example of successful cross-team collaboration, creating more harmonious relationships between the roles of developer and designer, increasing efficiencies in eDM design and development and communicating the design with stakeholders.
Check it out in action below or here. Thanks for looking!