Portfolio

PPL Electric Utilities relied on a legacy content management system (Sitecore) which did not have a corresponding Design System or Component Library in use. There were no linked styles, page templates, or flexible, optimized components. Designers approached new work in Figma with little understanding of the capabilities or limitations of Sitecore.

There was a need for a Figma based design system that reflected Sitecore’s available capabilities.

I worked remotely with both development and design team members to bridge the gap between the technical Sitecore features and PPL’s design tool of choice, Figma.

My first step was working with developers to learn the technical limitations of Sitecore, what features and components were available for use, and the Sitecore workstream. Through this research I created a series of documents for designers detailing how to use Sitecore, build pages and components, publish them live, as well as PPL’s internal testing and approval procedures.

Knowing how Sitecore worked from a technical standpoint, I was better equipped to work with designers to observe and evaluate the current Sitecore page design process. PPL had design systems for other products in use, the structure and layout of which I would mimic for internal consistency. Seeing first-hand how Sitecore functioned and how designers were working, I could begin working on an optimized design system.

I created a master outline of the Sitecore components available to designers, possible layouts for these components, and attributes that can be modified. I synthesized this list into the smallest common denominator for components, which became the basis for my master components. Dozens of possible component presentations were broken down into several basic components.

With a clear concept of the proposed design system and component structure, I began defining base typographic attributes. I worked up molecularly using the Atomic Design philosophy to build reusable component cards, card blocks and pre-defined templates.

Utilizing Figma’s auto-layout, I devised a ‘drag & drop’ page design technique that drastically reduced the time it takes to design a Sitecore page. Page components were easily editable yet limited in their destructibility. Designers could now assemble Sitecore pages in minutes while adhering to a pixel-perfect design system.