The Problem

Homesnap did not have a design system, resulting in the following:

• No common design and brand identity language across all teams

• More team alignment meetings

• Visual inconsistencies across the board, resulting in design and tech debt

• No easy way to onboard new team members

The Goal

Put together a small team to create a scalable design system that is easy to understand for designers, developers and product to achieve the following:

• Define a common design language for the Homesnap brand

• Increase team efficiency for projects

• Tackle design and tech debt

Research

Before kickstarting the design system itself, it was important to gather pain points from the design and dev teams to better understand the problem at hand and how it could be solved going forward.

Design Team Findings

Development Team Findings

Plan of Action

After putting together a small team of designers and developers, we took our teammate’s feedback and came up with a plan going forward. We conducted an audit of our current code and design files and found multiple inconsistencies from type sizes to color palette. In order to make the biggest impact at the implementation of a design system, we focused on the following:

• Updated color palette

• Defined typography scale

• Re-define rules for primary and secondary buttons and text links

• Update commonly used assets such as map pins and listing cards

The Homesnap design system would continue to be a living document where styles would continue to be updated and added on a project by project basis. Allowing for an ever-living design system document allowed for cross-team collaboration and smaller updates to prevent issues with legacy code.

Improvements

Color Palette:
Working closely with the development team, we were able to pull the existing hex color codes in the system to figure out what was currently being used. Through the initial audit, we identified the following:

• Multiple one-off situations where a color hex code was assumed.

• A grayscale palette that didn’t match the Homesnap brand. There was a mix of warm and cool tone grays.

• No defined rules regarding color use.

From there, the team narrowed down the color palette to reduce one-off situations and create a color palette that felt cohesive across the board.

Typography Scale:
One of the biggest changes implemented at the beginning, was a newly defined typography scale. The original typography scale was minimal, and didn’t have a lot of visual contrast between the different header styles nor did it go off of a specific scale for scalability.

To create more visual contrast and a scalable typography system, the team agreed on the Major Third scale, the most common typography scale used in the industry.

Buttons:
Rules regarding buttons did not exist. There was a lot of design and tech debut to clean up for the button styles, making it easy to set ground rules going forward.

Using the already established 8px spacing rule, new button rules were created. Due to the nature of varying text lengths, we decided it was best to set spacing rules vs. establish a set width for the buttons.

Listing Components:
Similar to the button components, there was no standardization for listing, both on the map view and the list view. Depending on which platform was being used by the agent, the styling for the listing card itself, varied. We wanted to assure the visual experience remained the same across the board, so we opted to give the listing card a visual face lift that would be utilized on all plaforms (responsive web and native app for iOS and Android).

Improvements made:

• Updated listing status, located in a more common area according to competitive apps

• Easier to read listing details on a plain white background

• Ability to share and favorite a listing

In addition to listing cards, another common UI element added to the design system for immediate use were the map listing pins and the statuses for a listing, allowing a designer to easily change a status in a design without having to do it manually.

Project Outcomes

• Design Team:

  • Less time was being spent digging through older files for assets

  • Designs felt more consistent overall

  • Less time spent on design QA

  • Feeling more confident in their designs would meet a PM and stakeholder’s needs and wants

  • Feeling empowered to help make impactful decisions for the future of the Homesnap brand

• Development Team

  • Developers no longer had to assume design decisions with a refined library to pull from

  • Less meetings on their calendars for design QA sessions

  • Albeit time consuming at the beginning, cleaning up the code was needed

  • Felt success in crossing off old tech-debt to-dos

The Homesnap design system is a living document and will continue to grow. Plans for future updates include:

• Focus on separate design systems for iOS and Android

• Continue to add smaller components such as inputs, toggles, switches etc.

• Work on more complex components to speed up the design process

• Continue to provide UI and UX updates to components to help the brand feel fresh