UI
design systems
Designing a scalable pattern library for EF Tours' digital ecosystem
UI
design systems
Designing a scalable pattern library for EF Tours' digital ecosystem
I built a Figma-based pattern library from the ground up to bring consistency, scalability, and speed to EF Tours' public marketing website and customer emails.
PROBLEM
Without a shared system, designers and developers were constantly rebuilding patterns from scratch, referencing outdated designs, and creating one-off styles that either broke brand standards or couldn't be built by the development team. This created a slow, friction-heavy handoff process and recurring QA issues.
Solution
I built a comprehensive Figma pattern library layered on top of EF's central component library, with variable-based foundations for color, type, spacing, and radius—built mobile-first to reflect that roughly 70% of web and email traffic comes from mobile. By anchoring everything to variables, the entire system could flex with EF's ongoing brand refresh without requiring manual rework. The library covered both web and email, with starter templates, documentation, and a process for requesting new patterns, giving the team a sustainable system rather than a one-time deliverable.
My take on AI and the future of design systems
As generative AI tools make it faster than ever to produce design artifacts, the need for a well-governed pattern library doesn't diminish—it compounds. When anyone can spin up a design in seconds, the question shifts from can we make something? to which version is canonical? Without a source of truth, faster generation just means faster accumulation of inconsistency.
impact
Dramatically faster design production: What took a week or more now takes a day or less.
Less reinvention, more intention: Teams start from a reliable foundation and focus energy on design outcomes.
Reduced QA cycles: Standardized components raised the baseline across all touchpoints and Consistent, high-quality output.
Role
Senior Designer, UI
Team
Creative Directors, Digital Designer, Web Content Editors
My Focus
Auditing the current suite of web & email design materials
Building a scalable design system for digital
Tools
Fgima, Figma AI, Claude
AI integration
Documentation & organization
I built a Figma-based pattern library from the ground up to bring consistency, scalability, and speed to EF Tours' public marketing website and customer emails.
PROBLEM
Without a shared system, designers and developers were constantly rebuilding patterns from scratch, referencing outdated designs, and creating one-off styles that either broke brand standards or couldn't be built by the development team. This created a slow, friction-heavy handoff process and recurring QA issues.
Solution
I built a comprehensive Figma pattern library layered on top of EF's central component library, with variable-based foundations for color, type, spacing, and radius—built mobile-first to reflect that roughly 70% of web and email traffic comes from mobile. By anchoring everything to variables, the entire system could flex with EF's ongoing brand refresh without requiring manual rework. The library covered both web and email, with starter templates, documentation, and a process for requesting new patterns, giving the team a sustainable system rather than a one-time deliverable.
My take on AI and the future of design systems
As generative AI tools make it faster than ever to produce design artifacts, the need for a well-governed pattern library doesn't diminish—it compounds. When anyone can spin up a design in seconds, the question shifts from can we make something? to which version is canonical? Without a source of truth, faster generation just means faster accumulation of inconsistency.
impact
Dramatically faster design production: What took a week or more now takes a day or less.
Less reinvention, more intention: Teams start from a reliable foundation and focus energy on design outcomes.
Reduced QA cycles: Standardized components raised the baseline across all touchpoints and Consistent, high-quality output.
Role
Senior Designer, UI
Team
Creative Directors, Digital Designer, Web Content Editors
My Focus
Auditing the current suite of web & email design materials
Building a scalable design system for digital
Tools
Fgima, Figma AI, Claude
AI integration
Documentation & organization
Audit & discovery
Understanding what existed before building something new
Before designing a single component, I audited recent web projects, the live marketing website, and a broad sample of recent emails to document what patterns were actually being used in production. I also reviewed the full EF global component library to map what was available at the global level, what was already being adapted for EF Tours, and what could be adopted quickly without heavy customization.
Alongside the visual audit, I spoke with designers, the web content team, and front-end developers to understand what was slowing them down, what they kept rebuilding, and what they wished existed.
Audit & discovery
Understanding what existed before building something new
Before designing a single component, I audited recent web projects, the live marketing website, and a broad sample of recent emails to document what patterns were actually being used in production. I also reviewed the full EF global component library to map what was available at the global level, what was already being adapted for EF Tours, and what could be adopted quickly without heavy customization.
Alongside the visual audit, I spoke with designers, the web content team, and front-end developers to understand what was slowing them down, what they kept rebuilding, and what they wished existed.
What I found
What I found
01
We were under utilizing components available to us
02
Different designers were inconsistently using components
03
Every project started from scratch or an already out of date source
04
Designs were being made that couldn't be implemented on the CMS
01
We were under utilizing components available to us
02
Different designers were inconsistently using components
03
Every project started from scratch or an already out of date source
04
Designs were being made that couldn't be implemented on the CMS
"I cannot stress enough how much incredibily thoughtul work that Amanda has put into this system. When they say "good design is invisible, this is what they mean."
Creative Director at EF Tours
"I cannot stress enough how much incredibily thoughtul work that Amanda has put into this system. When they say "good design is invisible, this is what they mean."
Creative Director at EF Tours
"I cannot stress enough how much incredibily thoughtul work that Amanda has put into this system. When they say "good design is invisible, this is what they mean."
Creative Director at EF Tours
System architecture
Building a foundation that could flex with the brand
EF Tours was in the middle of a brand refresh when this project began, which meant any system I built needed to be resilient to change. Rather than starting from zero, I built the library on top of EF's centralized global component library, customizing from there and structuring patterns for our brand.
System architecture
Building a foundation that could flex with the brand
EF Tours was in the middle of a brand refresh when this project began, which meant any system I built needed to be resilient to change. Rather than starting from zero, I built the library on top of EF's centralized global component library, customizing from there and structuring patterns for our brand.
Mobile-first
With approximately +70% of our web traffic and email views coming from mobile devices, designing for the smallest screen first ensured the patterns were built to serve the majority of our audience by default, then scaled up to desktop rather than the reverse.
Variable-driven
Every component was built using Figma variables for color, typography, and spacing. This made the library resilient to the ongoing brand refresh—when brand elements changed, components updated seamlessly rather than requiring manual edits across files. It also enabled mode switching: designs could toggle between light and dark mode and between mobile and desktop layouts without any manual edits, making it faster to explore and present variations.
Mobile-first
With approximately +70% of our web traffic and email views coming from mobile devices, designing for the smallest screen first ensured the patterns were built to serve the majority of our audience by default, then scaled up to desktop rather than the reverse.
Variable-driven
Every component was built using Figma variables for color, typography, and spacing. This made the library resilient to the ongoing brand refresh—when brand elements changed, components updated seamlessly rather than requiring manual edits across files. It also enabled mode switching: designs could toggle between light and dark mode and between mobile and desktop layouts without any manual edits, making it faster to explore and present variations.
Mobile-first
With approximately +70% of our web traffic and email views coming from mobile devices, designing for the smallest screen first ensured the patterns were built to serve the majority of our audience by default, then scaled up to desktop rather than the reverse.
Variable-driven
Every component was built using Figma variables for color, typography, and spacing. This made the library resilient to the ongoing brand refresh—when brand elements changed, components updated seamlessly rather than requiring manual edits across files. It also enabled mode switching: designs could toggle between light and dark mode and between mobile and desktop layouts without any manual edits, making it faster to explore and present variations.
Web pattern library
32 components built to scale across the entire marketing website
The web pattern library was designed to serve the full public marketing website, not just a single project. I used the EF Audience Hubs project as a pressure test — building and validating patterns in the context of a real, live initiative — but the library was scoped from the beginning to be the foundation for every web project the team would work on going forward.
The goal was to make the "right way" the easy way, so that reaching for a library component was always faster than building something from scratch.
Web pattern library
32 components built to scale across the entire marketing website
The web pattern library was designed to serve the full public marketing website, not just a single project. I used the EF Audience Hubs project as a pressure test — building and validating patterns in the context of a real, live initiative — but the library was scoped from the beginning to be the foundation for every web project the team would work on going forward.
The goal was to make the "right way" the easy way, so that reaching for a library component was always faster than building something from scratch.
The library includes 32 components built with auto layout, all connected to the variable system for colors, spacing, and typography. Each component includes mobile and desktop variants, and pre-built page templates give designers a reliable starting point for new projects rather than assembling layouts from scratch each time.
The library includes 32 components built with auto layout, all connected to the variable system for colors, spacing, and typography. Each component includes mobile and desktop variants, and pre-built page templates give designers a reliable starting point for new projects rather than assembling layouts from scratch each time.
Email component library
14 components built for the constraints of email
Email design operates under a different set of constraints than web, rendering environments vary significantly across email clients, and what works in a browser doesn't always translate to an inbox. The email component library was designed with those limitations in mind from the start.
Pre-built email templates using auto layout gave the team—designers, copywriters, and email developers—a shared starting point that reduced the back-and-forth between disciplines and made the production process significantly more predictable.
Email component library
14 components built for the constraints of email
Email design operates under a different set of constraints than web, rendering environments vary significantly across email clients, and what works in a browser doesn't always translate to an inbox. The email component library was designed with those limitations in mind from the start.
Pre-built email templates using auto layout gave the team—designers, copywriters, and email developers—a shared starting point that reduced the back-and-forth between disciplines and made the production process significantly more predictable.
The 14 email components were aligned visually with the web pattern library so that the experience across digital touchpoints felt cohesive, while being built specifically for email rendering requirements.
The library launched in 2024, ahead of the web pattern library, and was subsequently updated in 2025 to align with the evolved web system as both libraries matured together.
The 14 email components were aligned visually with the web pattern library so that the experience across digital touchpoints felt cohesive, while being built specifically for email rendering requirements.
The library launched in 2024, ahead of the web pattern library, and was subsequently updated in 2025 to align with the evolved web system as both libraries matured together.
Impact & Outcomes
Building a foundation the whole team could stand on
The library is now used across a team of 7 designers, 5 copywriters, 2 email developers, and 3 front-end web developers.
Impact & Outcomes
Building a foundation the whole team could stand on
The library is now used across a team of 7 designers, 5 copywriters, 2 email developers, and 3 front-end web developers.
✓ Dramatically faster design production
What took a week or more now takes a day or less—freeing the team to focus on real problems, not reconstructing basics.
✓ Less reinvention, more intention
Teams start from a reliable foundation and direct their energy toward work that moves the needle.
✓ A scalable digital foundation
The basis needed to build and evolve a consistent digital experience was created—rather than patching it together project by project.
✓ Consistent, high-quality output
Standardized components raised the baseline quality across all touchpoints, reducing one-off decisions and the QA cycles that followed.
✓ Dramatically faster design production
What took a week or more now takes a day or less—freeing the team to focus on real problems, not reconstructing basics.
✓ Less reinvention, more intention
Teams start from a reliable foundation and direct their energy toward work that moves the needle.
✓ A scalable digital foundation
The basis needed to build and evolve a consistent digital experience was created—rather than patching it together project by project.
✓ Consistent, high-quality output
Standardized components raised the baseline quality across all touchpoints, reducing one-off decisions and the QA cycles that followed.
"Amanda’s superpower is her ability to make our work smarter and more efficient while still holding it to a high design standard. She has an outsized impact on the processes that every single team member leverages in their daily work."
A co-worker at EF on the impact of a clear design system
"Amanda’s superpower is her ability to make our work smarter and more efficient while still holding it to a high design standard. She has an outsized impact on the processes that every single team member leverages in their daily work."
A co-worker at EF on the impact of a clear design system
Learnings
Closing the loop between design and development
QA, maintenance & creating Storyblok presets
One of the most valuable extensions of the library was translating the Figma patterns into presets inside Storyblok, the CMS used by EF Tours' web content team. I mentored a junior designer through the process, partnering closely with the web content team and engineers to surface and resolve build issues as they appeared.
Learnings
Closing the loop between design and development
QA, maintenance & creating Storyblok presets
One of the most valuable extensions of the library was translating the Figma patterns into presets inside Storyblok, the CMS used by EF Tours' web content team. I mentored a junior designer through the process, partnering closely with the web content team and engineers to surface and resolve build issues as they appeared.
Adjusting the library as we built
The process was as much a learning exercise as a production one. We uncovered where Storyblok had limitations and where we were leaving capabilities on the table. I adjusted the Figma library to reflect what was actually buildable, rather than letting the gap between design and development persist.
This feedback loop was one of the most effective QA mechanisms in the project, keeping the library grounded in what the team could realistically build and maintain over time.
Adjusting the library as we built
The process was as much a learning exercise as a production one. We uncovered where Storyblok had limitations and where we were leaving capabilities on the table. I adjusted the Figma library to reflect what was actually buildable, rather than letting the gap between design and development persist.
This feedback loop was one of the most effective QA mechanisms in the project, keeping the library grounded in what the team could realistically build and maintain over time.
Adjusting the library as we built
The process was as much a learning exercise as a production one. We uncovered where Storyblok had limitations and where we were leaving capabilities on the table. I adjusted the Figma library to reflect what was actually buildable, rather than letting the gap between design and development persist.
This feedback loop was one of the most effective QA mechanisms in the project, keeping the library grounded in what the team could realistically build and maintain over time.
What I'd do differently
The biggest thing I'd change is the rollout approach. I waited until the library felt relatively complete before sharing it more broadly with the team. In hindsight, a phased rollout — introducing components in batches as they were ready — would have surfaced real-world feedback earlier and let the library evolve based on how people actually used it, rather than assumptions made during solo design work.
What I'd do differently
The biggest thing I'd change is the rollout approach. I waited until the library felt relatively complete before sharing it more broadly with the team. In hindsight, a phased rollout — introducing components in batches as they were ready — would have surfaced real-world feedback earlier and let the library evolve based on how people actually used it, rather than assumptions made during solo design work.
Next steps
The library is a living system, not a finished product.
Next steps
The library is a living system, not a finished product.
01
Gather structured feedback from designers as the library sees broader use
02
Tighten the relationship between Figma and Storyblok as patterns evolve
03
Continue evolving components in step with the brand refresh
01
Gather structured feedback from designers as the library sees broader use
02
Tighten the relationship between Figma and Storyblok as patterns evolve
03
Continue evolving components in step with the brand refresh