12 Dec 2020

Case Study: Northstar Lifestyle

Northstar Lifestyle is a real estate group based in Santa Monica, California. It deals with the buying and selling of homes, and manages rental property in the West Los Angeles area. Northstar Lifestyle needed a website to build brand awareness and be more accessible to prospective clients and residents. We were tasked with designing and developing a website with no previous version to reference—a new, clean slate.

Julian Vu

The Context and Challenge

Northstar Lifestyle realized that establishing a web presence was vital to showcasing its properties and be more easily accessible to its real estate clients in an increasingly digital world. With no previous website in place, we had a blank canvas from which to design one from scratch.

The project needed to have a simple and sophisticated design, it needed to be easily navigable, and it needed to entice prospective clients into making inquiries.

The goal of the website is to help Northstar Lifestyle create brand awareness and be the first place for new clients to learn more about Northstar Lifestyle, its properties, and its services.

The Process and Insight

The Wireframes

Wireframes used in Northstar Lifestyle

We started with drawing up wireframes that determine the overall structure and layout of the website. Wireframes are primarily made up of abstract shapes that loosely represent visual elements such as text or images. Since the wireframes only represent the layout of the website, no color is used beyond grayscale at this stage.

Wireframes used in Northstar Lifestyle

Several wireframes were created from which  Northstar Lifestyle could select based on their preference. We used these conversations to review and discuss design decisions that would define the look-and-feel of the final product.

The Concepts

Concepts used in Northstar Lifestyle

The wireframes selected by Northstar Lifestyle are used as a stepping-off point to begin experimenting with color palettes. Visual elements that were once grayscale begin to take on color and we get a better view of what the final product might look like.

Similarly to the wireframing stage, we experimented with two color palettes in five concepts from which Northstar Lifestyle to choose. The color palettes we experimented with were deliberately chosen due to their neutral tones. We know that online real estate experiences place a great amount of visual importance on images and videos. A neutral color palette allows enriched media to stand out and be the main focus for prospective clients.

Concepts used in Northstar Lifestyle

The different concepts give a glimpse into what the final product might look like if the colors were primarily light or dark. Ultimately, Northstar Lifestyle chose a darker tone to be the primary color palette.

The Mock-Ups

After selecting the colors, we transition to the mock-up phase where content replaces the abstract shapes from the previous stages. Mock-ups are made to be representative of the final product.

We created multiple iterations of the mock-up, making sure to include the Client in every design decision. Every iteration reflects changes and further refinement of the design based on Northstar Lifestyle’s preferences and requirements.

In this stage, we also mock-up a mobile design to demonstrate responsiveness.

The Implementation

After Northstar Lifestyle is satisfied with the mock-up, we go into implementation where the mock-up is used as a reference for the development of the website in code.

We make every effort to match the mock-up as closely as possible while ensuring that the website is responsive and fits on all screen sizes.

The client also requested that the contact form change according to what a visitor clicks on the website. If a visitor clicks on the Contact Us button in the Sanctuary section, the form pre-fills with a message for a visitor’s convenience.

Website visitors pay attention to movement and other dynamic visual elements. Thus, all buttons on the website change color and animate upon hovering over them.

The Results

Northstar Lifestyle now has a sophisticated website, that is simple to navigate on devices of all screen sizes. The neutral, dark color palette sets the stage for stunning photography and enriched media to be the main focus. The buttons and interactivity encourage visitors into making inquiries into Northstar Lifestyle, their properties, and their services.

This project is a step towards delivering a more digital real estate experience for an increasingly digital age.

Ready To Start Your Project?

Ready to Start Your Project?

Frequently Asked Questions

1. How much does a website cost?
This depends on the complexity of the website and some other factors. I’m happy to give a cost estimate during an initial consultation where we can discuss the details of the project.
2. How soon can I have a website?
This also depends on the complexity of the website and how urgent your timeline is. I’m happy to discuss the timeline of your project during an initial consultation.
3. Do I have creative control?
I make every effort to make your website truly yours. I check in regularly with you to ensure that the design is to your liking. While I can offer my expertise, you have complete creative control over your project.