Zillow Pearl
Re-designed the connections platform experience for better productivity, reduced error rates and improved accessibility.
Role
Design, Research & Execution
Timeframe
January - August 2021
Context
Our Connections Specialists (reps) play a key role in being the crucial connector between customers and our business partners. Pearl is the communication tool connections specialists use to handle requests from potential home buyers/sellers and capture necessary information from them in order to match them to an appropriate agent or loan officer.
Pearl was built in 2018 to support connections specialists with their operational needs. A lot of features and complexity were added over the past years to meet business needs and compliance, but they were implemented over time without a design system haphazardly. The platform has come to a point where it's negatively affecting our connections specialist's experience and productivity.
Snapshot of the Pearl platform
The Opportunity
The scope of the project was initially tasked out as a UI migration to Constellation, our new design system. However, I saw this as an opportunity to take it one step forward.
I set up shadow sessions with our reps which was followed up by interviews to get an understanding of their current workflow and the pain-points with the existing tool. This helped me get a better understanding of the way they work day-to-day. I also did a heuristic evaluation of the tool to build the case for a re-design of the overall experience rather than just a design system update.
Key Research Takeaways
Overall accessibility and usability issues
Content has a lot of scope for enhancement such as error messages and help text
Lots of back and forth for agents to complete a task between multiple tabs
Lot of redundancies in the overall layout of information
The communication section in the middle is difficult to use due to current layout constraints
Customer details are spanning across multiple disjointed sections
Defining a New Framework
The research showed that we needed a more systematic approach to categorize information and design the working areas. Therefore, I first focused on getting the framework right with a series of layout iterations led by use cases and task flows.
We concluded on the final framework with considerations such as aligning with Zillow's other platforms and guidelines, streamlining core task flows and supporting scalability for the platform. The framework we landed on has a navigation bar at the top, following by a task list from the left, a task control bar at the top, the communication section in the middle and secondary information (customer information section) at the right.
Design Highlights
I led and worked on the overhaul of the entire Pearl UI over the course of 8 months, from early planning, design, usability testing to detailed design specs.
Task List
Organized on the left side for quick access
Controls
Positioned at the top of each task for clarity
Communications
Central middle section for focus
Customer Info
Consolidated on the right panel
Impact
The new Pearl experience has now been rolled out to all connections specialists and the metrics such as the average handle time, response time and connections rate have shown significant improvements.
60%+
Reduced error rates
Faster
Average response & handle time
"This UI is a much improved version compared to what we used to have. Wonderfully streamlined and intuitive."
— Connections Team Representative
Summary
It was a multi-quarter and large-scale redesign which initially was only scoped for a UI refresh. I took it forward with additional research studies that helped uncover more pain-points and guided us with a bigger picture in mind. Working in a small and autonomous team made the collaboration and decision-making more efficient, but I also needed to step up and take leadership-level discussions throughout to ensure we get funded and supported from multiple product teams as well as our leadership.