top of page


Online Commercial Real Estate database

My Role

UX Researcher & Designer




Competitive Analysis
High-fidelity Mockups

Realgraph MacBook Pro.gif

Observer Media was looking to spin off Realgraph, a database within Commercial Observer, its commercial real estate news site.

Realgraph was a tool that enabled users to find and contribute commercial real estate properties, deals and organizations, and people in the industry.

I was brought on to design Realgraph as a separate website from Commercial Observer.

I worked closely with Observer’s CTO in finalizing the experience and with a developer through its development until it shipped into production.

I wanted to identify any possible pain points users ran into while using Realgraph on Commercial Observer, so I tried arriving onto the tool myself. It was hard to find.

There were only two ways to access Realgraph: by scrolling to the bottom of a Commercial Observer news story and clicking a thin banner, or by clicking on Realgraph in the footer’s About section. Realgraph appeared to be more of a feature within a site, one users might accidentally stumble into, as opposed to a tool they would actively seek.

Commercial Observer.png

Realgraph could better communicate the value propositions to using it.

To answer Abby Covert’s Usability Heuristic, “Can a user easily describe the value?” I scored Realgraph a 75%.

Users were presented 4 calls to action to contribute to the database at the top of the site, along with a banner at the bottom. But aside from mentioning that users could connect with other commercial real estate professionals, it did not clearly present to them the value of registering to the website and contributing to the database.

Realgraph on Commercial Observer.png

I wanted to get a better idea of what commercial real estate professionals needed from Realgraph and what tools they were using. I created and posted a survey on several forums, including Reddit’s /realestatetechnology subreddit.

Survey respondents said they used CoStar and LoopNet, which were also among the top commercial real estate tools according to Alexa. I also looked into TheRealDeal’s TRData, and into similar databases in other spaces, such as Crunchbase and Angelist. Some patterns started to emerge:

LoopNet, Crunchbase, and AngelList employed social proof when proposing their value.

They displayed company logos to prove that reputable companies were among their users.

Social Proof.png

LoopNet and TRData offered commercial real estate professionals a robust search experience.

While Crunchbase and AngelList also offered users an extensive search experience, LoopNet and TRData’s advanced search was a guide on what a commercial real estate search experience needed to provide users.

Advanced Search.png

CoStar, LoopNet, Crunchbase, and AngelList demonstrated their value by clearly communicating the tasks users could accomplish on them.

Realgraph tried to guide users to contribute deals, organizations, properties, and people to the database, but these were all a single task: contributing. We also wanted users to see the value in exploring the database through search.


Crunchbase, AngelList, and TRData offered users a sense of navigation.

Realgraph did not provide users a quick way of viewing a single type of contribution (properties, deals, organizations, and people) at a time, instead serving all of these on its “homepage.” Providing a navigation like these other tools could help users quickly filter these contributions, and establish a sense of place within Realgraph.


In my early wireframes, I thought of using a navigation panel even in the landing page to start creating that sense of place.

But we determined that the landing page was for new users, working as an onboarding that would guide them directly to the tasks they could complete on Realgraph.

Realgraph Ideas 1.png
Realgraph Ideas 2.png

With a different intention for the landing page in mind, I designed the following experience:

Realgraph Social Proof.gif

Social Proof

We decided to present what companies our members came from and their professional roles, based on what they were telling us upon registering. This served as an another way of attracting people to join Realgraph.

Advanced Search

Members can now perform advanced searches for different transactions (sales, leases, financings).

Realgraph Search.gif
Realgraph Value Propositions.gif

Value Propositions

Realgraph now explains what members can do on tool and the value it can bring to them.

Clear Navigation

Except for the landing page, a navigation panel is now present site-wide, allowing members to quickly filter database entries by type.

Realgraph Navigation.gif

Landing Page

Mockup Landing.png

Explore Page

Mockup Explore.png

Filters – Sales

Mockup Filters Sales.png

Filters – Leases

Mockup Filters Leases.png

Filters – Financings

Mockup Filters Financings.png


Mockup Profile.png
bottom of page