SUMMARY

One of my first tasks at this commercial real estate start-up was to redesign the web-app for searching properties–in a similar way residential real estate is searched (the Zillows and Red Fins of the world). The existing app had a very poor experience and needed a complete overhaul.

GOALS & OBJECTIVES

• Introduce Modern UX & UI to increase engagement, session duration, etc.
• Increase Filters & Features
• Optimize for Mobile; existing mWeb was not optimized well

MY ROLE

• Worked hand-in-hand with Product on requirements
• Concepted, prototyped multiple solutions, features
• Pixel pushing

CHALLENGES

• Avoid feature drop-off between devices
• Balancing Listing volume with performance
• All-new Design Patterns needed

HISTORY

Search 1.0 had been created 1.5 years prior had little parity to its competitors. That plus the need for better UX and features, 2.0 was given the green light by leadership. Hooray!

RESEARCH

The Product Team and UX researched brokers and tenants to prioritize features, filters and open the door for on-going feedback. [See Personas]

APPROACH

I focused heavily on the Seeker Persona needs and I spent a lot of time minimizing clicks and maximizing functionality across all devices. I also had to make the experience flexible for the non-tech savvy User that is prevalent in this industry.

PROCESS

Research & Requirements Gathering: As a new employee of this start-up and industry, I studied the different User Personas (a much older group than I suspected), learned about the Commercial Real Estate Industry and its challenges compared to Residential Real Estate.

Sketches: I pulled out the Dot Grid sketch pad and went to work on key views and workflows. This included lots of whiteboarding meetings.

Wireframes:
Created wires for key workflows and Design Patterns that would become the basis for all areas of the app. Multiple concepts for the Map/Grid views were designed including clickable prototypes. These were presented, vetted by stakeholders and personas through Usability Testing.

Final UI + Documentation: Once complete, it was largely organized by the Atomic Design Methodology consisting of Atoms, Molecules and Organisms.

More Research and Validation!: We leveraged UserTesting.com to compare previous designs to the new to help validate ease of use, learnability, and prioritize new features.

FINAL SOLUTION

SEARCH FILTERS

I researched UX for filters and their placement, particularly on Desktop. The UX consensus was that filters over 8 should live in a left nav, but less than 8 should be prioritized to the top of the experience.

Filters were prioritized by industry standards and test Users. The ability to clear a filter in one-touch was well-received by Tenants and Tenant Brokers. Filter functionality was the same on Desktop and mobile, as many Brokers spend just as much time outside the office as in.

MAP/GRID VIEW

We had Users who loved the big map (from 1.0) as well as those who rarely used it. My solution was to put the User in control and allow functionality to manipulated the map size in 1 click.

Due to screen size constraints on mobile devices, a toggle allowed Users to switch back and forth from the map to the Property “Grid”.

LISTING DETAILS PAGE(S)

The existing app had multiple templates for Listing Details Pages–one for Land, one for Buildings and another for Spaces. This created additional dev work to keep afloat as a single change to the page would require updates on three separate templates. So I designed solution that would work for any Property Type.

NEW DESIGN PATTERNS

One requirement was to leverage some of the colors and Font Families that existed in Search 1.0 so the changes wouldn’t be such a far Brand stretch. This resulted in half as many colors in the UI and 4 in the company Brand Guidelines.

The new styles and patterns were suppose to enhance and compliment what was worth salvaging.

Fonts used were Titillium for most Headers to show a bit of personality, and Lato for Body Copy.

OUTCOME

• Average Session Duration increased 20% [overall engagement, not time on task]
• Pages Per Session nearly doubled
• Mobile Usage increased to 64%

+1: FROM USERTESTING.COM

• [On Mobile] “I love that [map] feature … I can hit on a Listing and get there [details Page].”
• [On Mobile] “It was easy, easy, easy to navigate.”
• [Desktop] “Easy to move back and forth between pages”

REFLECTION

I was overruled on prioritizing the Listings on the Map/Grid View, so search results displayed Buildings/Locations, instead of individual Listings. Fast forward 12 months, and stakeholders are realizing that this method doesn’t show as easily the sheer volume of Listings or help a User complete their goal faster.