HiHome

CO-DESIGNER

Roles & Processes Included: Research, Ideation & Architecture, HIFI Mockups, Animation & Prototyping
‍

HiHome is a startup developing the first holistic homebuying management platform that walks buyers through their home buying journey step-by-step, start-to-finish, facilitating communication and collaboration between buyers, agents, lenders, and more. We were tasked with the design of HiHome’s Homehunter tool and its criteria filtering and prioritizing interface, creating a dynamic, innovative, and ultimately delightful tool that would make the home search process efficient and enjoyable.
‍
Teammates: Bayanne Halimeh, Drew Schenck

THE PROBLEM

Searching for homes can be fun. But it can quickly become overwhelming and time-consuming. Other home search platforms prioritize continuous user browsing using clunky criteria filtration tools.

Anxieties about missing the ideal home call for better tools. The typical criteria filtration systems don’t capture the nuanced factors that many buyers prioritize, and methods of weighting certain criteria against others are non-existent. Buyers resort to creating their own spreadsheets, juggling the myriad scattershot data.

“I would have made a spreadsheet anyway if there weren’t [another] tool.... I want something better than just saying I want 3 beds, 3 baths. I want something where I can weight things in a more intuitive way. Something that says: “Here are the 5 best candidates….”
—Alistair
‍

The Competition
‍
With the client's input, we pinpointed competition most relevant to our problem: OJO, Realtor.com, Redfin, Trulia, ZeroDown, and Zillow. After comparing their respective filtering systems' heuristics, we catalogued every filtering criteria available among the competitors and compared it to HiHome's baseline criteria, channeling feedback to the client that would influence the MVP's own filter.

User Flow

Our team's goal was to discover how to leverage HiHome's analytical hierarchy process, taking many different criteria, scoring them against each other, and finding the optimal outcome—i.e., a curated selection of promising homes. We dug deep into how a calculation might work, user testing a spreadsheet-based data aggregator, and we found it tedious to compare all possible criteria. Thus, the goal would be to provide users with an engaging visual tool to understand what they value and what they don't.

First, we would need to create a user flow:

The client had some ideas where the user might drag criteria from a "bank" into their own bucket of home qualities and manipulate those qualities quantitatively via some kinetic means—sliders, switches, bubbles, etc. Their baseline sketch would guide for our exploration:

We followed up our team brainstorming with another round of sketching, this time with an eye toward wireframe-level fidelity, as we approached closer to our goals.

After the prior sketches and a round of bona fide digital wireframes, the team decided we needed to be a bit more bold in our thinking, which sent us briefly back to sketching. We and the client found the concept of a data management system based on kinetic bubble interactions intriguing, and so we pushed further in that direction.

Wireframes & Animation Concept

Having a gained conceptual traction, we jumped back into wireframing and used that foundation to begin testing animation strategies with simplified mockups. Below represents:

initialization of a user's criteria profile via possible criteria on the left, and the user's unpopulated bank on the right;
user criteria bank being populated, categorized, and weighted;
continued building of criteria profile, showing weighting of overall category;
weighting of individual criteria;
toggling of data visualization into bar graphs;
bar graphs showing category weights;
toggling of data visualization into tables;
tables showing category weights.

Following several more work sessions and wireframe iterations, the team arrived at an architecture that appealed both to ourselves and to the client. We would use this framework as the structural system of the final design.

One interesting outcome of this final push in wireframing, based on a late-stage idea: the "doughnut" chart would assume a critical role in tying the visual data together:

With our architecture in place, we quickly iterated on UI—playing with palettes, gradients, varying levels of 3-dimensional qualities of the bubble interface as a baseline to be applied across the criteria filtering platform—and we offered several options to the client.

Animation & Prototyping

The client preferred a scheme based on a number of factors, including project scope and time constraints, and the team pushed forward and developed a high fidelity animated prototype demonstrating the key user flow: a prospective homebuyer develops a set of preferred criteria, sets their personal targets and cutoffs for the criteria, and weights each criteria based on their individual needs.

LESSONS LEARNED
‍
The time constraints of this 40-hour project affected several factors that are important to the project:

1. User testing is critical in refining this criteria creation tool into a proven design, and while the client will most certainly perform testing at a later date under the direction of other designers, it would have been enlightening to have been able to perform that process ourselves as the original designers of the product.

2. I would have liked to further develop another of the client's preferred schemes (which was my favorite iteration, personally), seen below. It would required additional development beyond our scope and was not ultimately selected for that reason. But it's a nice artifact of the overall process.