I accelerated product development timelines and delivered significant growth in key business metrics by executing a wide ranging experience improvement program.
+8% buyer submits
+12.4% in-network submits
+10% search efficiency
Search
Design Strategy
Roadmap Planning
Resourcing
Quality Standards
Product Design
UX Research
Content Design
Accessibility
Design System
Experience Vision
Augmented Reality
Since it's early days as an industry-focused real estate data aggregator, StreetEasy had evolved into the leading real estate marketplace in New York City. However, design and tech debt was making it difficult to pursue new business opportunities in product and online consumer experience was falling behind competitors.
I executed an experience improvement campaign that elevated the consumer experience, delivered on a number of immediate growth goals and increase the speed of the product development cycle.
I approached this in 3 steps:
1
Close Foundational Gaps
Define Quality Standards
Build a Design System
Meet WCAG 2.1 AA Standards
2
ID and Rank Quality Issues
Benchmark Competitors
Create a Repo for Issues
Prioritize Quality Issues
3
Fix Priority Features & Flows
Secure the Investment
Large Fixes: Map Search
Small Fixes: Carousels
Creating Design Principles: a Shared Understanding of “Quality”
Crafting quality experiences requires creating agreement on what “quality” means. I led a series of workshops with my team, cross functional partners and peer leaders to create a shared definition of design quality that focused specifically on what mattered most to StreetEasy and it's users.
After creating this set of guiding principles, I shared them widely and persistently in all-hands meetings, 1:1s with peers and senior leaders, and in every setting where the product is discussed, especially design reviews.
As a result, these six principles became part of the daily vocabulary of the company and standard consideration in any design review or product discussion that followed. This alignment on our specific meaning of experience quality led to more efficient collaboration and more connected experiences as it encouraged broader end-to-end thinking when considering each smaller part. It also invited new voices into the discussion by giving vocabulary to those not as accustomed to commenting on design.
Building a Design System
StreetEasy did not have a design system and it was causing problems:
Inconsistency in visual and interaction design and subpar user experience
Wasted design and development time creating variations of existing components
Gross inefficiency in product-wide updates such as the brand refresh
Rampant variability leading to a fragile system and difficult troubleshooting
We needed a set of high quality standardized components in libraries used by design and engineering. I learned that previous attempts to create a design system had been unsuccessful, so there was reasonable skepticism among designers and engineers.
I worked closely with the head of engineering to align on the benefits and goals of the initiative. With his support, we were able to clear technical hurdles that had hampered past efforts. Then we set up a cross-functional design system team to establish the structure and first components. I assigned a designer that was excited about the challenge and worked closely with her through this initial phase.
The initial period was fast-paced and scrappy, but the next phase would set up the system for long-term sustainability. I distributed Design System responsibilities to a larger set of designers and continued supporting the team directly.
I led them in creating:
an efficient repeatable process for component creation and documentation
a vision for a mature design system
a roadmap and prioritization process (RICE + anticipated product needs)
an adoption and maintenance strategy
Today the design system, living in Figma and React libraries and with extensive documentation in Storybook, has over 35 high quality components and has been adopted by 100% of development pods and designers. It has sped design and development delivery, integrated accessibility into the experience at scale, and drastically reduced system complexity and maintenance costs, clearing the way for the efficient launch of new experiences.
Detailed documentation of design system component was created by Sr UX Content Designer
Example: A quick look at a competitive set showed that StreetEasy's old "keyhole" map offered less utility than most.
I'll start with examples of some the impactful changes we made to the parts of the search experiences. Then I'll explain how we chose where to focus for maximum impact. And finally, I'll describe several of the foundational and product-wide changes I led to ensure long-term success of the search experience for customers and the business.
Modernizing Key Pieces of Search
Map Search
The first major initiative in the core search work stream was to create a map-based experience on the search results page. Ultimately, this work resulted in +12.4% buyer submits to StreetEasy Expert Agents.
A modern hybrid approach that allows apartment seekers to combine a visual geo-based approached with the benefits or a list view
The old search results page was narrow and featured a small map with limited utility. This forced users to rely on difficult neighborhood selection interactions or search broadly – particularly difficult for new NYCers.
This was the first major project for the Core Search Work Stream that I established. I has able secure appropriate resourcing and support through the annual planning process. With clear goals and broad support of senior leadership, I was able to set the team was up for success from the beginning.
Through weekly reviews with the designer and weekly syncs with the project team, I provided the initial design strategy and ongoing support. I also made sure key stakeholders were informed and aligned throughout the process. And I ensured the appropriate UX content and UX research resources were being utilized at the right times.
Some of the more challenging questions included:
How much of the map should be visible at first?
How where should property detail information be viewed? New window? Overlay?
How big and detailed should property preview cards be?
How to best show multiple units at the same address?
What should the low and high end of zoom levels be?
How many listings do we show at a time on the left?
What actions lead to a full refresh of the results set?
What an appropriate density of property marker on the map?
How do you give the appropriate level of visual prominence to featured listings?
Problems solved along the way:
Interaction design complexity required closer design/engineering partnership
Due to the complex nature of the map interactions, I supported the designer in partnering directly with the front end developer to try quickly prototype interactions. A quick feedback cycle was needed to see how interaction decisions would actually feel and perform.
It had to accommodate sales and rentals marketplaces, solving for competing concerns
I guided the PM and designer in breaking the work into pieces that made sense for sequential launch and testing. I also worked with senior leaders to clarify the metrics that mattered so we didn’t fail to recognize success or impede a full launch due to irrelevant metrics. More on that in the carousel example…
It would disrupt an established advertising product
I engaged the advertising business strategist to turn the inevitable disruption to the current ad model into an opportunity to accelerate launch of the more performant next generation ad model. We ended up increasing views on sponsored listings while waiting for the new ad product to launch.
We needed to minimize disruption to such this central part of the experience in the transition
And I worked the PM and designer to break the work into pieces that made sense for sequential launch and testing. I worked with senior leaders to clarify the metrics that mattered so we didn’t fail to recognize success or impede a full launch due to irrelevant metrics. More on that in the carousel example…
Image Carousels on the Search Results Page
An example of one of the smaller, but still impactful enhancements was adding image carousels to the search results page on all platforms.
This small change led to +10% search efficiency.
Why hadn’t this industry standard feature been rolled out sooner? It had, but was rolled back due to a decrease in raw home detail page views. That metric was important when the business was focused on a rentals advertising model. The business' focused had long ago shifted to the sales/success fee model, but some of the old metrics were still being tracked. With the search work stream and its goals clearly established I was able to prevent a repeat of that erroneous assessment.
StreetScape Augmented Reality
As a very different example, this project was a reaction to a well-funded national competitor's planned entry to the NYC market. I helped blunt the impact of this threat by leading the rapid creation of an augmented reality feature. The result was well-timed publicity that took attention away from the launch in question. After pouring millions into paid search and failing to get traction, the competitor eventually withdrew from NYC.
I led and supported this work by:
I successfully argued for the innovative AR feature over a copycat of competitor's defining but lackluster feature
I set clear success criteria and used those criteria to focus and guide the team throughout
I made sure sure requirements and bugs were prioritized in a way that would deliver success
I sourced talent, secured funding, and provided creative direction for creation of the 3D elements
I guided evolution of the feature post-launch to ensure it created long-term value with minimal additional investment
Assessing, Prioritizing and Measuring Quality
Search Experience Benchmarking: User Testing Competitors
In product planning meetings, I successfully advocated for a new work stream to modernize search. I assisted in hiring the PM that would be at the heart of the new work stream. I assigned a senior product designer and worked closely with the team to set clear mandate and roadmap and to make sure senior leaders remained informed and aligned.
The initial roadmap was prioritized with one big swing and a series of smaller high impact, lower effort improvements.
Part of the pitch for resources to address the core search experience
As demonstrated by the competitive side-by-side of the old search results page, we knew that the search experience was lagging behind critical most of our competitors.
To get a more objective user-centric understanding of the problem, I worked with the UX researcher to test a set of user search “jobs” performed in our experience against that of a small competitive set:
How difficult is it to evaluate a search result set?
How difficult is it to evaluate an individual listing?
The study revealed clear deficiencies in a number of areas with specificity and gave a sense to the severity of each. These insights served as the foundation for an experience improvement program that paired opportunities to improve the experience with growth and other business goals.
The flow for identifying, prioritizing and addressing experience problems (left) and the Expereince Opportunity Backlog (right)
Addressing Foundational Challenges
As StreetEasy evolved beyond its startup days, the search experience did not keep up. This was evident in a number of ways:
Visual and interaction pattern consistency was poor
Web accessibility was poor (based on WCAG guideline compliance)
There was no clear platform strategy (native mobile/mWeb,/desktop)
The visual expression of the brand was out of date
There was no holistic vision for the search experience
These quality deficiencies were interrelated. They were slowing down development, making maintenance difficult and expensive, delivering a substandard experience to our customers and preventing us from effectively launching new business critical experiences. I took a proactive and collaborative approach to tackling each of these challenges through a series initiatives that prepared the platform for years of future success.
Data-driven Platform Strategy
The StreetEasy experience is delivered through a web application on both desktop and mobile, as well as through two iOS and Android apps. There was not a clear strategy to guide decisions about which platforms to design for and how. There were vague mandates for “mobile first” and “complete parity” that were often in conflict with other requirements of projects. These blanket approaches were ineffective and expensive, ignoring the strengths and unique use cases of each platform. The lack of clarity consistently caused churn, rework and missed opportunities.
I initiated a cross-functional project including UX research, data science and the mobile tech lead to analyze current activity across all the platforms and create clear guidelines for supporting different experiences across the various platforms.
After mapping differences of jobs to be done by the 3 critical personas and how they move through the system of platforms, I worked with peers and senior leaders to get alignment on a new targeted approach for building the right things on the right platforms. I then incorporated a new step into the design process that accounts for those decisions.
As a result, projects began moving faster, platform considerations became a standard part of early project conversations and platform focused projects delivered higher quality and innovation. Ex. StreetScape AR
An excerpt from the platform study that was the basis for the new platform strategy
Brand Refresh
The marketing team had worked with an agency to develop an exciting and long-overdue update to StreetEasy’s visual brand. However, they struggled to get the new look applied to the digital product. The overall org structure and lack of design system made it very difficult to execute projects that cover the entire product surface area. Ownership was hard to determine and no one wanted to give up any of their pre-allocated resources to make this happen.
I assembled a cross-functional team (including brand, product design, engineering, and PMO), drafted a plan, and worked with leaders in product and engineering on resourcing.
We completed the product-wide up fit while minimizing expense and disruption to the experience – much of it integrated into pre-planned product initiatives. This approach became the template for addressing future product-wide changes.
Executing the product-wide brand refresh
Accessibility Remediation
Building on the lessons of the brand refresh and with help of the new design system I led an important initiative to make StreetEasy accessible to people with disabilities in compliance with the American Disabilities Act. This major change management project required building support from leaders at all levels. In addition to remediating current experiences to WCAG 2.1 AA standards, I made sure we had clear accessibility standards in place for all future work for both design and engineering (working with a great front-end manager as well as the head of Engineering).
I also made sure each team at StreetEasy (including senior leaders) had an understanding of what web accessibility is, why it’s important, and how it’s directly relevant to their goals. I did this through an all-hands presentation, a lot of 1:1 campaigning and follow-up, and by coordinating this work with the ongoing development of the design system.
I established a designer as our accessibility SME with a mandate to up-skill the rest of the design team on accessibility best practices, both for the web and native mobile. I then jumpstarted the remediation process by mapping the web site and prioritizing a “golden path.” This provided the clarity the engineering team needed to start working quickly with their design accessibility resource supporting closely. And it gave senior leaders confidence that we were addressing requirements thoroughly and efficiently.
An excerpt from the high-level design process
Experience Vision
As a complex product with several coexisting business models, it was always challenging to communicate the year’s business and product strategy in a way that everyone could understand and get excited about.
I developed a StreetEasy Experience Vision that showed what it could be like to use StreetEasy in the future once we had built all the things we had planned. This was informed by the current business strategy, product roadmap and backlog, conversations with senior and peer leaders as well as a series of workshops I facilitated in partnership with the mobile tech lead to understand emerging mobile technology and its potential application to our known customer problems and business priorities. I then worked with a brand designer to create the final visual presentation.
This vision energized teams across StreetEasy and provided clarifying points of reference in countless strategic conversations.
Excerpts from my Experience Vision presented at an all-hands meeting and referred to frequently thereafter
A Transformed Search Experience
The success of the individual projects notable:
increases in several critical business metrics
a better experience for more NYCers
cleaner, more performant and robust systems and processes
less risk of long-term audience decay
But it's the cumulative effect that has unlocked a new level of speed and quality in how StreetEasy can create new experiences and value. StreetEasy is now positioned to move rapidly in pursuing today's AND tomorrow's product- and business initiatives with a new level of speed and confidence.
