Heartwood
A design system to propel Spruce Labs’s mission to define the future of brick and mortar retail.
The Brief
Spruce Labs's mission is to help brick and mortar retailers thrive by enabling them to create great experiences. From day one, Spruce has found success by combining technology with a human-centered approach to experience management.
Spruce evolved for years without any real design direction. We created a small library of components early on, but it hadn't changed since. As a result, component availability became the driver of experience design. This created an experience that felt wonky and awkward.
My goal with Heartwood was to create a shared design language to help our team improve Spruce. I decided early on that this would be more than a component library. We needed a tool, or a set of tools, that would scale with the product.
![Heartwood’s core design principles. Heartwood’s core design principles are Humanity, Physicality, Augmentation, and Flexibility](/static/c997e0d9501573013a30217ce535df77/6ca50/Design-Principles%402x.png)
Defining our Design Principles
Before getting into visual styles or components, we defined our design principles. These would serve as stimulus for all future design decisions.
![The Heartwood system architecture. Heartwood’s core design principles feed into shared styles, which are used to design components that feed into features and production.](/static/b269523d79651bf420b40d552aa3d7f1/6ca50/System-Architecture%402x.png)
System Architecture
The next step was to determine Heartwood's system architecture. The last thing we wanted was to create a pretty design system that never gets implemented. We worked with the engineering team to figure out how we could get Heartwood into place and keep it up to date.
![A sample of Heartwood’s shared styles. Shared styles include text, color, layer, icon, spacing, and motion.](/static/d1a3ace525d2b5a5e17cbe9ea745791c/6ca50/Shared-Styles-Alt%402x.png)
Shared Styles
Using the architecture as a map, the next step was to define shared visual styles. We divided our styles into six main categories: color, typography, spacing, iconography, layer, and motion.
![A sampling of new Heartwood components. A collage of Heartwood components including calendars, inputs, lists, and modals.](/static/e3e48196c4a0b9e754684980faa62be2/6ca50/Components%402x.png)
Components
The component design phase began with the humble goal of parity. It was important to make sure we didn't forget to update any existing components. This would let us phase Heartwood into production without breaking anything. To ease the transition, we did a thorough audit of the existing codebase. From this audit, we redesigned each component to use our new shared styles.
![An example of more in-depth component documentation Primary and secondary buttons shown as documented.](/static/fa5fe5668bf9288ecff6a831b2328fb1/6ca50/Component-Example%402x.png)
The previous round of component design was lacking in detail. This caused a problem for the design team. To see a component in detail, one would have to look at production, which was often unstable. This situation meant the design team was often blocked from making progress. To solve this problem, we added in-depth details to our design documentation.
![Examples of cards that tie to specific use cases. Seven variations of the Heartwood card component.](/static/bf48845204546220af67cb4bde96936d/6ca50/Cards-Alt%402x.png)
Cards for Humanity
We spent a week or so brainstorming about cards. We focused on what we could use them for, where they would live, and what types of content they'd need to support. Our goal was to invest in a component that would make the platform more flexible.
![Some illustrations we created to give the experience more personality. The onboarding card shown in a phone.](/static/32efdfcb97b8bacd9ec9b01fc229c541/6ca50/Onboarding-Card-Alt%402x.png)
Onboarding
The new card component was a perfect candidate for improving our onboarding experience. We had already considered an onboarding card as one of its use cases. The advantage of having some of the simple design decisions already made was that we were able to focus on the trickier parts of the problem.
![The new calendar view turned out to be indispensable for teammates. The Heartwood calendar.](/static/42a635aae63a5f028232348813688bd6/6ca50/Calendar-Alt%402x.png)
Teammate Booking
The main consideration for teammate booking was to start with a calendar view. On large enough screens, we opted to keep the calendar visible. Desk staff and receptionists tend to use large screens and like to see the whole team's schedule. This view makes it easy for an employee to find an available time and provider.
![Example of night mode that can inform theming strategy. An example of how night mode could look.](/static/0df127e1dea92d94381bd5dfa4aae77a/6ca50/Night-Mode-Alt%402x.png)
Day/Night Mode
We decided to create “day” and “night” modes to kick the tires on a potential approach to white label theming. The main lift was to define semantic colors, which we could swap out to switch between modes.
![Heartwood Tokens are available online. The Heartwood Tokens site.](/static/553119cf8f28894fcb9e0df40c781a27/6ca50/Heartwood-Tokens-Alt%402x.png)
Heartwood Tokens
Explorations in theming led to the development of Heartwood Tokens. We broke these out into a separate project and I created a static website to share with the team. Giving tokens their own home has the added benefit of making Heartwood more scalable. This opened the door to Heartwood evolving into a more robust set of tools with a cohesive foundation.
Results
Heartwood has already gone a long way to make Spruce useful, usable, and beautiful. By providing a shared language, it has equipped the team at Spruce Labs to continue evolving their core product. Heartwood will continue to play a role in defining the future of brick and mortar retail.