PLE UI KIT / DESIGN SYSTEM

View the handoff to this project on MARVEL HANDOFF

Problem: Many of the modules to our web builder had spacing and alignment inconsistencies. An audit was performed and we found that the web builder had modules with unaccounted behavior along with an excessive amount of styles to shared components.

Solution: This product allows users to customize web pages to business verticals such as health and legal services. My task was to create a dynamic design system with development-focused specifications (designated variables, default flex properties, margins, paddings, etc.). As the lead designer to this effort, I guided two design teams on component usage and design standards to create wireframes for all of our modules. I was responsible for auditing our product's structure for multi-layout modules, component spatial awareness, hierarchies, and obtaining an extensive understanding of their frontend technologies.

I created instructions for logic and behavior to module settings, layout options, and restrictions for component scalability. This involved multi-layout modules (12-4 columns) with the ability to hide or disable components such as images, text fields, buttons, etc., which ultimately affect a module's height, flexibility, and presentation. I ensured the creation and delivery of wireframes, development specifications, and design standards. I also supported mid-level and junior designers in skill development and design growth. I helped hire new team members and reviewed and approved handoffs to our web builder templates to ensure they reflected frontend requirements and design standards.

DEVELOPER FOCUSED

This design system is different than most because it utilizes elements that you would typically find in the browser's inspector. Within sketch, I created elements to represent margins, paddings, column gutters, section padding, and grids for desktop, tablet, and mobile. Accompanied by typographical elements that are present in our web builder, this accurately represents the necessary "tools" to build out any module within the bootstrap framework.

A closer Look

In this example, the Module Title and Caption show a margin-bottom of 16px. The wrapper underneath the caption has 16px. This results in 32px of space underneath the caption. If the caption was turned off, the title would stack on the items below while maintaining a 32px margin due to the wrapper. In other words, you would have 16px from the wrapper and the initial 16px from the Module title.

Centralized Interpretation

In this example, you can see a CTA Module next to a Testimonial Module. Both are using the same spatial rules on their respected bootstrap layouts (Fullwidth, 12c, 8c, 6c, 4c). These rules leave no room for other interpretations when it comes to the distance between neighboring elements.