Design System

I created an extensive UI library and a solid design system that laid the foundation for future extensions.

I’ve designed a dynamic, web-based business analytics dashboard that is highly customizable through resizable and moveable components.
Problem Statement:

As a employee experience designer, there isn't a design language or style guide to design with for our projects. Our team and stakeholders will not have a unified experience. Designers will have to start from scratch on new projects and will not be efficient. Design teams will have to duplicate effort on common design patterns.

Goal Statement:

My Design Language (DL) system is an evolving collection of design patterns and guidance that create unified experiences for internal sites, tools, and products across the enterprise. As a partner and collaborator we must have a system of checks and balances. Check-ins and reviews help us support each other throughout the process and keep ourselves in alignment to deliver the best experience for our employees. Each enterprise component is open to evolution through iterative enhancements or redesign so it's important for teams to know the process and considerations outlined below.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

I interviewed designers and development team managers to get insight.
"What is the biggest problem your team is facing in the design process?"


Having a design system provides efficiency on the design team and a consistant experience accross the business.

Testing & Validation:

Testing design patterns through the help of the Measure plugin. Developers building out components from Measure help validate the functionality and behaviors.

Lessons Learned:

Documentation on what was created, ensured that I was catering for all instances needed. It’s vital that what I created was not subjective. Having rationale as to why I was making decisions allowed me to better explain my decisions to the design team in critiques. Above all, it was an incredible learning experience and a great source of pride for our team.
This example breaksdown a navigation organism.
The Atomic Approach

Atomic design provides a clear methodology for crafting design systems. Team members are able to better appreciate the concept of design systems by actually seeing the steps laid out in front of them.
Atomic design gives us the ability to traverse from abstract to concrete. Because of this, we can create systems that promote consistency and scalability while simultaneously showing things in their final context.
Different input states along with accessibility guidance.

This is very important to me. Documentation and standards are what separate a pattern library from a true design system. I wanted to make sure that a designer and a developer could understand when and when not to use a pattern or component.
Simple one-page template for application landing, portfolios, and more.
Basic admin dashboard shell with fixed sidebar and navbar.
Template showing collapsable side navigation/breadcrumbs and footer.
Simple template showing nav bar/footer along with a 404 error state.