Unfinished pages and no hierarchy

The original site had a multi-page layout with unfinished pages, while others had no content hierarchy. Also, the site wasn't 100% responsive to smaller devices and had an outdated design. Due to a limited time frame, we wanted to salvage as much current content as possible while eliminating irrelevant content.

Google doc collaboration

Over several meetings, Rivendell Real Estate's founding broker and I determined that the site needed to be 100% responsive, have a more modern look and feel, improved navigation, and streamlined messaging. To simplify info-sharing and gathering, we collaborated and shared ideas through Google Docs.

How can we stand out?

Rivendell's brokers had such favorable feedback from clients over the years that they wanted to showcase these testimonials. They felt that most real estate or property management companies place their focus on properties, not the client experience. So, we chose to highlight their positive client feedback in a testimonal section.

Simple navigation structure

After deciding on a one-page website format, we wanted every page accessible from the Home page. The resulting site map was straightforward: Home, Services, About Us, Testimonials, Contact Us, and links to the Property Management Portals.

New logo

We also wanted to redesign the company's logo while maintaining the look and feel of a real estate and property management company. The brokers' goal was to have a simple yet modern logo, so that the colors can be interchanged easily to accommodate open house signs, business cards, light vs dark backgrounds, etc.

One-page responsive design

I researched several Bootstrap and landing page designs and layouts on several sites, including Wrapbootstrap, Land-Book, and Onepagelove to get some ideas for the site's general organization. I mocked up wireframes for Rivendell's site, sharing the low-fidelity wireframes with the group.

High fidelity mockups

At the time, my tools of choice were Illustrator or Sketch - for me, it was much quicker to grab layers, select elements, and edit text. I wanted to showcase their testimonials in a more accessible layout, so I updated the carousel design to a card layout. To gather feedback, I shared prototypes via Invision with my design mentor at Bloc.io, the Rivendell brokers, and several design professionals.

Bootstrap framework

Based on a recommendation by my Bloc mentor, I decided to use the Bootstrap framework since it has extensive documentation and resources for responsive HTML/CSS development. At the time, I watched several Lynda.com Bootstrap tutorials from Jen Kramer and Ray Villalobos.

A card layout highlights client experiences when they purchased or leased through the brokers. Their photos also add to their approachability.