Company
Evermaps
rOLE
Product design & Design system architect
In collaoration with
Developers, product managers, sales representatives
Evermaps is a SaaS company dedicated to optimizing its clients’ online presence. It provides a presence management platform and a Store Locator—a mapping solution integrated into websites that enables the geolocation of physical points of sale through store pages optimized for local SEO. This design system was created to streamline the process and reduce the delivery time of a Store Locator.
THE CONTEXT
A Design System is a centralized library of reusable UI components, design principles, and guidelines that ensure consistency, scalability, and efficiency across products. It streamlines collaboration between designers and developers, reducing redundancy and maintaining brand integrity.
THE CONCEPT
The Methodology
Atomic Design Architecture
Built following Brad Frost’s Atomic Design, a methodology that structures UI into five hierarchical levels.
Atoms
Basic UI elements like buttons, inputs, icons
Molecules
Small combinations of atoms working together
Organisms
Larger sections of the UI forming distinct modules
Templates
Page-level layout structures (wireframes)
Pages
Final high-fidelity user-facing screens
ADAPTABILITY
Built to scale across any brand identity.
This design system is unique in its purpose: it was built to seamlessly integrate into clients’ websites. Unlike traditional design systems that enforce a single product’s look, it is designed to adapt to hundreds of distinct brands. Built around flexibility, it provides neutral versions of Evermaps features and functions as a reusable, template-based system that streamlines the prototyping of Store Locator pages while maintaining consistency across components.
What once required redesigning a store locator block by block can now be done in just a few clicks.
Leveraging Core Tools
Variables and styles are key to an efficient design system. They allow us to define and store reusable values like colors, typography, and spacing. Updates to a single variable reflect across all components instantly.
Variables & styles
Variables and styles are key to an efficient design system. They allow you to define and store reusable values like colors, typography, and spacing. Updates to a single variable or style automatically refresh all components, ensuring consistency and saving time by reducing manual adjustments.
Here what variables look like in Figma :
Variable collections
01.
Tokens
First, I created a collection of tokens, containing base colors and sizings, used for spacing, padding, and border radius.
Design tokens are the building blocks of all UI elements. The same tokens are used in designs, tools, and code. They replace static values with self-explanatory names and help designers and developers « speak the same language,” reducing confusion during handoff from design to implementation.
Here’s an example of how changing the primary and secondary main colors will impact the pages :
02.
Display
Then, I created a collection called Display. It contains two groups:
- the Border radius settings with assigned sizing tokens. They allow you to adjust the radius of ‘blocks—which refer to sections or widgets on the page—and buttons with a single click.
- the ‘Blocks’ group, which uses boolean functions to determine which features are displayed on the client’s template. This way, the page adapts to the client’s choices with just a few toggles.
Here’s how these toggles work :
Styles
Styles and variables serve similar purposes, but styles offer less flexibility and control. Their strength is bundling multiple properties—like font family, size, and weight—into a single reusable set.
Typography
Because Figma doesn’t yet support managing font size, weight, and family together with variables, we use text styles instead. We created styles for headings, body text, and buttons, each containing only essential properties. Updating a style automatically applies changes across the entire client template.
Grids
Grids structure content by aligning elements within a consistent layout, incorporating margins, spaces, and columns. These guidelines may vary between clients, especially concerning page margins. Adjusting the grid settings will update every template page accordingly
Components
Structure
Components are reusable elements that keep designs consistent and efficient. We structured each component with a rigorous logic for maximum scalability.
I structured each component the same way:
Key information
On each component, there are links to where it is used in higher-level components or pages, along with clues on how to edit them to ensure proper management of the design system when collaborating with other designers.
Base components [optionnal]
Some components—those with many variants and most likely to change depending on the client—are made with nested ‘base components.’ You only need to modify these, and all related components will undergo the same change.
Variants
Variants are every possible versions of a single component. Each variant is affected by properties that allow you to switch the button component’s state, appearance, and behavior.
Let’s take a closer look with this example of the button component:
Here’s how it looks :
Pages
Components are reusable design elements—like buttons, icons, and forms—that ensure consistency across your project. Creating a master component allows for multiple instances that automatically update when the master changes, streamlining maintenance and promoting uniformity.
On this page you can find all the templates needed to build a client’s store locator. Templates are wireframe-like layouts that combine organisms, molecules, and atoms into structured compositions. They define the overall structure and content flow
05.
TEmplates
On this page is key information about the design system, along with links to all its components for quick access.
01.
Presentation
02.
Atoms
On this page are all the atoms components such as buttons, tags, selectors,…
On this page, you will find all molecule components, such as dropdowns, inputs, and cards, all constructed following the same approach described above. However these components are more complex and are composed of nested atoms components
03.
Molecules
04.
Organisms
This page contains all the organism components, which are made up of multiple molecules and/or atoms. They represent larger, functional sections, such as a navigation bar, a form, or a card carousel.
To conclude
Revolutionizing the Workflow
Evermaps’s design system has revolutionized its store locator development, cutting production time to just one-third of what it once was. By fostering seamless communication among clients, designers, and developers, this approach not only enhances productivity but also underscores the tangible benefits of a structured design strategy.
With the ability to create a store locator in just a few clicks, Evermaps can now concentrate on product innovation, confident that delivery timelines remain consistently on track.
That’s all for now, thank you for reading !
Take a look at something else:
