- Contact
- Work
In my time at Realogy's tech-focused internal team called ZapLabs, I oversaw all consumer-facing products. Realogy (now known as Anywhere Real estate) is the largest holding company of Real Estate brands, including: Century21, Better Homes & Gardens, Coldwell Banker, ERA, and more.
When I joined ZapLabs in 2017, the team had grown from 4 to 14 teams, and we had to wrangle what had become a mess of errant patterns, duplicated experiences, and far too many button patterns. The team had already identified a potential solution: creating a design system. Only, we weren’t quite sure where to start.
I oversaw a team of 6 designers that ranged from junior to mid level. On this project, I also had the assistance of a visual designer, and collaborated closely with a team of 8 product managers and a handful of engineering managers to execute our vision.
We were lucky to have a dedicated team for UX Research, who collected feedback from Brokers across Realogy's brands.
Our engineering org was organized with dedicated front end and back end engineers, as well as a native mobile team.
My role in this project was to lead the concept development and definition, as well as drive the team into execution for our dlux.zaplabs.com microsite.
I had the opportunity to conduct design thinking events that were foundational to defining our design system, as well as delegate key activities across the team, all while contributing directly to the content guidelines for Design Principles, Mobile First, and Grid behaviors.
.png)
.png)
After realizing this initiative was bigger than just design, in Dec 2017 we got together with our developers and asked: why was it such a challenge to keep work to a consistent quality? why did shared spec artifacts only get us so far?
We looked at other design systems. We learned we were missing a few key items: A living code repository and a core foundation of shared principles.
Given the complexity of our White Label products, our developers decided to eschew popular frameworks. We chose to build out the patterns as reusable web componentsin a common vanilla javascript markup for maximum portability across different apps, including PWA’s. Components could be (and later were successfully) ported into frameworks like React.js, Vue.js, etc.
.png)
While our development team went to define their own practices, we created a list of attributes we admired in high-quality design work: things like Clarity, Beauty, Intuitive.
The team never really found these actionable, and they weren’t helping us stay aligned as the team grew from 4 to 14 designers in the course of a year.
I wanted to know from the team, what keeps getting in our way of offering great design to our agents? We then wrote out a list of our worst habits.
I asked the team, how do we counter these habits, and define themes that we felt empowered us to do better. With fresh eyes a few days later, we narrowed it to just 5.
.png)
We took some of our most egregious legacy patterns, such as our Request a Tour modal, and re-imagined it with our new system. Could the UI kit we created fix our lack of responsive layouts? Could the new standards easily flex to our Brand patterns?
We vetted our designs and web components for extendability within the production environment for a full month before porting the components to new features, ensuring stability.
.png)
.png)
Our design system impacted is in a bit of a cascade as we hit each milestone:
Milestone 1: Delivering a V1 sketch library
By simply corralling all of our patterns into a shared library, released to the team mid q4 2017. Our designers were no longer creating duplicate work for their contributing engineers, providing a more consistent end UX.
Milestone 2: Delivering our first web components
Q1 & Q2 of 2018 was all about building out our code components. We launched our first dynamic web component, the global sites navigation, in June 2018 to most of our consumer brand products. Our developers no longer needed to recreate existing patterns, coding to new DRY, SOLID, stamp-able standards.
Milestone 3: Creating our first DLUX-only feature
Our Custom Pages feature was the first product delivered entirely with DLUX standards & web components. We even replaced some of our legacy work.We were able to release parts of this feature outside of our monthly release cycle, accomplishing a continuous delivery goal alongside this milestone.
Once launched, it was our first truly responsive feature.Since hitting these milestones, we have converted our entire product development process to utilizing the DLUX standard, and these web components are driving the rapid development of our next generation of real estate products.
%20(1).png)
Of the many products ZapLabs offers, one key offering are Agent Websites. Any agent at one of our large brands had access to their own SEO optimized listing search website. This meant for every brokerage, every agent, under every brand, there was a unique URL and dedicated website. Personalization became a hot topic from our user research. Agents needed to be able to create landing pages for unique listings to support their seller clients, or offer information about neighborhoods in their market, in addition to hosting a plethora of unique marketing experiences.
I worked in a pod consisting of Maryam Bacchus, Product Manager, David Gil, Lead Engineer, and other pod contributors to deliver this v1 custom page content creation experience. We worked in an agile methodology, delivering the design in one sprint and development in two.
The goal was to offer a light weight custom page creator UX within our legacy CRM to allow Real Estate Agents and Brokers a simple, highly flexible content experience. The UX needed to be simple, straight forward, and provide room for iteration as new functionalities, such as contact forms, that would be appended to the experience overtime.
Brokerage partners had relied on manual deployments to update homepage content for their global websites. We wanted to give our partners an easier way to self-manage content in their homepage carousel, and allow them to link high quality hero images to featured listings or unique marketing content to support their digital media mix. Our goal was to offer something completely self-service, that would give brand teams freedom to update and manage their homepage hero content.
This became another quick project working with Junior designer Jessica Dee, Engineers Federico and David, and our product manager Saurabh.
We iterated quickly in low fidelity and moved into final UI within one design sprint, delivering the feature quickly into the hands of our engineering team.
This project leveraged our DLUX design system, saving time for both design and development.
Low fidelity iteration
