—
Applications

iOS

—
My Role

• user research
• prototyping
• user experience
• interface design
• front-end development

—
Tools

• Figma
• X-code

—
Background

Crexi is launching our first mobile app in the history of the company after 5 years of successfully building the website to become an establishment in the commercial real estate industry. The Product Detail Page, or PDP for short, is the most visited page on the website. This page is what connects buyer and sellers to commercial properties – the keystone to our marketplace.

—
Challenge

How can we design the PDP to maximize the opportunities and experiences afforded by a native mobile app?

—
The Problem

The mobile web experience was a big pain point for many users. Over 50% of our website’s traffic was coming from a mobile device, yet the session time and engagement was only a fraction compared to the desktop’s.

These were a few of the main culprits to a degenerate user experience:

1. Site Speed
   The site was not optimized for mobile browsers, thus leading to intolerable load times and a painstakingly slow site speed,

2. Gesture Controls
   Finger and gesture controls were either laggy or non-existent, such as on the map experience, where gestures are vital to a stable and positive ux.

3. Less Window Space
   View space was limited on mobile browsers due to browser controls such as search bar and navigation functions,

4. No Back Button
   Finally, PDPs opened into new tabs (mimicking behavior on desktop) which eliminates the possibility of user hitting a back or close button to get back to their search results.

—
The Goal

To increase engagement with PDPs on the mobile app measured by “buy actions”. Buy actions are the most important metrics at Crexi. The buy actions we focused on improving for the mobile app were:

1. Phone calls
   A user calling the broker on a listed property.

2. Messages
   A user emailing the broker on a listed property.

3. Opening marketing documents
   Every listing has at least one marketing document. Marketing documents consist of offering memorandums, flyers and brochures.

4. Shares
   A user sharing the listing via text or email.

5. Saves
   A user saving or “starring” a property to a favorites list.

—
What We Knew

Users look at pictures first.
This might sound obvious, but it was a contested topic internally because commercial real estate is notorious for having photos of properties that aren’t sexy. Would we want to emphasize photos that already looked bad or even non-existent?

However, data showed that for all properties, including the ones with ugly photos, 80-90% of users were still looking at 2-5 photos of a property before viewing the rest of the listing.

Marketing documents are critical to a user’s interest in a property.
Offering memorandums (OMs) and flyers contain key pieces of information (often financial) that allow users to evaluate a property’s potential. This is a must-have item for every user.

Contacting a broker was a poor experience.
A poor calling experience from the PDP left us wondering what could be possible. On the website, the phone number had to be hidden behind a “show” button so we could collect data on its usage, despite knowing it put up a barrier to the precise action we were trying to encourage.

—
Exploration

Photos on the PDP – Two Concepts Emerge
Oftentimes, I begin my design process by taking inventory of how others address similar challenges. In this case, the idea of a Product Detail Page is extremely common so there were many sources to take inspiration from. Furthermore, there are plenty of great residential real estate apps to reference when it comes to viewing properties from your phone. After auditing many apps, there were two main concepts that emerged:

Together with the design and the mobile team, we agreed that based on the data and the ux we were after, Concept 2 was the direction and structure we would build for the app.

—
Additional Improvements

OM’s and Flyers

OM’s, flyers, and brochures are essential documents that users need for evaluating properties. The web page also has them placed above the fold but the design team and I decided to shed the colorful buttons and take a more scalable approach to these buttons.

Phone Calls

The tap target to call on the web is very small. Because this is an important action users need to be taking, we visually prioritized the button to be more obvious and tappable. Other considerations in this section included additional buttons for emails and messaging.

—
Final Designs

These are the final PDP designs that were shipped and are live in the app store now!

View in App Store

—
User Feedback

Upon launch, we identified a cohort of users to reach out to for feedback. These are some of the things we heard:

“Yeah, you know, the brochures are easy to get to… I’ll tell you, when we’ve used the competitor’s app before, the flyers have been a pain in the ass to find. So I’m glad that on your guys’ one, you click on the property and swipe up and it’s right there, the brochure’s right there… which is really nice.”

“If I scroll down to the bottom, it’s got a direct link to call each one of the brokers. So that’s nice.”

—
Results

Something we were worried about from the beginning was cannibalization: was the mobile app going to take away activity and users from the website?

However, we found that rather than cannibalizing the website, the mobile app was actually adding 10-20% more buy actions to all users!

—
Next Steps

1. Adding call button higher on the PDP / floating sticky CTA’s
   Ideally, a way to contact the broker would always be present since this is the most important buy action the app offers.

2. Gesture controlled closing
   Allowing users to easily navigate between search and property details.

3. Adding more buy actions to the PDP
   Although we added many of the buy actions into our first version of the app, we are still missing a few that are very important: (1) Submit a Letter of Intent and (2) Message a Broker.