UI Kit & Branding Refresh
Higher Ground / Planetary Corporation
Context
Higher Ground Education is a tech-enabled, education-focused network that seeks to modernize and mainstream the Montessori movement internationally. Their aim is to make Montessori education accessible to all families. With their impact spreading from coast to coast in the U.S., they updated their branding and needed their website to reflect these new changes.
I was brought in by Planetary Corporation, to work on the website redesign, and complete it within a two-week time-frame. I was responsible for developing a new UI kit, including components and high-fidelity templates that worked within the context of their updated branding.
Concept & Direction
Higher Ground considered its subsidiary brand, Guidepost Montessori, to be the stepping stone for designing the UI of their new site. Having the two sites be more visually consistent would further unify the brand while strengthening their overall mission and vision.
Higher Ground’s updated Brand Guidelines helped orient the look and feel of the refresh. Their logo, an equilateral triangle of 60-degree angles, informed most design elements to be included. To the organization, the 60-degree angle visually represents the positive upward trajectory that defines the foundations of Montessori values. I planned to incorporate either the triangle logo or a variation of the 60-degree angle throughout the project, from image block assets to background elements in headers, to consistently reinforce those values visually. This was also deliberate break from how the Guidepost website was designed, where semi-transparent blobs of various colors and wave-sections were the primary design elements repeated throughout.
Process
Before designing, Planetary conducted an audit of Higher Ground and Guidepost Montessori components. From there, I broke down the Guidepost components to their foundational elements and began to reconstitute the UI kit from those and the existing branding guidelines. The Figma color and type styles I created were derived in part from the Lead Designer’s homepage screen mock-up. I filled in any gaps with my own choices regarding type scale but had complete autonomy in updating the components when it came to the rest of the project.
My design process was informed by atomic design principles, building from simple to complex and organizing the Figma file that way. This choice made the most sense when thinking about the variety of uses per component, and how they worked within context of the templates that would make up repeating sections. Reconstituting the components from the foundational elements allowed me to inject more of the branding across the templates, while also retaining a high level of consistency. My intention was to make it easy to mix and match components as needed to create a variety of layouts, reduce design debt down the road with further updates, and make the handoff to the developers as smooth as possible.
Iteration
Iteration on components allowed for a variety of exploration to ensure a contextual fit. I pushed the design of blog post card carousels to include slightly more of the brand’s colors, included author avatars that we’re not present before, and better handles for usability. I incorporated more elements of the brand assets and patterns where possible, utilizing the equilateral triangle logo in headers as well as image blocks.
Lead generation forms are important to Higher Ground as a means of gathering information and required a variety of template designs for various sections of the site. I experimented with developing a natural language form as one possibility, breaking further from the Guidepost design style.
Where it’s at now
All components and templates were approved by Higher Ground within one-to-two passes upon review, and then handed off to the devs at Planetary Corporation. Higher Ground’s refresh is currently being staged and is slated for public launch in Spring 2022.
What I would do differently
Given the tight turnaround time, the project was designed only for the desktop viewport and handed off to Planetary’s devs. I would’ve spent more time developing multiple breakpoints to ensure a complete contextual fit before handoff. Additionally, I would have liked to also include proper documentation to bridge the gap more efficiently between design and dev work.