PLE 2.0 DESIGN SYSTEM

View the entire handoff on MARVEL


Date: July 2020

Skills: Product / UI Design

Tools: Sketch / CSS

Teams: Product / Frontend / Backend


1. UNDERSTANDING THE PROBLEM

What is Page Layout Editor (PLE)? PLE is a CMS/Web builder designed specifically for health and legal services such as optometry and law firms. PLE allows customers to quickly build webpages with 30+ modules to showcase information such as location, hours, staff members, or photo galleries.

I performed a UI audit and found that PLE had spacing and alignment inconsistencies within many modules and elements. There were modules with unaccounted behavior along with excessive styles to shared components within the CSS. This negatively impacted hundreds of existing custom themes and any future themes that would use the pre-existing PLE version (1.0) to run their websites.

featured block UX UI

In the example above, I used several CSS values to highlight the structure of each component with a red border. This allowed me to spot areas of improvement like overlapping elements or unwanted spacing. The purple sections are examples of inconsistent margins. This audit revealed undefined CSS and no desired method such as 8-point spacing (multiples of 8px).

2. SOLUTION: CREATING A UNIQUE DESIGN SYSTEM

My task was to create a unique design system with frontend focused specifications (typography and scaling, default flex properties, margins, paddings variations, stacking order etc.) in order to proper convey module settings and behaviors by a user.

featured block UX UI

Featured Blocks Settings: On the left of the wireframes in the image above is a screenshot of the Featured Blocks Settings. A user can define how many featured blocks populate within each row. I was responsible for defining each condition and discussing with developers the logic and limitations that would keep each block legible and intentional. Since the bottom row only has two blocks, it was important to define the width of the cards and the width of the elements within the card to keep description elements narrow and easy to read. View Artboard

3. Execution: CREATING PLE 2.0

As the lead designer in this effort, I guided two design teams (8 designers) on component usage and design standards to create wireframes for all 30+ module layouts. Before Figma, I created a style library in sketch and we adopted Abstract for version control. Each of us would be responsible for working on the same file using the same visual language to communicate accurate design instructions.

These instructions involved 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, tites, captions, buttons, icons, etc., which ultimately affect a module's height, flexibility, and presentation. Lastly, I oversaw the quality and delivery of all wireframes, development specifications, and responsive behavior.

EXAMPLE: FIXING VISUAL ALIGNMENTS ON MULTI-CARD LAYOUTS (FEATURED BLOCKS)

featured block UX UI

Improving Visual Alignment: Above is an example of the featured blocks module not having proper button alignment nor defined min-height. Before I joined the team, the first designs did not account for different scenarios. Because a user can populate different parts of a featured block such as the title or icon, the unaccounted conditions could result in unwanted alignment where buttons or card heights created a staggered appearance.

featured block UX UI

Fixing Visual Balance The solution was to define certain behaviors of elements within the featured block. I establish a min-height for the block and the alignment and positioning for the title/description. It was also important to define where the button alignment would occur in case a description was too short. I defined the button position to the bottom of the block to straighten out the staggard look for all conditions. View Artboard

Summary

DEVELOPER ORIENTED WIREFRAMING

This design system is different than most because it mirrors elements typically found in a browser's element inspector. Its primary goal is to convey what developers need to see under the hood.

Within sketch, I created similar components to represent margins, paddings, column gutters, section padding, and grids for desktop, tablet, and mobile. I also designed a typography system to accurately portray the necessary stacking to build out any module within the bootstrap framework.

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.

Component Stacking and Spacial Rules

Since all modules have an H2 title and a caption, I came up with a global rule that would maintain proper spacing when the caption is disabled or empty.

The module title and caption show a margin-bottom of 16px. The wrapper underneath the caption also has a margin-bottom of 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 module title and 16px from the wrapper.

View Artboard

Defining Responsive Behavior

All modules can render within the container or extend beyond it (container fluid). If an image is present for a module, the image uploaded requires specific instructions. It's necessary to define the image resolution, desired aspect ratio for each screen size, and stacking behavior for tablet and mobile for all media queries.

View Artboard


Defining Default Alignment for Titles and Captions

In PLE 1.0, It was never specified how text alignment for title and caption would align by default on desktop vs mobile. I designed a chart to visualize how a title and caption might be left aligned on desktop but center aligned on mobile. The testimonial module shows different conditions where this scenario takes place.

View Artboard