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