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 logos to the thumbnails

The Outcome

A new design that made it easier for sales associates and clients to quickly find critical property information
Screens from an InVision prototype that was used to share the design with remote clients

The Problem

The original task was to add tenant logos to the Properties for Sale page, which had a grey background. Since the site uploader did not support transparency, new copies of over 100 logos would need to be created to make this happen. In order 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 and ask about the property availability. Unfortunately for both the sales team and clients, this vital information was not clearly visible on the page at first glance. In addition, navigation was confusing as the hyperlinked text (Details) did not display characteristics that usually indicate clickable text.

Grey logos include gold bars, sun, and a local sign
A selection of early logos
Logos in bright red-orange and a yellow-orange
Finalists with added color
Logo with simple orange sun rays above company name
Final Logo Design
Original thumbnail design on the Properties for Sale page

The Process

Step 1

Customize Design

Recreate a customized version of the official Rotaract logo in black and white using Illustrator
Before and After logo design

Step 2

Color Options

Extract colors from beach photos and the Rotary logo to create four logo color schemes
Four Color Schemes for logo

Step 3

Collect Feedback

Present top two options to the club president and apply chosen scheme (rotary colors) to logo
Logo with top two color options

Step 1

Low Fidelity Wireframes

Sketches and digital wireframes were presented to lead broker
wireframe of property thumbnails

Step 2

High Fidelity Mockup

Realistic mockup created based on feedback from the broker

Step 3

Design Implementation

Specifications were sent to the website’s developer to launch redesign
Key Findings
Final Design
The final redesign included grouping related information and adding color-coded rectangles to indicate availability at a glance
Screens showing the countdown process I mocked up in Adobe XD to communicate my ideas for the interface to team members
Early Paper Prototype
3D CAD Models
Foam Core Prototype
Final Acrylic Prototype

The Solution

To solve the logo problem, I removed the grey background. This was done by expanding the white frame around each picture so that it covered the entire thumbnail. In addition to fixing the issues, the white frame created contrast that helped the thumbnails stand out on the page.

To reduce clutter, I removed unessential information, in this case property addresses. In addition, price and cap (capitalization rate) were on separate lines and differentiated it from the rest of the information using chunking. This made financial information easier to find.

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

Lists of elements found on Rotaract Sites
Lists of elements found on Rotaract Sites
A poster with sketches
A poster containing visual notes from the presentation created by an artist at the event
Wearable prototype worn on an armScreenshot of calendar interface
A buzzing and flashing wearable prototype presented by two developers on the team
A functioning web-based parent calendar was presented by a front-end developer
Notes from research into sites of California Rotaract Clubs
Sketches of Home Page Design
Sketch of Events Page
Notes and low fidelity wireframes of the new PB Rotaract website
A selection of screenshots from the PB Rotaract website when it went live in January 2017

About the Client

The Mansour Group (TMG) is a nationally ranked commercial real estate group within Marcus & Millichap that specializes in the sale of net leased retail property. TMG uses its website to impress potential clients with past sales and showcase the group’s exclusive listings.

Visit the website at www.themansourgroup.com

Additional Projects

Context

Context

Helping autistic children move from one activity to the next
View Project
TMG Website

TMG Website

Reducing questions about property availability and saving callers’ time
View Project
Dose Tracker

Dose Tracker

Enabling users to easily track usage of over the counter medicine
View Project
TMG Website

TMG Website

Reducing questions about property availability and saving callers’ time
View Project
Dose Tracker

Dose Tracker

Enabling users to easily track usage of over the counter medicine
View Project
PB Rotaract

PB Rotaract

Growing a new club from 4 to 20 members in less than a year
View Project
PB Rotaract

PB Rotaract

Growing a new club from 4 to 20 members in less than a year
View Project
Context

Context

Helping autistic children move from one activity to the next
View Project
Oro Financial

Oro Financial

Refreshing a financial company’s online presence with responsive design
View Project
TMG Website

TMG Website

Reducing questions about property availability and saving callers’ time
View Project
Context

Context

Helping autistic children move from one activity to the next
View Project
CNS App

CNS App

Creating a new way for therapists to treat chronic pain patients
View Project
CNS App

CNS App

Creating a new way for therapists to treat chronic pain patients
View Project
Oro Financial

Oro Financial

Refreshing a financial company’s online presence with responsive design
View Project
TMG Website

TMG Website

Reducing questions about property availability and saving callers’ time
View Project
Context

Context

Helping autistic children move from one activity to the next
View Project
CNS App

CNS App

Creating a new way for therapists to treat chronic pain patients
View Project
Dose Tracker

Dose Tracker

Enabling users to easily track usage of over the counter medicine
View Project