Lettisia Toha
UX designer

Website Redesign

Applying new branding and layout for a commercial real estate client

Image alt tag

Project Overview

Client Overview:
Neil Walter Company (NWC) is a full service commercial real estate company providing leasing, sales, property management and development services of commercial real estate throughout the Northwest. NWC specializes in warehouse & distribution facilities, office buildings, retail properties, multifamily properties and land opportunities.

Duration: 80 hours

My Role: End-to-end UX/UI Designer

What's the Problem?

I updated the company branding a couple years back but the website hasn't been updated with the new branding. I was recently tasked in updating the current website with the focus of making the process of searching for properties by potential clients much easier, and also to decrease confusion and time spent on calls. 

Solution?

Design a responsive site that exceeds expectations of the target demographic, is effortless and straight forward for potential clients who are looking for a property to rent/buy.

Design Thinking Process
I sought to DISCOVER what the users need, motivations and pain points with their current process. DEFINE the scope of work and the screens that would need to be designed. DESIGN solutions in the form of wireframes and high fidelity prototype. TEST a prototype on real users, and IMPROVE the design based on feedback.
Website Redesign

Research Goals

  • Identifying problems users face trying to navigate the website, especially looking for more info on properties they’ve seen on the streets

  • Comparing different competitors and analyzing their strengths, weaknesses, opportunities and threats

  • Identifying market gaps and how to differentiate NWC with other real estate companies

  • Gain insights to what kind of filters users want to see while searching for properties


Methodologies:

  • Stakeholder interview

  • Competitive analysis

  • Individual interviews

Stakeholder Interview

Before we delve into talking to the users, I asked the office manager a few questions regarding their business.

Who are the clients?

Local business owners (small to large businesses).

Why work with NWC?

Prior existing relationships, mutual friends, local reputation and word of mouth.

How do potential clients find out about NWC properties?

Besides from marketing collateral from brokers themselves, most potential new clients would know from property signs posted outside available buildings for lease/sale. They would then give the office a call to inquire about the properties.

Stakeholder Interview Insights

  • The office would receive calls from potential clients about property signs they see while driving/walking by

  • Most of the time the callers are not sure of the property address or business parks name they are at

  • The first question a typical caller ask is if the space is still available, followed by square footage and rates

Scroll up and down to explore the homepage

Scroll up and down to explore the homepage

Understanding Users

A survey was created followed by follow-up Zoom interviews with 2 of the participants and also usability testing for the current website was carried out with 3 participants in person.

I decided to do a usability test for the current website to see what problems potential clients might face while looking for specific property.

Affinity Map

Affinity Map

Identifying Current Problems

I grouped similar points people made together under a common goal/motivation and/or desire for a specific feature.

Website Redesign

User Interview & Survey Insights

  • Small to medium sized business owners tend to lease more than buy

  • The use of brokers varies

  • Some level of commercial real estate education needed

  • Top priority is location, followed by price and property size

To read in-depth report of the findings, click here.

Insights from interviews were used to develop the persona of Dave

Insights from interviews were used to develop the persona of Dave

I compared the features available on each website

I compared the features available on each website

What Are Others Doing?

I looked at local to international commercial real estate competitors in-depth and also lightly browsed through residential real estate platforms like Redfin and Zillow.

Insights:

  • Search function uses varies. Most commercial real estate companies do not have a search function visible on homepage, while residential RE platforms have the search function front and center

  • Search filters can be improved. Often times filter functions are minimal and search for property function required more than 2 clicks to find

  • Case studies and client testimonials often neglected, even for local companies that emphasizes on local relationships and expertise

  • Lack of featured listings which is a missed marketing opportunity

Conclusion from Research Stage

Design a website that:

  • Makes it easy for potential clients to browse properties according to their requirements

  • Offers potential clients all the information they need to know about the properties they are interested in

  • Aids in clarity and direction during potential client calls to the office

Read the full research report here.

Website Redesign
Website Redesign

Time to Prioritize

With the knowledge of what the users expect and what the competitors do, I was able to start to define the website's scope.

I'm keeping most of IA from current website the same as research showed users' main problem is with the properties page only. Hence card sorting isn't applicable here.

I used the MoSCoW Method to detail and prioritize what features and pages the site must, should, could, and won't have.

Mapping It Out

I then build a sitemap and flows to understand the interactions required for a user to search for a property. It is important as the designer to visualize a more in-depth user's hypothetical journey that includes different choices or difficulties the user might face navigating the website.

Website Redesign

Sketches

My design process started with sketching for quick visualization of the ideas I have. My focus was on the search feature and how it could be integrated to the homepage.

Wireframes

Moving on to wireframes, I decided to create pages that users need in order to go on a proper property searching journey, which was reflected from the earlier task flow. 

Website Redesign

UI Kit

I created a simple UI kit to help with the efficiency and consistency of the high fidelity iteration. All design choices are made with the company's brand guidelines in mind.

High Fidelity

With wireframes and UI kit down, I created high fidelity screens which will be used for user testing.

Website Redesign
Website Redesign
Website Redesign
Website Redesign

User Testing

5 participants were tested, 3 females and 2 males. One of the participants worked in the commercial real estate industry previously, two are currently working in CRE, 2 participants are not familiar with CRE but one is a local small business owner. 

Scenario:
You are the owner of Elenos Yogurt, business has been doing so well since you entered local grocery stores and you need to lease another food production facility to fulfill increasing orders. Find some options for yourself and contact the broker regarding the space.

Requirements:

  • For lease

  • Industrial with a little bit of office

  • Freezer / cooler in-place

  • Seattle location

  • Between 25,000-35,000 SF

Affinity map per each participant's points

Affinity map per each participant's points

Testing Insights

  • All participants loved the search bar function on the homepage

  • Most have a problem with the color contrast on the floating contact bar

  • Half of the participants had problems with text sizes, especially in dropdown filters

  • Conflicting opinions on the main hero photography

  • All loved the functionality and look and feel of the website

Learning Points
I did not like my experience testing with Adobe XD prototype. The width of my prototype varies for each user's screen and it wouldn't automatically fit to the width of the user's screen. I think Figma does a better job with displaying your prototype. Safe to say my experience with XD has not been great and so I will go back to Figma. A shame really, because I use a lot of Adobe programs.
Website Redesign
Website Redesign

Improving the Design

Based on what was heard during usability study, I made changes to the design mainly increasing font sizes where applicable and increasing color contrast on some elements.

See the final product below.

Desktop Prototype

Click here to see the prototype.

Mobile Prototype

Click here to see the prototype.

Final Reflection
This was an exciting project to work with because I created the company branding a couple years back and it was fun to take that and use it in web design. Due to the pandemic and the nature of lifestyles, I had difficulty getting business owners to agree to help me with the research part of this project. Most of the business owners I know have families and it's all hands on deck now at their home life due to the schools being closed and they have to homeschool their children. Most people are hesitant to commit to one-on-one interview but all were open to fill out surveys on their own time.