Neighborly
Design Leadership
Neighborly has acquired over 29 home service brands. How might we maintain the visual identity and brand integrity of each brand while incorporating a style that encompasses Neighborly?
Table of Contents
I. Facts at a glance
Background
II. What is a Design System
III. Why did we need one?
Problem Statement: Enter Accessibility Requirements
Defining Key Pain Points
Defining Benefits
IV. Steps I Followed to Create Design System
Step 1: Buy In
Step 2: Design Exploration
Step 3: Creating Design Foundation
3.1 - Brand Colors
3.2. - Typography
3.3 - The Anatomy of the button
V. Build
VI. Key Takeaways & The Future
I. Facts a Glance
Role: Primary UX Designer
Industry: Home Repair Services
Duration: 7 months, and counting.
Challenges: Previously, each acquired sub-brand was operating its websites on different platforms. We are migrating each website to be brought on our platform
Results: What initially started as ensuring each brand’s color was compliant with WCAG 2.1 Accessibility, later turned into creating an entire design system for the entire Neighborly universe.
Background
I joined Neighborly almost a year to this day of writing this. I was hired as their second full-time in house UX Designer. Until then, there was a UX Design Lead who partnered with a design agency. Together, we would provide complete wireframes and hi-fidelity prototypes so the design agency could develop complete HTML for each site.
Neighborly is a parent company of a family of over 29 home services, such as plumbing, landscaping, housekeeping, power washing, and more. Neighborly, while the company itself has been in business since the early 80s, through its new acquirements and push for more of a digitally focused company, the two UX Designers were then tasked to help bring eventually all of its brands under one “Neighborly” roof, so-to speak. The brands are to maintain their personal identity and feel, while also including the slight visual presence of the Neighborly brand (mainly the header and footer).
As the website migrations were well under way even before I arrived, I realized that as wireframes, designs, and assets were being flushed out for each brand to present to brand stakeholders, I began to notice inconsistencies between elements. For example, I would notice that a brand of ours, Five Star Painting would have a completely different header hierarchy and image dimension compared to another sub-brand of ours, The Grounds Guys. It seemed like every brand was created, designed, and developed a la carte, instead of them being systemized.
II. What is a Design System?
A Design System is a set of standards to manage design at scale. It consists of colors, styles, typography, grids, components, icons, assets, and much more. It is a single source of truth for teams that ensures consistency across different pages and channels.
I like to compare it to a cookbook. Designers are the chefs, and the different components we create would be similar to ingredients from a recipe. Is anyone else hungry?
III. Why did we need one?
Enter: Accessibility Requirements
It’s ironic because the solution of creating a Neighborly Design System came out of void the Design team was experiencing, and furthermore a potential legal problem.
You see, before the Design System got under way, my boss and I noticed at the time that most, if not all of Neighborly’s brands (including Neighborly itself) were not 2.1 WCAG Compliant, especially in a color-contrast sense.
As UX practitioners we wanted to change that and usher in the new digital generation of Neighborly. One who keeps accessibility design at the forefront of our organizations minds. Below is an example of a Neighborly blue that changed at a company wide level after we introduced the noncompliance of it. Additionally, there are some color recommendations for two other brands under the Neighborly umbrella.
Problem
How might we create a systemized design process that will be adopted company-wide? Taking time out to create a design system was initially met with dismissal and skepticism but eventually, we received the buy-in we needed.
Benefits
Some of the benefits of creating a design system include:
Design + Development can delivered quickly and at scale.
It creates UI consistency across brands, channels, and siloed departments.
It can be used as an educational tool for junior designers and
additional content contributors.
It alleviates strain from piecing together design assets.
To put it concisely, we sought out to prove that creating a design system would make us faster, better, stronger.
IV. Steps I Followed to Create Design System
Below is part of the anatomy of different buttons within the Neighborly ecosystem.
-
Before we started building out Neighborly’s very first design system it was important to get stakeholders on board. This would ensure the success of this project,
-
I took inspiration by two of the best resources: the book Atomic Design, by Brad Frost, and a site called Design Systems Repo. Frost’s book describes the building blocks of creating robust design systems, while the website gave visual examples of live design systems.
-
We decided to focus first on the foundational elements (atoms) of our design system, such as color palettes, fonts, buttons, etc.. in our next iteration we will incorporate more complex blocks (organisms, molecules). We created components using Axure RP 10 as it served our design needs better.
V. Build
Since we were a team of two Designers, we did not have the dedicated resources to work specifically on the design system. Also, we needed to account for the extra time we needed to document the components in addition to the main scope of our work. Instead, we sought opportunities to continue to work with our design agency to incorporate building the design system components that we’ve created, into the already existing efforts. I would consider that a win!
For example, for the Grounds Guys website migration update, fundamentals such as typography, color, buttons, and even full components were built out in HTML. As new brands are incorporated and acquired down our pipeline, we plan to continue with this approach. Of course, we’ll need some additional designers eventually to help truly digitize the future of Neighborly’s UX Department. .
VI. Key Takeaways + The Future
Overall, I learned the value of a design system by needing one, not having one, and creating one. The work of our small design team was far from over. We had only started a conversation. The next stages called for close collaboration with our developers to standardize and implement code snippets for existing elements and layout guidelines for the creation of new patterns.
The most successful part of the initiative was introducing component-centric thinking at an HTML level, which makes for a quicker design process across all projects. I hope by adopting this system, company-wide it will help the product, IT, and design teams to rapidly prototype new features (at scale), improve the onboarding process for new designers and developers, as well as speeding up the handover process.