Design System


MakeSpace is a full-service storage startup that manages the pickup and delivery of your items with a digital inventory to keep track of it all.


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.

Collection of screenshots of various MakeSpace expressions over different touchpoints.

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.

Process & Research

Screenshot of the old MakeSpace homepage run through the WAVE Web Accessibility Evaluation ToolScreenshot of early iterations testing layout and color backgroundsScreenshot of early iterations testing typography scales

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.

Old booking widget

Macbook Pro
Screenshot of OLD MakeSpace Booking widget

New booking widget

Macbook Pro
Screenshot of NEW MakeSpace Booking widget

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.

Old homepage, desktop

Macbook Pro
Old MakeSpace homepage, desktop

New homepage, desktop

Macbook Pro
New MakeSpace homepage

Old homepage, mobile

iPhone 12 Pro
Old MakeSpace homepage, mobile

New homepage, mobile

iPhone 12 Pro
New MakeSpace homepage, mobile

Marketing landing page for user onboarding

Macbook Pro
MakeSpace Automated Onboarding Flow, desktop
iPhone 12 Pro
MakeSpace Automated Onboarding Flow, mobile


Macbook Pro
MakeSpace email, desktop
iPhone 12 Pro
MakeSpace email, mobile

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.

MakeSpace Design System — Component Library — cover pageMakeSpace Design System — Component Library — Color and logosMakeSpace Design System — Component Library — TypographyMakeSpace Design System — Component Library — Copy formatting and abbreviationMakeSpace Design System — Component Library — Grids and spacingMakeSpace Design System — Component Library — Inputs, buttonsMakeSpace Design System — Component Library — FormsMakeSpace Design System — Component Library — Data displayMakeSpace Design System — Component Library — Headers and navigationMakeSpace Design System — Component Library — IconographyMakeSpace Design System — Component Library — Product Design Values