Design System

Identifying the problem

As a high-growth startup, MakeSpace had to move quickly. The company figured out its brand and rebrands along the way and as a result, had a lot of variation in its visual identity.

A customer would experience a different look and feel across multiple touchpoints from a marketing landing page to scheduling an appointment in the app to their interactions with SpaceMakers.

The most recent brand guidelines focused on marketing, but did not translate to the digital product.

Noticing the inconsistencies, I headed up creating a design system based off of the existing guidelines that would work for both marketing and product teams.

Rebuilding the foundation

I started by reviewing site accessibility, such as color contrast ratios, and trying out different layouts using the green background colors defined by the existing branding guidelines.

Through multiple design review sessions and user testing, we ultimately opted for a cleaner look with primarily neutral whites and selective green accents.

At the same time, the engineering team was rebuilding their back-end framework as they ran into the same issues—multiple, incohesive systems. To better prepare for future growth, we implemented a customized version of the  Material-UI React library. Some of the components already created were retroactively adjusted to better fit within Material Design.

Guinea pig project

A component library means nothing without context.

Working between engineering, product, and marketing, we identified an existing project in the roadmap to apply the new design system—the internal booking widget Customer Support agents used to book appointments.

As the design lead on the marketing team, I worked closely with the solo product designer, Ellen Huang, as she reworked and reskinned the new user flow.

We held weekly design meetings to review the components in context, iterate, and get feedback from stakeholders.

Rolling it out

After working out the kinks in the internal booking flow, we applied the new design system to our homepage redesign. During this process, we uncovered gaps in the component library and created new components to fill those needs.

The redesigned homepage drove a 53% increase in conversion rate. More users were submitting their zip code to continue to the next page!

I extended the new design system to our marketing-focused landing pages and coded new email templates.

Iterating on the design system and component library

Design system work is never really finished. We’re constantly learning and iterating.

We continuously update our libraries to ensure consistency between design and implementation by keeping open communication channels between marketing, product, and engineering as well as reviewing components in Storybook.

As new projects head our way, we also strive to maintain internal consistency and quick updates to our own design language.