UX Case Study: Commercial Real Estate Tool

UX Case Study: Commercial Real Estate Tool by Matthew T Rader
UX Case Study: Commercial Real Estate Tool by Matthew T Rader

Executive Summary

A large commercial real estate company needed an internal tool to manage the bidding process for commercial real estate properties. The current process is largely manual and done through phone calls, email, and third party portals. This company wanted to increase their market share and revenue by implementing technological solutions at various points in the appraisal process. We were given 6 months to complete the MVP version of this tool. I was the lead UX/UI designer for majority for the MVP stage of the design and development on a team of 15 people.

This tool, called Bidding Management, had three goals:

  1. To start automating the bidding process with a user-centric interface
  2. Collect data on the bidding processes and outcomes
  3. Provide insights to bidders to help them bid more effectively to win more bids

Before the design process began, there was extensive research on the workflows of the various users that would be using this tool. We were able to categorize the users into four job roles and create user personas and flows based off of each of those roles.

We sketched out and prototyped several layout ideas. We held weekly user feedback sessions with the people that would be using the MVP tool. These sessions were crucial in helping up stay on course and keeping empathy and users at the center of all our design iterations. Our tool went through several iterations that based on user feedback.

When the MVP was launched, it was a success and started to immediately meet the goals set for the product. The MVP roll out revealed several weaknesses and new pinpoints which we documented to implement in the first full version of the tool.

Human-centered Design

Personas

Our personas were created based off user interviews segmented into four different job roles that our Bidding Management tool would impact. I designed an easy to read and reference template for each of our personas.

User Personas by Matthew T Rader
User Personas by Matthew T Rader

User Flows

After getting to know the users and their workflows. I made a flow map to show how bidding process looks like to help us all understand the business needs of the tool better. Afterwards, I created detailed user flows for each persona to guide the designing of the screens.

Flow Map by Matthew T Rader
Flow Diagram by Matthew T Rader
Flow Map by Matthew T Rader
Flow Map by Matthew T Rader

Ideation

Whiteboarding

Here are some examples of brainstorming and whiteboarding we did to generate ideas

Whiteboarding by Matthew T Rader
Whiteboarding by Matthew T Rader
Whiteboarding by Matthew T Rader
Whiteboarding by Matthew T Rader
Whiteboarding by Matthew T Rader
Whiteboarding by Matthew T Rader

Wireframes

Several ideas were sketched out, sketches were not captured and were left behind with the real estate company.

After sketching, I produced a set of lo-fi wireframes to present to our users at our weekly user feedback session. The biggest challenge I faced at this point was making sure I had all the correct fields need to for a user to complete a bid.

Wireframes by Matthew T Rader
Wireframes by Matthew T Rader

Iteration 1 – Prototypes

The initial prototypes were completed in conjunction with an outside design firm already on contract with the real estate firm. These were their initial designs:

Iteration 1 by Matthew T Rader
Iteration 1 by Matthew T Rader

These screens demonstrated how we could chunk their workflow into simpler tasks, which the users ended up not liking.

Iteration 1 – User Testing

Users

The users we use for testing this prototype were three people, two managing directors and an admin. They ended up being the users we primarily tested with through the entire MVP phase.

The user testing was conducted virtually with me present, the product manger, the lead product manager, and the director of the product mangers.

Tasks & Questions

When we presented the prototypes to the users we created scenarios they would find themselves in and asked them how they would accomplish various tasks. For this first demonstration there was quite a bit of explaining since the tool was entire new concept for the users and presenting the idea of a new tool for their job was very challenging for them at first.

User Response & Quotes

There was quite a bit of initial confusion with the users when looking at this first version of the prototype. They had a very hard time orienting themselves and knowing what to do.

Once the users started understanding the concept they overwhelmingly did not like it. They gave a lot of push back on the number of required steps to accomplish tasks they do dozens of times a day.

I hate clicking a lot and there is way too much clicking on this design”

A Tester

The biggest thing we learned was that their work is high volume and that inputing data must be immediate accessible and done quickly, function over form. They were used to Excel spreadsheets.

Iteration 2 – Prototypes

These s iteration 2 prototypes were completed in conjunction with an outside design firm led by my direction based off user feedback. We created mid-fi screens for this stage:

Iteration 2 by Matthew T Rader
Iteration 2 by Matthew T Rader

Iteration 2 – User Testing

Users

The users we use for testing this prototype were three people, two managing directors and an admin. They ended up being the users we primarily tested with through the entire MVP phase.

The user testing was conducted virtually with me present, the product manger, and the lead product manager.

Tasks & Questions

When the users saw these prototypes they were immediately pleased with the new direction and felt that it met their need better. We had them go through the screens and give us their thoughts as we observed their behavior. This flow was much more fleshed out as well, they were able to see a bigger picture of how the application is being designed to work.

User Response & Quotes

The users responded much more positively to this new iteration. They were not as confused as before but still got stuck at several locations, especially during the filling out of fields section. There are a lot of required fields to complete this task and the users felt more confident in the tool after seeing all the required fields at once.

There’s too much white space, too much scrolling, can we make everything smaller?”

A Tester

They did not like the UI very much of the fields area. They though it showed too little on the screen at once and had to scroll way too much to see everything.

Iteration 3 – Prototype

For iteration 3 we decided to implement a Google Material based design system. I condensed everything and made all the fields easier to read.

Iteration 3 by Matthew T Rader
Iteration 3 by Matthew T Rader

Conclusion

The third iteration was huge success with the users during testing. Upper management liked it as well. The MVP product rolled out looking like the design above. The Bidding Management tool started off successful but still lacking several features to be a viable tool for the corporation nationally.

While development was underway for the tool, I started once again the entire design cycle again to begin implementing new features into the tool to make it national ready.

At such a huge corporation with a lot of money at stake, and with this tool being so new, the design process was rather unique and challenging at times. The design process for this product flowed like this:

Design Process Diagram by Matthew T Rader
Design Process Diagram by Matthew T Rader

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.