STREETWAND
ROCKWELL AUTOMATION | PRODUCT DEVELOPMENT METHODOLOGY: AGILE & WATERFALL
SUMMARY
ROLE.
Partner and co-founder
UX design lead and chief UX architect
Visual design lead
User researcher
Copywrite
OPPORTUNITY.
Independent real estate agents and small brokerages cannot afford IDX and Lead Management Web sites and platforms that are available to larger brokerages with big budgets
Many existing IDX and LM software vendors offer a poor end user experiences and their offerings are subpar for the agents licensing them
HYPOTHESIS.
There is a major opportunity for bringing to market a cost-effective offering with a superior UX that puts agents and home buyers first.
UX DESIGN
After 2 weeks of benchmarking against competitive IDX experiences for agents, such as Commissions Inc, Kunversion, Real Estate Web Masters, TigerLead; including industry giants such as Zillow, Trulia, and Realtor.com, I began creating wireframes that leveraged existing paradigms. The ramp-up period took time, and understanding the space was challenging as this experience was intended to be a lead-generating tool for agents—a factor which made it easiest to begin with known quantities (users expectations on searching for homes online) and finding ways to create better workflows and experiences to separate Streetwand from the competition.
Given our aggressive timeline to get developers some direction and guidance, I began to combine wireframes with user flows and specs to give them something to start with and reduce a bottleneck.
An example of the Advanced Options/Settings workflow on mobile and desktop. As with my typical approach for optimal experiences, I leveraged a mobile-first approach to best prioritize the content and ensure layouts would be responsive to various viewports.
As we progressed through early design, we determined that an advanced search option would need to be available off the homepage and it would need to be robust enough to satisfy a multitude of different search scenarios and criteria combinations—thus necessitating a full-page experience.
Next up, was to figure out how a user would login or create a free account. In the real-estate IDX and leadgen domain, the typical practice is to show a forced registration after a prospective buyer views 1+ or 2+ properties on their customer IDX Website. While a typical user and even a UX designer would scoff at such a practice, this is quite common, and agents depend on getting the leads that come through that registration process. As you can see above, we had plenty of material to use for benchmarking purposes!
Benchmark content in hand, I set down the path of wire-framing our login and forced registration experience, including the forgot password flow.
My partner—who’s a REALTOR himself—and I decided that users should have plenty of touch points within the IDX experience to connect with the agent who commissioned the site. As such, on the individual property views, we created a notes feature so that buyers could capture their stream-of-consciousness thoughts and allow the agent to have a conversation with them in direct context of a property they were interested in.
A key strategy I wanted to champion through Streetwand was around content curation, which is where this settings experience comes in. At the time, I felt that many of our competitors didn’t do a great job of helping users not only save searches and homes, but give them easy and efficient ways to re-engage with those curations and further tweak and/or re-launch them. Additionally, many competitors failed to offer true parity for smaller form factors, which I’ll get to…
This was a rare scenario in which I had to design the mobile view after the desktop and tablet views—but as you can see from the date of the mockup, it was a fast follow. This was partially due to the fact that there wasn’t a lot of precedence for quality mobile experiences from our competition, so I wanted to take a little more time to pull ideas from adjacent domains and other industries—not necessarily limit myself to real estate. As you can see in the wireframe, I felt that a docked action bar at the bottom of the screen would be a key accelerator for users on the go, and this pattern eventually shows up everywhere within our mobile-friendly experiences and use cases.
But, I couldn’t forget about the Agent’s experience, as they needed a way to monitor and track the leads that were coming in through the IDX registration process. Additionally, they needed ways in which to create a search on a buyer or client’s behalf, which is standard practice in the industry. Configuring the look and feel of their customer IDX Website was another requirement, and we wanted to provide intuitive ways to adjust the color palette, agent/brokerage logo, and a homepage background image for a bit more customization. We kept the customizations very basic for R1, as we felt confident that the “bones” of our IDX solution were strong and robust enough to scale across at least 80% of all agent and brokerage use cases and needs. Finally, as we’d experienced some turnover within our development team, we decided to forgo a mobile view altogether for R1, as much of this configuration and tracking would be easier on a larger form factor. However, we later revisited this.
VISUAL DESIGN
These are screenshots from production, which directly reflect my visual design specs I’d created using Sketch App for Mac. As I mentioned before, an agent can adjust the theming of their IDX Website within their agent settings. The global navigation bar, command buttons, hyperlinks, homepage background image, and logo, are all components that can be changed in just minutes. However, other aspects, such as the map canvas, the form inputs (filters, search field) are standard, neutral, and designed to allow the most important pieces of content to take center stage.
Screenshots from production, which directly reflect my visual design mockups. As I’d mentioned, curation is key to these experiences, and you can see our approach for allowing a buyer to easily share a property with a friend via a variety of methods. Additionally, quality pictures are great, but are useless without an ability to allow a user to get the most out of them. Our gallery viewer with a thumbnail filmstrip took weeks of tweaking until we felt confident on performance against quality and usability across multiple form factors.
A look at our Advanced Search experience in production, which is based on my visual design mockups.
These are actual mockups created in Sketch to show how an agent’s About page would look on their own custom IDX Website.
Additionally, beyond R1, we want to give agents an opportunity to allow their buyers to take a deep dive into communities of interest within their dedicated region. Given I’d designed a library of components and views in Sketch, I had plenty of material at the ready to begin moving away from Balsamiq mockups for initial mockups.
Another important aspect of this overall industry solution: allowing agents to reach buyers in a multitude of ways, leveraging automated email and text SMS based upon a user’s saved homes, searches, and direct requests within the IDX Website. Above, you can see the amount of benchmarking and “current view” exploration that went into what’s happening in the industry.
Some of these workflows are being held back in R1 to get us to general available faster, but will be part of our R2 Above, you can see scenarios on updates (reduced price and similar notifications), as well as an update on a valuation report—based upon a workflow you’ll see next.
“What’s My Home Worth” (WMHW) is a spin-off capability we wanted to have in our back pocket as well, should we not have the ability to get everything on our wishlist for R1, and if we wanted to drum up a user base sooner than later. It’s still very much in play, but we feel confident that the IDX site plus the agent settings experience will be completed within this calendar year. The purpose of WMHW is to allow a potential buyer to receive a valuation of their current property. This pattern exists, but it can be clunky with some of our competitors. I felt that a wizard approach would help break down the workflow into more digestible chunks and make it less overwhelming for users, since lengthy forms can be intimidating and disrupt a user’s momentum before it even begins.
The high fidelity mockups I created for the agent settings informed the production screenshots you see above. As you can see, we were able to make the experience gracefully respond to smaller form factors.
Above, are the various color palette themes an agent can use for their IDX site. I intentionally designed each theme to be W3C AA-level compliant or above, and even pulled colors from some of the more popular local brokerages such as Keller Williams and Howard Hanna—since agents aligned with those brokerages may want their own custom IDX. These “previews” now appear in the agent settings and we provide packaged themes in addition to a custom option.
My mockups of the Streetwand corporate Website (coming soon to production!), which is where an agent can learn more about our solutions and ultimately sign up to receive a demo and learn more about pricing.