Creating a User-Centric Global Navigation

The Goal

To enable users to easily find the products and resources they are looking for on Commercial Real Estate Exchange, Inc (Crexi).

Global Navigation Purpose

1. Help route users to the parts of the website that they are looking for as seamlessly as possible.
2. Expose Crexi’s most important products and services to the user.

Background/Constraints

Crexi has two sides to their platform: a sales side and a lease side, that do not speak to each other and operate independently of each other.

Problems to Solve

1. How might we make out global navigation so it is scalable as we continue to grow and add new products and services?
2. How might we make it so our users don’t have to understand that our platform has two sides to it (sales/lease) in order to utilize all functionality?
3. How might we make it so our solution works on all screen sizes regardless of what device you are on (Desktop, Tablet, Mobile)?

My Role

• Led user research, card sorting, tree testing, and and feedback initiatives to gather qualitative and quantitative feedback to help inform a user-centric design.
• Created Information Architecture flowchart help understand structural design of the shared information environments.
• Created wireframes and prototypes to help visualize the flow and bring the designs to life.
• Collected, monitored, and distilled user feedback to continuously iterate and improve upon designs
• Collaborated with management, product, engineering, and data teams to inform design direction and make sure it aligns with business goals.
• Created beautiful, delightful, and pixel perfect visual designs for engineering handoff.

The Process

Usability Testing: Using our old navigation and usertesting.com, I put together a series of questions that addressed task completion and user understanding.

After watching the tests and analyzing the results- this is what we found:

• 4/5 users were able to figure out how to add a listing (eventually)- *3 of the users first instinct was to look under for sale (where we didn’t have an option to add a listing)
• 3/5 users were able to find Saved Properties easily
• 4/5 users were able to find Saved Searches easily
• 0/5 users were able to find Messages - *all 5 were “confident” that they were in the right spot- but they were on the wrong side of the platform
• 4/5 users were able to navigate to My Listing- for sale
• 2/5 users were able to navigate to My Listings- for lease
• 3/5 users were able to easily navigate to Lead Activity- for lease
• 3/5 users were able to easily navigate to Market Reports
• 0/5 users were able to find our broker offerings easily

In order to successfully land on the correct side of the platform, you needed to use the app switcher- which 0/5 of our users noticed- or had a clear understanding of. It looked like this and was in a dropdown MyCrexi menu:

Card Sorting: I performed an audit of all elements on the Crexi website and then Utilizing OptimalSort and Trello, I ran a series of open card sorts to have users organize the topics into categories and then give those groups of categories a label.

Some Examples of the Card Sorts- Blue represented features that were for sale and green represented features that were for lease

One of the biggest learnings here was that people were not sorting things into “for sale” categories and “for lease” categories- which is what the mental model of the old navigation was.

Information Architecture Flow Chart: I took the learnings from these tests and created an IA flowchart to help map out the new IA and start to visualize what the navigation could look like. I used this foundation to run some tree tests and make sure we were headed in the right direction.

Designs: I approached my designs with a focus on feedback from our tests, data, and key problems to solve

Key Problems to Solve:

• Users do not understand that sales and lease are two separate platforms
• The old navigation is not scalable as Crexi’s offerings grow
• Old navigation does not manage a responsive solution for all browser windows and devices.

Users do not understand that sales and lease are two separate platforms: We went to talk to engineering to help find a better solution for navigating our site without having to use the app switcher we previously had. Since combining the two platforms was not an option- due to the large overhaul that would take- we decided to look for other solutions.

Instead of having a solution that required users to understand what side of the platform they are on before selecting a tool- we decided to put a toggle on the tool level where they can then switch from sales to lease.

And we received really great feedback after the release…

The old navigation was not scalable as Crexi’s offerings grow: In order to address this problem, we decided to create a series of mega menus, and a hamburger menu where we can continue to add products and services as we continue to grow our offerings, which we didn’t have in our old navigation.

The old navigation did not manage a responsive solutions for all browser windows and devices: We had a huge focus on making a solution that would work across all screen sizes and devices- with our old navigation as you shrunk the screen, the search bar would also shrink (see below).

Old Navigation

Since that is one of the main actions we want a user to take on our site, this was a huge problem, so we wanted to make sure we preserved the search bar regardless of what screen size you are on. In addition, as we shrunk the screen there was no where for many of the items to go- the introduction of the hamburger menu allowed us a place for these items to drop off into and allowed for consistency so our users knew where to look for these items regardless of their device.

Desktop, Tablet, and Mobile

Desktop, Tablet, and Mobile Hamburger Menus

Circling Back

After multiple design critiques, product reviews, and executive reviews- we felt like we had the global navigation at a place that was both beneficial to the user and our business goals. So we decided to run the new navigation through testing.

We used the same questions as we did when we ran tests on the old navigation and then analyzed the results and this is what we found:

• 5/5 users were able to figure out how to add a listing
• 5/5 users were able to find Saved Properties easily
• 5/5 users were able to fine Saved Searches easily
• 5/5 users were able to find Messages
• 5/5 users were able to navigate to My Listing- for sale
• 5/5 users were able to navigate to My Listings- for lease
• 5/5 users were able to easily navigate to Lead Activity- for lease
• 4/5 users were able to easily navigate to Market Reports
• 5/5 users were able to find our broker offerings

There was a significant increase in task completion, success, and understanding in every area that we tested.

Next Steps

We will continue to gather feedback through user interviews and testing, and make iterations where appropriate. In addition, as we add products and services we will deliberately decide where it makes most sense to add these, so that are users can continue to have a holistic understanding of our site and how to navigate it.