Hedgehog Sherpa

Component-based Design System

A sherpa is a member of a Himalayan tribe that guides people through the mountains. Hedgehog Sherpa is a product we built to help guide our customers through the process of creating a website on the Sitecore platform. To get the most out of a Sitecore project, websites must be modular and component-based to allow content editors to arrange content on pages any way they feel is best. The design of the components must also be adaptable for all different types of clients with a variety of branding and styling.

We began by creating an inventory of every type of component and every type of functionality that would be needed. We then created a style system in Sketch for every type of typography style that would be needed, including various sizes, colors, and alignments. Individual “atoms,” or the smallest part of the design, were created as symbols, then more complex symbols were added. Finally, these symbols were all used to create each variation of each component in the inventory. This system would allow clients moving forward to edit just the styles to match their branding and have the changes apply globally across the document.

The wireframes and designs were designed in tandem with each other to ensure usability while having the right balance of restrictions on styling for each individual component.