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.
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.
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.
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.
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.
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.