Discovery

The Current Flow

I conducted usability tests with sober homeowners to identify pain points in the existing house upload flow. I used Norman Nielsen’s 10 Usability Heuristics framework to classify each issue. I asked the users to “upload your sober home to the Sojournex app and think out loud.” Usability testing produced 6 key insights.

Discovery

Sober Home Seeker Needs

A UX Researcher and I conducted interviews and tests with 40 sober home seekers to discover what house details they needed to see in each house listing to make an informed decision. The users were asked to review house listings on the Sojournex app and comment. Below are the three key insights

Ideation

User Flow

Our Discovery phase showed that the original user flow was causing usability issues. Users were confused when one category of inputs (for example, Payments) was divided into two separate screens. The order of screens was also not standard, with info about the neighborhood being gathered before info about the house.

Old Flow

New Flow

Using data collected from sober home seeker user interviews, I compiled a list of 51 necessary inputs. I collaborated with a sober homeowner to organize the input fields into categories and settled on a 8 screen flow.

Ideation

Sketches

I implemented an iterative design process working closely with the engineers and Product Manager to create an efficient, effective, and welcoming house upload flow. I worked closely with our engineers to create designs that would work with our startup's tight budget. I sketched out some preliminary wireframes to communicate to the PM and engineers and get feedback on the initial direction of the designs.

Design Process

Working with Dev

After sketching out some paper wireframes, I fired up Figma and designed a lo-fi iteration of the flow. The dev team, PM, and I collaborated to determine which features were within our budget and time frame. We decided a “Save Draft” feature wasn’t within our budget. Below: The “Save & Exit” button was removed from the paper and lo-fi wireframes.

Location

Initially, I wanted to use an autosuggest address to increase the efficiency and accuracy of the location input. After talking to the engineers I learned this would not be possible in the React platform without increasing the budget and time-frame. Below: The autosuggest feature was replaced with a manual address input.

Design Process

Trying Different Things

I designed different versions of screens and features and received feedback from the team. For the review screen I needed to organize a large amount of info into consumable bites. I experimented with the number of tabs (3 vs 4) to categorize house details. I also experimented with a center alignment but ultimately chose a left-side alignment for cohesion with the rest of the flow. Below: Four versions of the Review Screen that were ultimately scrapped.

 Design

Design System

When I joined the team, we had no documentation for design guidelines. I created a style guide and component library. I replaced the old brutalist design with a modern, welcoming design; utilizing rounded corners, less lines, and more of our brand color. Below is a little snapshot of the design system.

Prototype

Final Design

After iterating, compromising, and collaborating we decided on our final designs. To test our results we conducted five final usability tests with sober homeowners, and reached out to 3 sober home seekers for user feedback.

House Information

Before the redesign, sober home owners were confused about non-industry-standard terminology and the gender category. Sober home seekers asked to see more info about house size and recovery program type.

Improvements:

1. We removed LGTBQ from the gender category and encouraged homeowners to describe their LGTBQ community and culture on a later screen.

2. We added inputs to gather information about house size, program type, and house recovery specialty.

3. We removed confusing terminology like “New Recovery Experience”

The Neighborhood

The Heuristics test revealed that the neighborhood screen had a few issues. The unit (miles) for distance was misplaced- it was at the top of the screen instead of next to the input.

Improvements:

1. We fixed the issue by adding a stepper with a clearly labeled mile unit. We swapped out a text input for a stepper to increase the usability and efficiency of the screen.

Rules and Guidelines

Each sober home has unique rules and guidelines and the sober home seekers wanted to know what would be expected of them during their stay. Before the redesign, Sojournex didn’t collect any details about a house’s rules from the sober home owner. We added a Rules and Guidelines Screen to amend this issue and provide sober home seekers with more information.

Photos

We learned in interviews with sober home seekers that the quantity and quality of pictures provided in the house could be improved. But how many pictures? We polled 40 sober home seekers and determined that sober home seekers should upload 7+ pictures.

Improvements:

1. We used descriptor text to encourage sober home owners to upload pictures: “We ask that you upload seven photos to optimize your chance of booking new residents. Be sure to include pictures of the rooms, common spaces, bathrooms, and the kitchen.”

Description

Before the redesign, many of the house listings had long (very long!) descriptions; sober home seekers skimmed through these long blocks of text and made comments like, “its too much text”. The redesign reduces the need for long descriptions by collecting all tangible house details via inputs, throughout in the flow.

Improvements:

1. In the descriptor copy, we encouraged sober home owners to only describe the intangible elements of a house (community, culture, LGTBQ friendliness, etc).

2. We limited the word count to 100 words.

Review

The challenge of the review screen mirrored the challenge of the entire project: how do we organize and design a large amount of information in an efficient and user-friendly way?

The old review screen had a few usability issues including small photos obstructed by large text, long descriptions, and no edit functionality. Without an edit button, sober home owners were forced to click back through the flow to edit the input, without any reassurance that their work would be saved.

Improvements:

1. Bite-size chunks of information that sober home owners can quickly absorb.

2. Full-width photo view so sober home seekers can swipe through pictures.

3. Edit functionality. When the user clicks the edit button they are taken to the specific input in need of editing and then have an option to return directly to the Review screen.

4. The gray text shows the user which amenities and services the house does not provide to give the user a bigger picture of the house.

Measuring Results

The Numbers

We measured the results against our goal: to collect more information about homes while improving the user experience of the flow. We conducted five final usability tests with sober home owners to measure our success with reducing usability issues. We also conducted 3 user feedback sessions with sober home seekers to hear what they had to say about the new home listing design. Although the entire re-design wasn’t shipped (funding issues) we were able to ship two of our usability improvements to the flow.

• We improved the “add custom amenity” issue from 1/5 successes to 5/5 successes

• 20% increase in home uploads in the months following the ship of the design improvements

• We created a 51 input flow

• We increased picture size by 3x