Design Systems

Our customized design systems will save your design team time, resources and money. We create professional, functional and streamlined design systems spanning entire suites of products across all device sizes. Your designers, engineers, and customers will thank you!

Hero_Image@3x.png
Logo-Target@2x.png

Target’s design system delivered a 10X increase in speed with teams one quarter of the size.

Logo_AmEx@2x.png

American Express was able

to deliver work with 1/3

less person hours.

Logo-Exxon@2x.png

ExxonMobil built 50+ web apps in 10 months using their new design system.

What is a design system?

Design systems provide a usable, centralized ever-evolving kit of colors, type, interface components, templates, tokens and usage guidelines guided by brand standards that can be used across all digital products. This is a living, breathing document whose concepts and elements serve as a North Star for all design work. Maintaining a design system as such allows your design team to save time and resources building and refining flows and high fidelity designs.

 

 

Go from design stress to design success with Impekable.

How do you know if you need a new design system?

Image#1@2x.png

You’re a design team in need of organizing your design files.

image#2@2x.png

You’re a team of developers looking for consistency across your product and access to design changes immediately.

image#3@2x.png

You’re a larger organization looking to create efficiencies across multiple products and design teams. Fewer reviews mean more

go-to-market designs.

image#4@2x.png

You’re looking to switch design tools, and want to preserve your user interface elements as you migrate.

70%*

More productive

$1.5M*

Saved annually

22%*

Time saved

18%*

Design improvement

Why Adobe XD?

XD is an all-in-one tool that delivers wireframing, design and prototyping functionality. It’s built for collaboration allowing designers, developers and cross-functional team members to leave feedback on designs. You can coedit in real time with your teammates and access all documents from the cloud. XD prototyping brings your designs to life, and features like Auto-Animate allow your team to prototype beautiful flows with minimal work.

We’re a trusted Adobe Partner

Logo-Adobe@2x.png

Our close partnership and expertise in Adobe XD means that we will create your design system using the latest and greatest XD features with end result being an extremely organized, intuitive and scalable design system your entire team can leverage.

 

 

Click below to download the kits we’ve created in partnership with Adobe.

Apple@2x.png

iOS 14 Kit

Google-logo@2x.png

Google Material Kit

Bootstrap-logo@2x.png

Bootstrap Kit

Our process

We offer bespoke solutions for our clients, so although these are typically the main steps in our process they may vary depending on your unique use case.

1

We start with an in-depth onboarding call to understand how you’re currently leveraging a design system, UI kit, or existing design files. We’ll talk through your needs, pain points and the goals you have for implementing a design system moving forward.

2

Depending on your timeline and existing frameworks you have in place, our team may begin by auditing your existing files and creating recommendations for your updated design system. We can incorporate principles from enterprise systems like Material UI, Bootstrap, Fluent, etc.

3

We’ll improve existing components and patterns while also creating new elements to fill any gaps in your system, utilizing Adobe XD to its fullest capabilities to create a living, breathing document that can be easily updated over time.

4

We offer both training assets and long term maintenance to accompany the delivery of your design system. We can help up-skill your team on Adobe XD and/or supplement resources to maintain your system over the long term.

CASE STUDY

Salesforce Lightning

Where we started

The Salesforce Lightning Design System is used across the Salesforce CRM/Sales Cloud, the Service Cloud and the Marketing Cloud spanning both desktop and mobile applications. There are a variety of products that live within the Salesforce Ecosystem and are built by companies without access to the Lightning Design System.

Adobe wanted to offer the Lightning Design System design toolkit on Adobe XD for all designers and developers creating products within the Salesforce Ecosystem, and they asked our team to build a fully responsive XD document that could be downloaded as a Adobe Creative Cloud (CC) Library for easy access to Lightning design assets.

The goal

We wanted to create a living, breathing design system that encompassed all of the Salesforce Lightning brand, web and mobile elements, as well as larger patterns and resources.

This system needed to utilize Adobe XD features that allow designers to use components quickly and seamlessly within their files, while pushing all changes through CC Libraries so they cascade across teams and projects.

Our process

We started by working closely with Adobe to understand how they envisioned designers and developers using this kit. We were then able to organize the files in a way that allowed for the most seamless updating and sharing process through CC Libraries, while also breaking out files into product specific files for teams that would find them the most relevant for their use case.

 

We migrated assets from Sketch and cross-referenced with the Salesforce Lightning documentation to make sure all components were the latest versions.

 

Since we were building everything with XD in mind, we utilized features like Stacks, Padding, Responsive Resize, Scroll Groups, Component States, and Repeat Grid. This would ultimately increase efficiencies for design teams as they put the kit to use.

XD_Stack@2x.png
Saleforce#1@2x.png
Saleforce#2@2x.png
Final_Product@3x.png

The final product

We created a variety of key files spanning web and mobile components with supporting usage guidelines. Interface components included buttons, inputs, tables, tooltips, pickers, breadcrumbs, chart builders, welcome mats, progress trackers, tabs, trees and more. All files were connected by an asset library encompassing the Salesforce Lightning color palettes, design tokens, type styles and icons which can be accessed directly from the assets panel of each key file.

 

This kit can be used by designers and developers across the world looking to create Salesforce products compliant with the Lightning Design System.

Ready to get your design system started?