Rancho Bernardo

Redesigning an architecture project website for interactiveness and responsiveness

Background

The Summit Rancho Bernardo is one of Jay Paul's innovative corporate campus located in the heart of Rancho Bernardo, San Diego. Currently available for sale, Jay Paul requested DES architects + engineers to revamp The Summit Rancho Bernardo's commercial real estate website to increase traffic.

Duration

4 Months

My Role

UI designer
Webflow developer

Tools

Older Designs

Previously developed via Wix, the stake holder's main concern was that it's not responsive to fit different viewports, from large 4k display monitors to laptop size 2560×1600.
‍
To best utilize the opportunity to revamp an existing website, I pitched to transfer the website to Webflow for an interactive and responsive website. For the best user experience, we decided to keep one page layout so that the customers can find all the information just by scrolling the site.

New designs

To best utilize the opportunity to revamp an existing website, I pitched to transfer the website to Webflow for an interactive and responsive website. For the best user experience, we decided to keep one page layout so that the customers can find all the information just by scrolling the site.

2 column grid layout was used for sections with paragraphs so each line is short enough for the readers to read. Of course, these kind of empty spaces are best place to add stunning visuals created by our 3d Artists.

#0d293e

#67a1b8

#afcedc

#daa441

In order for a consistent branding, colors were chosen based on the logo. Icons were introduced for better information organization.

There's no rules that site plans need to be boring diagrams with google earth. For consistent branding and interesting grid system to fit more contents, The summit's site plan was color graded and extended.

Like the site plan, The summit's amenity map was created with consistent coloring and ample space to nest contents inside the image.

Simple static Amenities map could be beautiful, but not as informative. In this embedded google map with API the customers can find the tempting amenities near the site.

Since the building is not completed yet, our 3d artists created realistic renderings to reveal proposed site designs to the audience.

Last but not least, contact us section was added as a last section for CTA. Some might say contact us form is so out of fashion, but in this project we received some good emails through the form.