Shea Homes: Building on the Shea difference

What We Found

During our review of how we could improve the search experience, we identified that:

• Listings updated when you moved the map, but it was hard to tell which pin was associated with what community.
• Too many keyboard interactions were needed to return results.
• Default search filters were overwhelming and cumbersome for most users.
• Map pins and the legend were difficult to interpret and navigate.

We’d also need “Find Your Home” to be as accessible as possible, inclusive to the needs of all of Shea’s users including those with and without disabilities. So, we asked ourselves these important questions: 

• Can someone use their phone with a dimmed screen and successfully search Shea Homes?
• Can someone who is using voice technology successfully search?
• Can someone who is blind successfully search?
• What about someone with a broken arm?
• What about those who are neurodiverse?
• Can someone in a bright or noisy environment successfully search?
• Can someone change their device orientation and successfully search?
   

The Solution

By working closely together, our design and development teams implemented a ton of enhancements to Shea’s “Find Your Home” feature. The biggest improvement was decreasing the number of keyboard interactions needed to get search results — from 30 — down to just 11 interactions. This resulted in a more direct and clear path for users, allowing them to get to the results more efficiently with less barriers. Other notable adjustments included: 

• Increasing the map area.
• Introducing a more advanced set of filter options.
• Implementing a new slide-out menu for advanced filters that keeps the map and listing in full view.
• Updating pin colors for better contrast and legibility.
• Updating map pins to highlight if the user rolls over a community in the listing.
• Adding a new “Recenter Map” button.

That’s not all. Our development team worked their front-end magic to ensure that those using assistive technology such as screen readers would be able to successfully use the search feature. They created custom controls that clearly announce selections as the user is making them. For example, filtering by number of bedrooms is fully operable for keyboard and non keyboard users. Additionally, as a user interacts with the bedroom control, all states and selections are announced. There is also an explicit relationship between the controls and the filter label. This provides critical information for users using assistive technology such as screen readers. To hear it in action, play the demo below.