Build or improve your design system
Realtor.com
identity, systems design
Helping Realtor.com update their styleguide
Realtor.com has long been a prominent platform for homebuyers to browse and find a home via web, iOS and Android platforms. With this project, we introduced Realtor.com’s first design system, and initialized a process to better organize the creation and flow component through to development in a holistic handoff cycle.
Finding and defining crossplatform differences
Initially, one of the greatest challenges was tracking down patterns and features that diverged from one platform to another, or ones that didn’t get implemented at all. Each pattern needed to be cataloged across teams and product areas. Decisions were made as to what was best for each platform, while standardizing style and functionality to the best of our abilities.
Appointment selection component as an example, initially had differences in style and functionality across platforms, and was standardized globally in this initiative
Hero components collected from across the product, and organized into new DSM variants made available to designers and developers in the same layouts, with the same feature toggles to solve for all cases
Organizing permutations
Some components were styled uniquely as ‘one-offs’. These are components that should belong to a single instance with variants, but instead follow a rogue pattern. We worked with product owners and dev leads to identify each of these patterns and the state they were in, and consolidate into the most simple possible set of instances to serve the org.
Bringing the style back to product
After making each of these consolidations and improvements to individual components and features, they were assembled back into the designer’s master files that represented the present state and the future state of the product to ensure that team leads and those responsible were happy with the overall changes to the end product.
Single listing page was updated reducing clutter, further increasing consistency across listing types, and improving readability over past versions
In conclusion
It was an honor to work alongside the teams at Realtor.com, I very much appreciated how dedicated each individual team was to their respective areas. Acting as a bridge between them in managing a major design infrastructure project, we were presented with many great opportunities to bring those collective passions and efforts together into something that improved the brand as a whole, and better represented the vision across all platforms in a consistent way.
.png)
