Design System for Flagship Brand

Product Design, Responsive UI Design

As design lead, I partnered with another designer to fulfill SpareFoot's commitment to overhauling its flagship web experience with a unified responsive design system. The goal was to create a consistent user experience for helping people find storage while enabling SpareFoot's product delivery team to take faster and higher quality swings to solve user needs through A/B testing initiatives.

Setting a baseline.

Drawing inspiration from Brad Frost's Atomic Design Methodology, we conducted a full audit of elements and interactions present throughout SpareFoot's reservation experience to articulate a baseline for the site's current state.

Example slide from the comprehensive design audit capturing headings, fonts, weights, line height, and additional styling inconsistencies.
Another example revealing both redundant and inconsistent card patterns.

A "small" yet mighty breakthrough.

An eye opening exercise we did was to complete the most common user journeys through SpareFoot's core experience on our smallest supported viewport size - 320px. My design partner brought in old iPhone and as we used the site, it became immediately apparent our base text sizes were too small and contributed to readability issues.

Navigating the site on an older device outside our typical design tooling unlocked new insights for how to identify and prioritize experience opportunities.

Back to the fundamentals.

Inspired from the small device exercise, we set out to establish a new, simplified typography system that would be approachable and readable across all device types, especially mobile platforms.

A streamlined set of legible headlines, text types and links would be the new foundation for SpareFoot.
A before and after comparison from applying the typography updates.

Falling in line.

Another key aspect to the new design system was to create a mobile-first, responsive grid system that would gracefully display content on any device size. SpareFoot previously did not use a grid which resulted in pages feeling inconsistent when flowing through the site.

We opted for 320px, 768px and 1200px breakpoints to represent the widest range of devices commonly accessing SpareFoot to ensure coverage for most platforms.

Spacing, padding and margins, oh my!

With a clean typography system and formalized grid, we were able to shift focus on articulating a rationale for how elements would display in relation to each other. This included exploring how new content sections should flow throughout experiences. Building off our grid, we created a universe where all elements would be spaced in intervals of 8px, which resulted in a balanced rhythm at a page level.

Off to the races.

Feeling confident with a cohesive foundation in place, we were ready to build out all components for the site. We created a prioritized list of core pages and their related components, and began rebuilding them with the new design styles and rationale.

Example of how we created and displayed components. Mobile, tablet and desktop iterations were created along with any relevant interactions and details.
Another example showing a common card pattern on SpareFoot, the "Facility Card". We designed the most complicated possible version of the cards to ensure the wide range of dynamic data would display correctly.
We partnered with a third designer to create a unified set of icons and illustrations that honored our 8px interval specification.
Despite the SpareFoot brand colors being limited, the audit revealed dozens of slight variations, which we simplified to a handful of colors. We additionally had to do updates to ensure AA accessibility compliance.

Interaction states.

Capturing customer information to make a storage reservation is critical to our experience, so we created text fields that would be easy to use, provide contextual clues and feedback, and be tailored especially for mobile devices. One example is having the native number pad appear when entering phone information.

Bringing it all together.

Armed with all of the fundamental structural elements defined and base components built, we were able to layout representations of our primary customer journeys. After creating mobile, tablet and desktop reservation experiences, we were able to tackle secondary flows.

At this point, building the secondary experiences became increasingly faster since we became so comfortable with the overall system. Similar benefits would be achieved by the engineering teams and our ability to rapidly test hypotheses.

A representation of a "Facility" core template experience for mobile, tablet and desktop views.