Plan

The first step in any project is understanding client expectations and planning around them.

To help accomplish Marie’s main goals of (1) establishing her brand and (2) finding more clients, I started conducting research to help identify her competition, client demographics, and to develop her market positioning statement.

Buno Realty Positioning

When people hear “Marie Buno” or “Buno Realty,” we want them to think of a knowledgeable, dependable agent who fights full-time for each client’s dream and alleviates their fears.

We will position her as a middle-tier agent — a true professional who provides consistent access to all the services clients expect while offering a personal approach that a larger service can’t.

Develop

Now that I clearly understood the client’s objectives, I began the process of developing the Buno Realty brand, website, and digital marketing campaign.

Design System

Before I began designing anything, I determined a set of rules for the Buno Realty Design System that would guide all my design decisions:

  • Plenty of white space to invoke luxury and calm
  • An un-opinionated color scheme that works well with any set of housing imagery
  • WCAG accessibility compliance as part of FHEO
  • Serif Headings to suggest authority and class
  • San-Serif body copy for legibility
  • Consistency is everything

Now that I had a few rules in place, I began iterating through logo concepts. I wanted a logo that was monochromatic, understandable at small sizes or on signage from a distance, simple enough for embroidery and vinyl, and that followed the Silver Ratio - my favorite.

Website

Planning the Sitemap

My first step in developing BunoRealty.com was to develop a sitemap, so I knew how many pages I would need to design. For inspiration, I used a Python automation script to scrape, map, and compare the sitemaps of several local and national competitors. This helped me establish a list of must-have pages.

Creating Wireframes

I used LucidChart to quickly iterate wireframes for pages. This helped me make sure that pages were laid out in a logical manner, had a specific purpose, and clear Call to Action (CTA).

Making Mockups

While it can be tempting to jump straight into the coding fray, taking the time to mockup your website in software like Adobe XD or Sketch can save you a ton of project hours, as large client changes are much easier to make.

Designing the website in Sketch allowed me to iterate through page designs, see what was and wasn’t working at different sizes, and use client feedback to create a design she was pleased with.

When I started building the website itself, I was able to use my pixel measurements, re-usable components, text styles, and color variables from Sketch to save time in development.

Building the Site

To build the site, I started by purchasing the domains “BunoRealEstate.com” and “BunoRealty.com,” securing them with an SSL certificate and pointing them to a Ubuntu Instance hosted with Digital Ocean. This particular host gives Marie the flexibility to only pay for the web hosting resources she actually needs.

After provisioning the server, I installed WordPress and began building the site with the Oxygen builder. Oxygen allows me to create re-usable components, take advantage of color variables, and is less resource-intensive than other builders.

The final step was optimizing meta-keywords and using Google Tag Manager to make sure site events were being properly tracked for analytics.

Writing a Custom API

A unique challenge of the project was connecting the site to various services that Marie uses for her business. While services such as Zapier exist that solve this problem, they are billed by usage, making costs unpredictable.

My solution was to write a simple RESTful API using a Python library called Flask. With Flask, I only had to define routes to accept data, and Python functions to handle it. For example, when someone fills out the contact form, the data is sent to the API and a Python function sends Marie a text message that she has a new lead puts it in her CRM.

Using this approach, Marie pays no extra cost, as the API runs quietly on her web server inside a Docker container.

Ad Campaign

With her brand and website ready, the final project requirement is driving traffic to her website via a digital ad campaign.The most important aspect of the ad is the value offered. For this particular campaign, we are offering free comprehensive market evaluation reports. Those who are interested only have to enter their address, name, and email.

Audience Targeting

To be compliant with the Fair Housing Act, Facebook was forced to limit most demographic and interest-based targeting options for those running Housing-related ads. I was only able to target people in her service-area interested in home-buying, Zillow, and Real Estate.

Providing Dynamic Creative

Using Facebook’s “Dynamic Creative” option, I was able to create headline, image, and copy variants. Facebook automatically runs A/B tests to see which variants do the best for different types of people and optimize accordingly.

Analyze Performance

Evaluating Site Performance

The site appears to be performing well, with a low bounce rate and a healthy amount of important events. However, some people haven’t been entering their City/State on the home report form, making it throw an error, and some people are exiting during the last step of the form (entering their email to recieve the report).

To fix this, I’ll try rephrasing the form field to include city/state and implement a re-targeting event for those who get to the second step, but don’t submit the form, to see if I can get them back on the site.

Reviewing Ad Performance

With such a limited amount of interests available to target, I get the feeling that the Facebook bidding competition is fierce, making our cost-per-result higher than I’d like. I’m going to keep it running to see if Facebook’s conversion optimization can drive down the cost as more conversions happen, but we might just need to accept the higher cost-per-result.

I might also try running Google AdWords instead of Facebook for a month, and see how the cost-per-result compares.

Tools Used
Illustrator, InDesign, Photoshop, WordPress, Docker, Python
Discipline
Branding, Front-end Development, UI, Ads