TMG Website

TMG Website

Reducing questions about property availability and saving callers’ time

The Challenge

Enhance the look of The Mansour Group’s "Properties for Sale" page by adding tenant logos to each property thumbnail

The Outcome

A new design that made it easier for sales associates and clients to quickly find critical property information

Overview

While working for The Mansour Group (TMG) at Marcus & Millichap, I redesigned the group's "Properties for Sale" page. A technical limitation led me to turn a request to add logos to property thumbnails into an opportunity to implement a new design that improved the page's functionality.

TMG is a nationally-ranked commercial real estate group within Marcus & Millichap specializing in the sale of net leased retail property. TMG uses its website to impress potential clients with past sales and showcase current listings.

The Problem

The original task was to add tenant logos to the "Properties for Sale" page, which had a grey background. Since the site CMS did not support transparency and all of our logos had white backgrounds, new versions of over 100 logos would need to be created to make this happen. To save time, I came up with a solution that removed the need for new logos and improved the page’s functionality.

Before the redesign, clients would often call to ask about property availability. Unfortunately for both the sales team and clients, this information was not clearly visible on the page at first glance. In addition, thumbnail navigation was confusing as link (Details) did not display characteristics that usually indicate clickable text.

Initial design of properties for sale page
Original thumbnail design on the "Properties for Sale" page was hard to read at a glance

The Process

Initial Wireframes
Initial Digital Wireframe

Presented sketches & digital wireframes to lead broker

High-Fidelity Mockup
Realistic Photoshop Mockup

Created realistic mockup based on broker feedback

Launch Changes
Annotated images of new design

Collaborated with developer to launch redesigns

The Solution

To solve the logo problem, I expanded the white frame around each picture so that it covered the entire thumbnail. In addition to fixing the logo issue, the white frame helped property thumbnails stand out.

To reduce clutter, I removed unessential information, in this case property addresses. In addition, pricing and ROI was separated from the rest of the information.

To highlight property status, I placed it in a rectangle at the bottom of each thumbnail. Color coding the rectangle (blue = available, grey = pending) allowed clients and the team to see property availability at a glance.

Final Design displayed on a monitor
The final implemented design as it appeared in 2016

Additional Projects

Feedback in Clothes Shopping

Studying the effect of feedback on the emotions of occasion wear shoppers

View Project

Brixboard

Empowering local traders with varied levels of tech literacy to promote their businesses

View Project

Dose Tracker

Enabling users to easily track usage of over the counter medicine

View Project