Trago Realty
Trago Realty
Trago Realty
Boosting Growth for a Brand New Realty Firm
This realtor group got a super sleek and strategic website to build a client base
Psychic level empathy, detailed vision, and flawless execution
Psychic level empathy, detailed vision, and flawless execution
Psychic level empathy, detailed vision, and flawless execution
This project was about producing a website that pleased the visual taste of the client, met his goals, and connected with his target audience.
This project was about producing a website that pleased the visual taste of the client, met his goals, and connected with his target audience.
Problem
"I've tried everything and nothing has worked."
Matt Trago is the founder of a real estate brokerage that handles both residential and commercial real estate. He has been trying to establish his digital brand and visual identity, but nothing has worked…yet. For his budding realty business, he's tried using pictures of himself, but that didn't feel right. He tried using a caricature (cartoon-type drawing) of his face to portray his company, but that wasn't it either. Recently, he's had a design team working on a UI design for his new website. The results have not been what he's looking for. That's why he's come to me.
Solution
A crisp, modern, attractive website with all the bells and whistles
The new Trago Realty website design is relevant to both residential and commercial buyers and sellers. It features a sleek design and several bits of functionality, including:
Contact an Agent
Newsletter Sign-up
Call us (on phone)
Apply for open positions
Read blog posts
The site also includes links to various Trago Realty social media accounts.
My role/The team
MYUITEAM founder & Design Lead
I designed this website as a project for my Digital Agency, MYUITEAM. I was the sole designer touching the UI, and my business partner Christian is currently building the website in custom code.
Project summary
Nailing the aesthetic, scoping the MVP, and killing the design
At the beginning of this project, I had to understand Matt's vision and goals for the website. He had particular ideas about what he'd want to show and not show and how he wanted to portray his business. From discovery to curating the final content, we used rapid iteration and frequent feedback to steer the ship to its ultimate destination.
Kicking off with a killer team
On a Tuesday in February 2024, we had a discovery meeting with developer Christian, the client Matt Trago, and me. (I include that detail - that we started on a Tuesday - because the final design was approved seven days later, on the very next Tuesday). After exchanging pleasantries, we got down to brass tacks. Matt told me how the design process (with another designer) had been up until now and shared an outline for his website. He shared his overall growth strategy, and we discussed the details of the project requirements.
On a Tuesday in February 2024, we had a discovery meeting with developer Christian, the client Matt Trago, and me. (I include that detail - that we started on a Tuesday - because the final design was approved seven days later, on the very next Tuesday). After exchanging pleasantries, we got down to brass tacks. Matt told me how the design process (with another designer) had been up until now and shared an outline for his website. He shared his overall growth strategy, and we discussed the details of the project requirements.
The goal isn't to sell real estate?
One would assume that the main goal of a realty firm's website would be to display listings and find potential buyers. That is not the case here. Trago Realty is a brand-new company, so the initial goal will be to establish a credible profile and build an audience through the blog, newsletter, and social media. The website will also enable users to message the company and apply for open positions. Matt wants a website that has a unique sense of personality and a harmonious visual identity. He doesn't want the site to look like your typical cookie-cutter WordPress or Wix website, which is why he came to us!
One would assume that the main goal of a realty firm's website would be to display listings and find potential buyers. That is not the case here. Trago Realty is a brand-new company, so the initial goal will be to establish a credible profile and build an audience through the blog, newsletter, and social media. The website will also enable users to message the company and apply for open positions. Matt wants a website that has a unique sense of personality and a harmonious visual identity. He doesn't want the site to look like your typical cookie-cutter WordPress or Wix website, which is why he came to us!
Struggles with design direction
At the time when I picked up the project, Matt, owner of Trago Realty, had been working with a designer on the website concept. After several weeks of feedback loops and more than eight design iterations, it became apparent that this wasn't working. Some versions were lacking a sense of consistency from section to section. Some felt like the layout was too random and lacking structure. Some looked too much like any boring WordPress or Wix website. That's where I come in. One of my great strengths is discovering the client's requirements, seeing their vision, bringing it to life, and designing in sticky situations. So, naturally, I was ecstatic to take on this tricky design project.
At the time when I picked up the project, Matt, owner of Trago Realty, had been working with a designer on the website concept. After several weeks of feedback loops and more than eight design iterations, it became apparent that this wasn't working. Some versions were lacking a sense of consistency from section to section. Some felt like the layout was too random and lacking structure. Some looked too much like any boring WordPress or Wix website. That's where I come in. One of my great strengths is discovering the client's requirements, seeing their vision, bringing it to life, and designing in sticky situations. So, naturally, I was ecstatic to take on this tricky design project.
Local appeal, national reach
Trago Realty is focused on realty in Chester County, southern Pennsylvania. Therefore, the website should make that clear and use visuals to appeal to locals. Still, the client wants to be clear that he can sell homes or buildings anywhere in the country if needed. In the project outline, the client provided a graphic showing the Chester County map, so I prioritized using this in the design.
Trago Realty is focused on realty in Chester County, southern Pennsylvania. Therefore, the website should make that clear and use visuals to appeal to locals. Still, the client wants to be clear that he can sell homes or buildings anywhere in the country if needed. In the project outline, the client provided a graphic showing the Chester County map, so I prioritized using this in the design.
The issue with images
It's only natural to assume that a real estate site would have tons of pictures of houses and buildings. However, the client wanted to avoid that for a few reasons. He didn't want prospective clients to be turned off when they didn't see "their type of place" in a picture on his site. For example, if he shows pictures of million-dollar McMansions, then lower-budget buyers wouldn't want to reach out. Conversely, the high-dollar clients would look elsewhere if he showed low-budget homes. Matt mentioned the possibility of showing a silhouette of houses and buildings. This would give the impression of real estate rather than showing defined. He also preferred to avoid using images of himself on the site because he wanted to convey his company's brand rather than his personal image.
It's only natural to assume that a real estate site would have tons of pictures of houses and buildings. However, the client wanted to avoid that for a few reasons. He didn't want prospective clients to be turned off when they didn't see "their type of place" in a picture on his site. For example, if he shows pictures of million-dollar McMansions, then lower-budget buyers wouldn't want to reach out. Conversely, the high-dollar clients would look elsewhere if he showed low-budget homes. Matt mentioned the possibility of showing a silhouette of houses and buildings. This would give the impression of real estate rather than showing defined. He also preferred to avoid using images of himself on the site because he wanted to convey his company's brand rather than his personal image.
What are other realtor's doing?
I looked at several small realtor brokerage firm websites to get familiar with the space and the competition. This was a twofold mission for me. First, I wanted to see what people are accustomed to seeing on a realty website regarding formatting, layout, and functionality. People like seeing things that feel familiar and are easy to understand. Because of that, I would seek to replicate some of the UI patterns in the Trago Site. The second part was getting a sense of the competitors' branding, messaging, and visual identity. One of my goals was to create an aesthetic that would stand out in this crowded space.
I looked at several small realtor brokerage firm websites to get familiar with the space and the competition. This was a twofold mission for me. First, I wanted to see what people are accustomed to seeing on a realty website regarding formatting, layout, and functionality. People like seeing things that feel familiar and are easy to understand. Because of that, I would seek to replicate some of the UI patterns in the Trago Site. The second part was getting a sense of the competitors' branding, messaging, and visual identity. One of my goals was to create an aesthetic that would stand out in this crowded space.
Visual Identity through shape
Visual Identity through shape
Since I had recently been studying how great companies and designers use shapes in UI design, this strategy was fresh on my mind. Immediately, I noticed the round shape of the Trago Realty logo, which features text inside a circle shape. Because of that,
I included a circle shape in the graphic and used rounded buttons and UI elements. Also, the Chester County map shape is used on the hero graphic. This is recognizable to those in his area and provides a nice local feel.
Since I had recently been studying how great companies and designers use shapes in UI design, this strategy was fresh on my mind. Immediately, I noticed the round shape of the Trago Realty logo, which features text inside a circle shape. Because of that,
I included a circle shape in the graphic and used rounded buttons and UI elements. Also, the Chester County map shape is used on the hero graphic. This is recognizable to those in his area and provides a nice local feel.
My first stab at it
My first stab at it
The word "silhouette" rang in my head in conversations with the client. Matt had mentioned showing a silhouette of homes and buildings rather than detailed images. For this reason, I used the city silhouette.
The word "silhouette" rang in my head in conversations with the client. Matt had mentioned showing a silhouette of homes and buildings rather than detailed images. For this reason, I used the city silhouette.
First round of feedback
Knowing the importance of social proof in today's markets, I included a small feature displaying avatar images and text for the number of "Satisfied customers" that Trago Realty has served so far. Being that this realty firm is relatively new and doesn't have an impressive number of clients served to this point, Matt decided to axe this element for now but hold on to it for possible future implementation.
Matt liked the idea of the silhouette image but thought the skyline was too urban-looking to match his more rural area. Also, it seemed a little too dark. I used a gold key graphic, but as it turns out, Matt was not a fan of this, so we removed it.
Although this section was not included in the outline of requirements, I suggested including a "Benefits" section with cards detailing the advantages of working with a seasoned realtor - Experience and Expertise, Network and Connections, Trust and Reputation. Matt decided against having this section.
Knowing the importance of social proof in today's markets, I included a small feature displaying avatar images and text for the number of "Satisfied customers" that Trago Realty has served so far. Being that this realty firm is relatively new and doesn't have an impressive number of clients served to this point, Matt decided to axe this element for now but hold on to it for possible future implementation.
Matt liked the idea of the silhouette image but thought the skyline was too urban-looking to match his more rural area. Also, it seemed a little too dark. I used a gold key graphic, but as it turns out, Matt was not a fan of this, so we removed it.
Although this section was not included in the outline of requirements, I suggested including a "Benefits" section with cards detailing the advantages of working with a seasoned realtor - Experience and Expertise, Network and Connections, Trust and Reputation. Matt decided against having this section.
Next round of revisions
Next round of revisions
In round 2 of revisions, I updated the typeface family in the UI to match the Trago Realty logo. I used an AI-enabled web app, which lets users upload an image and then find typefaces to match it. I found that Zona Pro was the typeface from the logo and updated the design to use it, too.
In round 2 of revisions, I updated the typeface family in the UI to match the Trago Realty logo. I used an AI-enabled web app, which lets users upload an image and then find typefaces to match it. I found that Zona Pro was the typeface from the logo and updated the design to use it, too.
Expanding the visuals
Expanding the visuals
In review, the client let me know that he was a fan of yellow, so I started to pepper in some yellow in the UI for badges, borders, and graphics. I also used Midjourney to generate illustrations of houses and commercial buildings to use on the website. Aside from the hero graphic, the circle shape is used for section headers, with an icon inside (as seen below). I also began designing other sections in the website for blogs, newsletter signup, and careers.
In review, the client let me know that he was a fan of yellow, so I started to pepper in some yellow in the UI for badges, borders, and graphics. I also used Midjourney to generate illustrations of houses and commercial buildings to use on the website. Aside from the hero graphic, the circle shape is used for section headers, with an icon inside (as seen below). I also began designing other sections in the website for blogs, newsletter signup, and careers.
Fine tuning the illustrations
Fine tuning the illustrations
Matt was fond of the style of the illustrations in the previous version, but he didn't like how sections alternated using graphics of houses and commercial buildings. He preferred to see residential homes and commercial buildings together. He also added that it would be nice to see residential townhouses, apartments, commercial warehouses, strip malls, and office buildings.
I followed these directions and used Midjourney to create illustrations of each type of structure. I then removed the background and integrated the separate images into one graphic, with residential on the left and commercial on the right.
Matt was fond of the style of the illustrations in the previous version, but he didn't like how sections alternated using graphics of houses and commercial buildings. He preferred to see residential homes and commercial buildings together. He also added that it would be nice to see residential townhouses, apartments, commercial warehouses, strip malls, and office buildings.
I followed these directions and used Midjourney to create illustrations of each type of structure. I then removed the background and integrated the separate images into one graphic, with residential on the left and commercial on the right.
Before
After
Final Designs
Final Designs
Responsive Hero Section
Responsive Hero Section
The hero section features a menu with social media links, and the following calls to action: Call Us, Contact an Agent, and Newsletter Sign-Up.
The hero section features a menu with social media links, and the following calls to action: Call Us, Contact an Agent, and Newsletter Sign-Up.
Final Designs
Final Designs
Blog section
Blog section
The blog section uses two columns for Residential, and Commercial. Selecting the "View all blogs" button will open the Blog page, seen in the following section.
The blog section uses two columns for Residential, and Commercial. Selecting the "View all blogs" button will open the Blog page, seen in the following section.
Final Designs
Final Designs
Contact section
Contact section
The user can enter their name, phone number, email, and a message to send to the Trago Realty team.
The user can enter their name, phone number, email, and a message to send to the Trago Realty team.
Final Designs
Final Designs
Newsletter Signup
Newsletter Signup
Here, the user can enter an email to subscribe to the Trago Realty newsletter.
Here, the user can enter an email to subscribe to the Trago Realty newsletter.
Final Designs
Final Designs
Careers Section
Careers Section
By clicking the "Apply now" button, users will open an application modal, as seen in the following section.
By clicking the "Apply now" button, users will open an application modal, as seen in the following section.
Trago's new home
Trago's new home
And just like that, within a month, we designed and built a beautiful website to serve as a hub for Matt and his realty brokerage company, Trago Realty. Check out the site live at TragoRealty.com
And just like that, within a month, we designed and built a beautiful website to serve as a hub for Matt and his realty brokerage company, Trago Realty. Check out the site live at TragoRealty.com
Great client feedback
Great client feedback
We received great positive feedback from Matt:
We received great positive feedback from Matt:
"Through the process of designing my website, I became acutely aware of how challenging it is for someone to fulfill a vision of mine and meet my expectations when that "vision" doesn't exist yet.
Nate thoughtfully designed my website from merely an outline of words that I provided him and a consultation. He delivered a draft, listened carefully to my comments, and made meticulous revisions. I didn't know what to expect, but he created exactly what I expected . . . if that makes any sense. And it's nothing less than amazing! I highly recommend Nate."
Thanks for viewing! 👋
Thanks for viewing! 👋
Thanks for viewing! 👋
Check out more of my case studies below
Check out more of my case studies below
Back to top
Spectrum
A Seamless Sales-to-Engineering Experience
Spectrum
A Seamless Sales-to-Engineering Experience
Spectrum
A Seamless Sales-to-Engineering Experience
Spectrum
A Seamless Sales-to-Engineering Experience
Journey.AI
The Ultimate No-Code Business Solution
Journey.AI
The Ultimate No-Code Business Solution
Journey.AI
The Ultimate No-Code Business Solution