Date: July 2020
Skills: Product / UI Design
Tools: Sketch / CSS
Teams: Product / Front+Backend
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.
I realized the importance of including module specifications to clearly demonstrate the intended behaviors, including typography and scaling, default flex properties, margin and padding variations, stacking orders, and more. These specifications are essential for effectively communicating module settings and behaviors to users.
In my role as the lead designer for this project, I provided guidance to two design teams consisting of eight designers each. Together, we focused on component utilization and adhering to design standards to produce wireframes for all 72 module layouts. Additionally, I established a style library within Sketch, and as we progressed, we implemented Abstract for version control. Below, you will find the comprehensive list of all the module layouts we reconstructed.
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.
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.
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.
All modules are flexible enough to accommodate a range of column layouts, such as 12, 8, 6, and 4 columns, as well as tablet and mobile screens. These instructions also guarantee that button layouts, initially designed for horizontal stacking, will automatically switch to vertical stacking when there's limited screen real estate available.
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.
These solutions significantly improved the Page Layout Editor (PLE) ecosystem. They enhanced the user experience by rectifying spacing, alignment, and visual consistency issues, ensuring webpages looked more polished and professional. The developer-oriented wireframing system and clear specifications streamlined communication with developers, leading to more efficient and accurate implementation of design elements. The establishment of design standards and responsive behaviors standardized module behaviors and ensured adaptability to various screen sizes and layouts, making PLE more versatile while limiting unexpected bugs. Furthermore, the clarification of default text alignment for titles and captions reduced ambiguity, fostering a cohesive design approach. Overall, these solutions made PLE more user-friendly, improved design consistency, and increased efficiency for both users and developers. This overhaul put a strong technical stake in the ground to ensure future theme templates had a polished structure under the hood.