Realtor

Realtor.com is a leading home for sale website offering listings and real estate-related information to over 40 million consumers each month.

Overview

The consumer-facing product was in the early-mid stages of moving from a Ruby application to a Next.js/React application. With over 100 developers working in different teams and time zones on different features of the application, there were many inconsistencies and inefficiencies being created related to component development:

• Duplication of components
• Inconsistencies in the design of a component
• Quality of components was compromised because of time constraints in a sprint
• Accessibility and performance weren’t being taken into account.
• No accountability for components or developers didn’t want to take responsibility for them.

The Solution

A design system and accompanying UI component library were proposed.
This would:

• Eliminate duplication of components.
• Ensure consistency in design, look and feel.
• Ensure the quality of the component.
• Ensure all components are accessible and performant.
• Allow a team to be responsible and held accountable for the quality, maintenance and additions of new components to the library.

Methodology and Process

We drew a lot of inspiration from Brad Frost’s Atomic Design methodologies. Starting with the smallest possible component(or atoms) and building more complex components(or organisms) from there. We had 3 Design System Meetings(DSM) a week to discuss component and system requirements. We would ask questions like:

• Is this component necessary? Does one already exist in another form? If so can we push back and the designer can use the component that already exists to solve the problem. Less is more!
• What are the requirements of this component and how could it be customized? Are we building something that is scalable or trapping ourselves with a component that is too specific?
• Does this component fit into the system?

Once the component was approved and added to the Design System we would:

• Build it to spec with accessibility and performance in mind using React
• Write unit tests using React Testing Library
• Write component tests using Cypress
• Document its use and application using Storybook
• Used Artifactory to release a test version of the component library package that could be used in the consumer environment for testing.
• Released a new minor version(semantic versioning for the win) of the component library and had a dedicated Slack channel for the releases, bugs, support and questions.

We also encouraged other developers outside of the Web Platform Team to contribute to the component library. This fostered ownership and enthusiasm for using the component library instead of referring to old ways and just building their own component.

What I did

I was one of the lead developers working on developing and creating UI components in React.

• Developed a reusable UI component library for teams of developers to use on the consumer facing product.
• Collaborated with designers to build a design system used by all design teams at Realtor.com.
• Worked with various dev teams to consult on wider component architecture and performance.
• Wrote comprehensive documentation about the implementation of UI components.
• Ongoing maintenance support; bugs, feature requests and system improvements.
• Implemented release and communication strategy around system and library updates Supported Junior Developers with peer programming and advice on component development.

Tools used

There were a number of helpful tools that we used to achieve our Design System and UI Component Library.

Conclusion

After 12 months the RDC-UI component library was widely used and we received much positive feedback on the ease of use and time saving it had on developers tasks. It freed up developers to work on the features with comfort in knowing that the components that they were using were to spec and fully supported by a dedicated team of developers.