Intro

A challenge unique to our time

The Covid-19 Pandemic changed daily life for millions of Americans. Working from home allowed millions of people to choose where they wanted to live. But this introduced an entirely new challenge: 

How do you choose where to live when you can live anywhere you want?

Hoodsy is a mobile app concept designed to help people explore a new neighborhood before committing to buy or lease a home there. The idea arose from conversations with friends, family, colleagues and strangers, many of whom were moving out of town or out of state, and had no way of knowing whether a new location was right for them without visiting first.

Research

Gathering context from primary & secondary research

My secondary research yielded some valuable insights:

I sought to confirm this apparent desire to find a new home in a different city when moving forward into my interviews. I selected research participants who were in the process of house/apartment-hunting in a new city or part of town, or those who had done so recently. The interviews were primarily open-ended and my main goals were to uncover any pain points that arose in their search. The results were fairly striking: 

• 5 out of 8 respondents say that you can’t know what a neighborhood is like until you visit there.
• 5 out of 8 mentioned that information on the internet is unreliable.
• 3 out of 8 said they felt rushed / they needed to find a place fast.
• 4 out of 8 mentioned they wish they had done more research when bidding on their current area, or that they were glad they didn’t win a bid they had previously put in.

Some quotes that underscore the challenges:

“You don’t really know what a neighborhood is like until you get there, walk around, see the neighborhood physically with your own eyes.”

“95% of what was written on these websites was inaccurate.”

And my personal favorite:

“A lot of realtors will f#*king lie to you. A lot of them will tell you what you want to hear.”

I chose to focus the problem area on not knowing what an area is like until you visit and increasing the reliability of available information

HOW MIGHT WE...

After some trial and error, I landed on the following 2 How Might We Statements: 

• How might we provide prospective home buyers a comprehensive depiction of a neighborhood so they feel confident when moving to a new location? 
• How might we educate home buyers and renters about new neighborhoods so they feel confident in their decision when moving?

These HMW statements guided my synthesis and ideation.

Synthesis / Ideation

Organizing and categorizing my findings

I used Trello to color-code and organize my research and interview data by response category: 

This process made things much more manageable and gave me a bird’s-eye view of all my data.

It became clear that the majority of respondents wanted the following: 

• Quickly-accessible information on a home / neighborhood
• Confidence that a home/neighborhood is accurately represented online
• The ability to test drive a neighborhood before committing to buy / lease

From here, I built User Personas that aggregated user needs and goals:

I kept these personas at my desk as a reminder of my design priorities.

Ideating

Getting the story straight

My early ideation process was primarily written, and I came up with a range of ideas to address the problem area, some conventional:

• Maps made by locals showing points of interest
• Personalized in-person and virtual tours hosted by locals
• A social network connecting ex-pats who moved from (previous location) to (new location)

Some a bit more out-there:

• Locals hosting non-locals like a foreign exchange program
• Remote drone tours

I got as many ideas down then evaluated their impact vs. effort, taking into account any new problems the solution might introduce, such as:

• Privacy issues
• Cost to the end user
• High technological barriers
• Drone crashes...

I plotted several user stories on a grid and focused my effort on the highest impact items:

I focused the solution on the following stories:

• View a video tour of a neighborhood
• Research a neighborhood's walkability
• Find a family friendly neighborhood

And I designed the following user flows:

‍

Workflow

What? No notecards?

I chose an all-digital workflow to ideate / design for this project for the following reasons:

⚡️ I type faster than I handwrite, so if I needed to jot down a quick idea onto a new card, it was a keystroke away.

📝 Copying and iterating on cards is much easier, and so is moving cards to different spots on the grid

🔎 Browsing items at-a-glance is superior due to zoom functionality - I didn’t have to physically move closer to get a better view

🗑 All-digital has better error-handling (for instance, Command-Z bringing back things that I accidentally throw away)

Basically, an all-digital workflow enabled me to work at the speed of thought.

Design

Sketching for usefulness

Based on interviews, I knew I wanted this product to be mobile first. I used the Mockup app on my iPad to mock up some mobile app designs:

Guerilla usability testing confirmed a couple problems with the designs. Users found the designs too busy and were confused by the purpose of those icons on the corners of the map:

The second design added copy and moved these buttons to a single location on the top right of the screen, which added copy to clarify the purpose of each of the buttons:

Users were immediately drawn to these filters, but still found the designs too busy.

ITERATING

As I progressed through the different stages of design - sketch to wireframe to high fidelity prototype - my screens grew simpler and less busy based on user feedback.

DESIGN SYSTEM

From here, I created a simple design system outlining fonts, colors, iconography, and buttons, keeping things as compact as possible:

High Fidelity Designs

Building out my 4 key screens

In Figma, I built out the top 4 key screens that I anticipated would be used most in my red route flows:

UX Writing & Content Design

Designing around content and copy

I placed special emphasis on the UX Writing and Content design of this app, which was built from the ground up, including all copy and content (icons, maps, photos, CTA’s). Because the app is based so heavily on visuals and descriptions, the content design of this app was crucial to its success.

MENU BAR

The menu bar presented some unique challenges. I wanted the copy of each of these menu items to be clear, but also to convey the full scope of their functionality.

In sketches, I split up the different layers of functionality (Neighborhood Browse, Home Browse and Search) into their respective menu items. But I realized that the way users would be using this app, it made more sense to build these elements into a central "Explore" Screen, which encompasses Search functionality and the ability to show different layers - Homes / Neighborhoods / Tours.

MICROCOPY

I took cues from existing apps that served similar functions - e.g. Trulia, Redfin, Zillow, Neighborhoods.com - and kept my microcopy conversational and clear. This is evident in the onboarding copy. I sought to keep the tone of all copy consistent and strike a balance:

• Informative but not dry
• Casual but not cute
• Concise but not terse

‍

CTA’s

Since this app deals in somewhat novel functionality - neighborhood video tours - I knew my calls to action had to be very clear.

In particular, the naming convention of the neighborhood video tours ended up being incredibly important to improve clarity. Originally, they were just called “Video tours” but this confused test participants, most of whom assumed “video tour” meant a video tour of the interior of a home. So I A-B tested different wordings to clarify the intent behind the Video Tours:

All but one of the 2nd round testers found “Neighborhood Video Tour” to be the clearest description of the functionality that was provided. So I adjusted the verbiage on all copy, including CTA’s.

Usability Testing

Validating my designs

I interviewed 5 individuals in my first round of usability testing, selecting participants who had recently gone through the house-hunting process. I conducted the tests over Zoom using an interactive prototype and screen sharing:

TEST PLAN

I gave the participants a moment to orient themselves in the app before attempting to accomplish 3 tasks:

1. Filter neighborhoods to include only walkable neighborhoods and save one of the results to your favorites.
2. Find a home and view a video tour near that home.
3. Request a new video tour in a neighborhood for an area that doesn’t have one already.

RESULTS

Several issues emerged from usability testing:

Issue #1: Switches get stitches

In the first design, the top selection bar consisted of 3 buttons, all of which were ON by default. Clicking each one turned that button and its associated components OFF, isolating the remaining components. This confused 80% of participants, who assumed tapping the button would have the opposite effect. So I turned the 3-button bar into a toggle/radio switch whereby only one display type and one set of icons was shown on the screen at one time:

100% of Second round test participants immediately understood this heuristic and were able to use it without confusion.

Issue #2: Seeing double

Many users had trouble distinguishing between the LIST VIEW SCREEN and the FAVORITES SCREEN since they were so similar in appearance. So I changed the primary color scheme on the favorites screen:

Most Round 2 participants had an easier time orienting themselves in the app thanks to this fix.

Issue #3: Feature teacher

But the most important challenge had to do with confusion surrounding the app's main feature set: Touring a neighborhood via video. People just weren’t aware that viewing a video walking tour of a neighborhood was a possibility, and thus didn’t even think to look for a video tour, even when that was the task given to them. This presented a challenge, but also an opportunity to teach people about the app’s functionality. I decided to implement a brief, 4-screen onboarding experience to help introduce the user to the app’s core functionality:

In subsequent usability testing:

1. It took less than 10 seconds on average for users to progress through this onboarding.
2. 100% of the 2nd Round Test participants found the experience engaging and fun.
3. The concept of a neighborhood video tour was no longer foreign to users.

Interaction Design

Introducing responsive and fluid IxD

Several users expressed the desire to see the path that a tour took through a neighborhood placed on a map. I didn’t want to disrupt the user flow by redirecting the user onto a new screen, but it was important to let the user view the path of the tour on a map. I found a clever solution that added flexibility without pulling the user away from their intended task:

In subsequent tests, 100% of the users found this interaction fun and exciting - even in its simple prototype form - and ended up playing with it a number of times. Plus, they found it incredibly useful for quickly viewing where a tour took place. 

Impact / Takeaways

Wrapping it all up

In the 2nd round of usability testing, I analyzed the effect of all the solutions I implemented (including changes to the copy) and found:

• Task completion time was reduced by approximately 50%
• Users were more engaged, spending more time exploring each of the screens they were on during open-ended browsing
• Expressed less confusion and frustration at navigational clarity and app functionality

Admittedly, this project was an ambitious undertaking. It introduced not only a new mechanism for browsing real estate, but also an entirely new way to think about exploring a neighborhood. It was a lot to take on for a junior designer such as myself, but I was thrilled to tackle the challenge, and while the process wasn’t without its stumbles, I believe I executed the idea and learned several valuable things along the way:

• Having an effective plan going into a research session yields more impactful, usable results.
• Early prototyping to test basic features and functionality is crucial.
• Effective interaction design can engage the user and increase enjoyment.

I hope I can one day develop an app like this that takes advantage of the ubiquity of mobile video to help people remotely explore any neighborhood they want.