SouthCore Real Estate Website Redesign

How I Elevated This Brokerage Firm’s Website From Outdated to Outstanding

July 2026

Project Role: Web Engineer & Front-End Developer

Quicklinks: SouthCore Website Redesign | Presentation Video

Project Overview

SouthCore Real Estate, a commercial brokerage firm, knows southwest Georgia real estate. As the real estate industry continues to evolve in the digital space, this small town firm’s website needs to reflect the professionalism and accessibility of its modern, effective approach to selling commercial property. Thus, I used Bootstrap’s front-end framework along with additional customized CSS and JavaScript to redesign a more navigable, hierarchical, and professional website for SouthCore Real Estate.

The Problem

SouthCore Real Estate’s existing website lacks the cohesive design, clear hierarchy of information, and accessibility standards needed to deliver a strong, user-first experience.

When I collaborated with SouthCore’s founder and CEO, Mike Everett, his list of grievances with the current site was rather lengthy. Property listings were poorly organized and separated across several pages, image carousels were uncontrollable, and the overall site design lacked clear division and depth. In response to this feedback directly from SouthCore’s primary stakeholder, my goal with this redesign is to streamline property listings, simplify the user journey, and revitalize the outdated aesthetics of the current site.

Landing Page of the Existing SouthCore Real Estate Website

As seen above, users open the website to a very underwhelming landing page primarily consumed by a subpar property photo, with a rather long H1 and H2 to follow. The typography choice and lack of dimension unfortunately fail to highlight the modernity and professionalism upon which SouthCore is built. Additionally, this screenshot depicts a lack of control for users over these image carousels, making it impossible for users to refer back to a property photo that piques their interest.

The For Sale Page on the Existing SouthCore Page

The above screenshot is one example of a recurring issue with display of property listings on the existing SouthCore site. As seen in the navigation bar, the user is able to filter property listings only by properties for sale versus properties for lease. If a user is interested in buying a non-land property, they are forced to scroll through rows and rows of land properties to locate other listings for sale. Additionally, there are no buttons on each property listing encouraging users to click them to view more details.

Existing Site Property Details Page

As seen above, the current view a user sees after clicking a property lacks visual hierarchy and a polished, professional layout. The essential details of each listing is thus harder to scan and understand quickly.

The Solution

To begin my redesign, I loaded the Bootstrap starter template into a new file in Visual Studio Code, allowing me to start fresh and build the corrections I wanted to make into this new version of SouthCore’s site. My workflow followed the user flow through the website, meaning I first built the homepage, followed by the Properties page, then the individual property details pages, and finally the About & Services page.

Redesigned Landing Page

First, I built the homepage using Bootstrap components and custom CSS. On the homepage, I selected a more suitable typography pairing from Google fonts for any headings and non-body text to improve visual hierarchy. Additionally, I added carousel arrows and a bar to the hero images, giving the user more control over what property photos they see. Finally, I built two buttons (see above “Browse Properties” and “Explore Our Services”) into the hero carousel, immediately providing users with quick navigation to the specific page they are seeking.

Redesigned Properties Page

On the Properties page, I prioritized streamlined, more easily comparable information. As seen in the above screenshot, I also used custom JavaScript to implement clickable filter buttons that control what properties a user sees based on their specific wants and needs. This prevents any unneccessary scrolling and eliminates the need to navigate between multiple pages, ultimately saving the users’ valuable time.

Redesigned Property Details Page for Available Office Space

The above screenshot depicts how I utilized the individual property details page to display key information, a brief bio, and some property highlights for each available space. I also incorporated CTA buttons, with “Inquire About This Property” directing a user to the Get In Touch form. Ultimately, my redesign of SouthCore’s property listing display aims to maximize ease of use and provide while creating a more consistent, professional presentation for each property, encouraging promising lead generation.

Call To Action “Get In Touch” Form

Redesigned Credibility Section

Throughout the About & Services page, I worked to emphasize Everett’s credibility and years of experience in the real estate industry. I utilized Bootstrap’s responsive grid system to create a two-column About section, nesting a grid of card-style scannable statistics beneath his bio.

Video Presentation

[embed]Presentation of My Speculative Redesign of SouthCore Real Estate’s Website

The Results & Conclusion

Throughout the process of this redesign, I further strengthened my understanding of Bootstrap’s responsive grid system and my comfortability with its front-end framework components to create a cohesive site experience from any device. Additionally, I implemented custom CSS and JavaScript to further refine SouthCore’s digital presence and add interactive property filtering, maximizing usability. My site redesign clearly presents SouthCore’s property listings and services through a more professional, accessible, and user-centric interface. Overall, working with Bootstrap, Visual Studio Code, CSS, and JavaScript helped me elevate SouthCore’s website, encouraging meaningful interactions with potential customers.