MakeSpace: Design System Revamp and Revisions
Role: Lead Product Designer
Dates: 2021-2022
When I joined MakeSpace, it was clear that the product design could be improved. The consumer website suffered from UX issues and a fragmented UI. A full redesign wasn’t feasible as the engineering team focused on tech debt and new features. However, with an evolving brand guide and the introduction of a Material UI component library, I saw an opportunity to enhance consistency in new designs by strengthening the Design System.
MakeSpace had an existing design system in Figma, but it required significant updates. Our typography included 20 official styles and 40 linked styles, leading to semantic confusion with “Mobile” and “Desktop” labels misapplied. Many elements were just frames instead of components, and few utilized Figma’s variant feature. Although we aimed for an 8-pt grid, not all components adhered to this standard. Additionally, the entire system—logos, colors, typography, and components—was crammed into a single long artboard.
For reference, you can view the old design system here.
Grids and Spacing
Our desktop layout grid was one element of the design system that quickly showed its weaknesses. The 12-column grid was based on a 1440-px breakpoint with margins of 120px, gutters of 20px, and approximately 81.67 px columns. There were two obvious problems. First the column size didn’t equate to a clean round number - no matter how many columns were used. The second was that larger desktop elements tended to need more than 20px of between them for it to feel like there’s enough white space. And in fact, the 20px gutters were the same size as those used on mobile - only the columns were scaling up in size.
The Old Grid Styles
I retained the 120px margins due to visual appeal, widespread use, and alignment with our 4-pt grid. I chose 36px gutters and 67px columns to balance larger gutters with whole-number columns while adhering to the grid.
I removed the tablet grid entirely because we didn't design for a static tablet breakpoint. Instead, we annotated how elements should adapt between 1024px and 480px. This decision was based on the principle that a design system should focus on common cases rather than every edge case to maintain usability and consistency.
The New Grid Styles
I addressed issues with element sizing and spacing relative to our 4-pt grid. Large buttons were 55px high due to inheriting their size from internal margins and text line height. I adjusted large button sizing to 56px and cleaned up the text settings and margins, ensuring all buttons adhered to our grid.
To standardize button widths, I reviewed existing designs and our grid. After consulting with engineering and the rest of the design team, we settled on 170px (two-column) and 376px (four-column) widths for desktop, and 327px (full-width) for mobile. While exceptions may occur, these standards will improve consistency, encourage concise button copy, and streamline engineering work.
Button Styling Specifications
Revising the Typography
Perhaps the most important revision I made was to audit and consolidate our type styles. The MakeSpace design system uses only one font, MakeSpace Biotif, a san serif, in just two weights, semi-bold and regular. Yet despite the seeming simplicity of our type system, the number of linked text styles made it prohibitive to quickly style text and there was a extensive duplication of sizes and styles. My first step was auditing all of our linked text styles and creating a visual diagram to see just how much overlap there was and just how similar our various styles were to each other.
Audit of Old Type Styles
Font styles were often labeled as "mobile" or "desktop," leading to duplication when designers needed 16-pt body copy for both mobile and desktop for example. Additionally, many similar one-off styles had been created for specific use cases, further complicating the system.
I reorganized the typography into four main categories: headings, subheads, body copy, and UI copy. For headings and subheads, I created a new type scale using a major-thirds system from a 16pt base, aligned to a four-point grid. This resulted in six heading sizes (60, 48, 40, 32, 24, 20pt) and three subhead styles.
For body and UI copy, I consolidated styles to four sizes (18, 16, 14, 12pt), labeled as large, medium, small, and x-small. The main difference between body and UI styles is the font weight: regular for body, semi-bold for UI. This new system eliminates the semantic issues and was flexible enough to be used across both desktop and mobile designs.
New Type Styles
To maximize implementation of the new styles, I chose to edit and rename existing linked type styles as much as possible, and also reviewed and adjusted our main design files to make sure nothing had been broken too badly by size changes. The other key piece was evangelizing the use of the new styles among the other two designers on the team and encouraging them not to create new styles on the rare instances a one-off style not found in the design system is needed.
Component Updates
One component I was unhappy with was our tab component. Our dev team was utilizing Material UI (a Material Design-based framework) to build a content library but our tabs seemed quite different and frankly worse than those in Material Design. The old design utilized a strange gray-green background color and lacked the dropshadow that characterizes an element’s spatial positioning. Additionally, although the modal container was not actually a part of the design, putting the tabs in that element made it appear as though that was the only proper usage of tabs. My fixes were simply to switch the background color to a neutral white, remove the container, and add a dropshadow. Although these were simple changes, the result was a vast improvement.
Updating Tab Styles
Other key components that were missing from the design system were headers and (on mobile) hamburger menus. Part of the reason for this is that little standardization appeared to exist on the live MakeSpace site. The first part of the task was to work with our product team to audit and then standardize what links we wanted to have in both the signed in and signed out states. From there it was merely a matter of applying our new design language and relevant Material Design principles to create this component.
Header and Menu Components
Making the Design System User Friendly
A design system aims to reduce ambiguity, increase efficiency, and ensure consistency in product design. To do this, a design system needs to be easily navigable, provide a framework for design decisions, and offer standardization beyond basic elements.
To improve navigation, I moved away from the old system's single long artboard approach. Instead, I organized content into distinct Figma pages with clear semantic labels and further divided it into appropriate artboard groupings, laid out from left to right with clear titles and sections.The new organization includes pages for: Color and Logos, Typography, Grids and Spacing, Components, Iconography, Product Design Values, and Further Resources (which links to copy tone and branding documents)
You can view the full Figma file at the end of the case study to see the detailed organization within these pages.
Design System Navigation and Organization
I also wanted to create a set of design principles that all MakeSpace designers could use going forward as a consistent rubric for evaluating design choices and their impacts. For maximum impact these principles needed to be aspirational but also achievable and quantifiable. They also needed to be in line with the brand values and overall product positioning of MakeSpace as a company. I wanted them to be something that the whole design and product team embraced.
To that end, I created a shortlist of three product design principles that made sense to me and asked the other two designers on the team to do the same. Then the three of us worked together to align on a joint list. Then we eventually trimmed the list to five principles, gained buy in from our teammates on product and officially added the following as MakeSpace’s Product Design Principles.
The Product Design Principles
One last resource that we needed was clarity on how to format and abbreviate common types of numerical data like phone numbers, dates, times, months, etc. I began by reviewing what was live on the site and where inconsistencies appeared, making a judgement call about the best and most consistent ways to standardize things.
Copy Formatting Guidelines
Conclusions
It’s hard to measure the impact of internal facing projects, like design system work, especially on a small team when you can’t measure overarching changes to say number of new features shipped or A/B tests per app release. However, I’m confident that on net the time invested in our design system not only yielded a better design system in the abstract but led to concretely better designs being shipped and a clearer understanding of what new designs at MakeSpace should look like. Take a look at the new design system for yourself.