Role Product Strategy, UX/UI design, Prototyping, Branding
A San Francisco-based real estate startup needed a UX overhaul for their web app. Over the course of three months, we streamlined the complex search experience, established a flexible UI framework for desktop and mobile devices, and created a brand identity.
The product in action:
Browsing properties in the custom map interface:
A sortable list of properties:
Gallery-style property listing:
Property detail page:
Details of the search pane:
Reference sheet of icons in their various states:
Mobile device layouts:
Early sketches and notes
The app before being redesigned:
Early style concepts:
With an abundance of interesting ideas on the table, the bulk of the design phase was spent in wireframe mode testing concepts. We took our existing prototype toolkit to the limits (Balsamiq and Notable), which ultimately lead us to a switch to more robust tools (Axure and InVision).
To provide crisp iconography across varying devices and resolutions, we opted for creating an icon font using Fontastic. Syncing font updates across teams proved to be challenging, and was best accomplished through verbal instructions.
How important is providing multiple view/sort options for users looking at large quantities of data? The product being a tool serving both real estate professionals and home buyers/sellers alike, we decided to provide a gallery-style grid of properties, as well as a text-based table layout for search results.
In establishing a UI framework for a web app, one cannot forget about motion effects. Transition types (fades, slides) and duration were carefully outlined to ensure a consistent experience.