MoveSnap Email Component Library
Building a Figma component library that helped the team deliver a user email campaign in a fraction of the usual timeline.
OVERVIEW
Background
MoveSnap is a digital moving concierge that helps clients organize their move while providing other products and services at discounted rates. After a recent rebrand, a marketing campaign with multiple emails was proposed to provide support to clients.
Challenge
Designing emails from scratch takes too long. How can we improve our process?
Deliverable + Impact
A Figma component library that improved email production speed by 3x.
Our email design process at MoveSnap involved a lot of different teams and assets that needed changes based on feedback. After a few campaign emails went out, I noted some pain points our process through team retros and 1:1 conversations.
TEAMS
Marketing Team
Needed marketing email designs
for current and future projects.
Product Design Team
Found the current process of creating ad-hoc emails too time-consuming.
Development Team
Needed email designs created with specific constraints in mind.
Creative Team
Could assist with creating emails,
but were not as familiar with Figma.
Potential Benefits
Consistency across all designs would help with maintaining and promoting the recently updated brand identity and this was a great point for the marketing team.
The development team had limited capacity, so their early input while building the component library could simplify the dev hand-off process for future emails.
An existing library would allow the creative team to actively contribute via content related changes like text and images.
Re-usable components would help the designers work faster and free up time for other tasks.
Idea proposal, cross-team feasibility meetings to determine scope, potential issues, web safe font considerations and Litmus dark mode color tests.
Research into existing email campaigns, modular design system libraries and Sendgrid/MJML email capabilities.
Contrast and sizing accessibility tests to meet WCAG guidelines.
“ The library helped me build templates with a quicker turnaround!”
— Creative Team Member
emails made in the time
it once took for 3 - 4
of emails built with
re-usable components
components and
variants created
Design workflows are incredibly collaborative. The library was successful because of early and constant input, requests and suggestions from everyone on the team. My favorite bit of validation of the entire project though, was the nicest slack message from a team member requesting support to create their own library for a different project afterwards - a great indicator that they found this library effective and useful.
Final Thoughts
Usage
Figma can be tedious for people not familiar with it. I think it is good practice to consider the purpose and intended users for anything being built. Who will use this library? Designers? A Marketing person with viewer access only? Developers? It is really easy (and quite fun, honestly) to get carried away in Figma, but sometimes keeping it simple can be very effective. I realized this while working, and ended up building much simpler than I had initially started out. Different usage notes may also be useful for the various parties.
Component Structure
I also learned to consider component structure through blood, sweat and tears very carefully when building a system. It made sense to focus on building atoms and molecules that were flexible and allowed for future edits and additions. For example, it was a lot easier to swap out individual components, than to try to add a requested property to an existing card with a lot of component properties.
Figma Variables
This system was created in early 2022, before the release of variables in Figma. If I was building something similar today (2024), I'd consider variables/modes to toggle things like color or mobile and desktop sizing a lot faster.
