AISA Realty

Client
Aisa Realty
Product
Webflow Responsive Website
Role
Design Consultant, Developer
Tools

(tLDR version)

Project Overview

AISA Realty is a boutique real estate brokerage firm in Vancouver BC specializing in the sale and rental management of luxury high end properties in the lower mainland. The brokerage wanted an updated aesthetic for their website to refresh their online presence as a bespoke real estate operation that communicated first class experiences.

The Challenge

Their previous website was built on wordpress and was experiencing speed performance issues when loading up media content and frequent crashes when plugins required updating. They also wanted to have a certified encryption security as their previous website didn't have it. It was important that they were looking for a website platform that was easy to maintain and update new content in the future.

The Solution

A brand new custom website was designed from the ground up using Webflow as the new web hosting platform. I used a refined and minimalist visual approach and structured a symmetrical layout for ease of navigating the content. A robust content management system (CMS) was designed to provide Aisa Realty with the ability to easily add/update new listings on their own without the need to call a web developer for changes.

Services

Website IA Audit | Content Strategy | Visual Moodboard | Wireframing | Webflow Development | CMS Database Design

Visit Website
Visit Website

The Scope

Project Background

The Problem

Goals

Goals

  • Custom bespoke website design with updated aesthetics and improve user experience with micro interactions to increase engagement
  • Improve speed performance when loading page content
  • Provide SSL Certificate for website security

AISA Realty's target audience are top executives and business owners looking for a full service offering in high-end property management and buying/selling properties mainly in the downtown core of Vancouver. It was important not to overwhelm the user with too much information as they are busy individuals and wanted to highlight the content that really matters front and centre. With this in mind, the design criteria are as follows:

Design Criteria

  • Clean and minimal aesthetic utilizing white space and symmetrical grid layouts
  • Image heavy content with relevant property details easily displayed
  • Ability to easily add/update new listings with a content management system (CMS)

Moodboard & Style Tile

Website Moodboard & Style Tile

The colours were taken from AISA's original branding incorporating the gold as the accent colour and using a minimalist white backdrop to create more negative space. The use of a strong serif font for headings were important to provide that classic and luxurious language. Image heavy content and clean grid layouts were requested by the AISA Realty.

Information Architecture & Whiteboarding

The overall flow of information presented to the user was important to follow a conversational userflow that addresses some of the questions the target audience has when arriving on the website.

What

When users arrive on the website they immediately want to know "What is it that you do and what level of service do you provide?". Right from the beginning you are greeted by the hero section which communicates that Aisa Realty is a full service provider in luxury real estate. As you scroll down, you are presented with the clients section, which validates the level of social proof clientele that AISA Realty works with followed by the services offered.

Who

The next question that users have next is "Who are you? Tell me more of what makes you unique." This section provides the audience with the story of AISA and shares more about their reputation and services. After knowing about WHAT and WHO AISA Realty is all about, it's important to position the main content of the residential listings next to showcase the type of luxury properties are available.

Why

If the user doesn't click on the listings section, they usually want to know "Why should I trust you? How credible are you and what have others said about their experience?" This is where testimonials come in to provide the ratings of their service to further convince the audience of their quality service.

Call to Action

Finally a contact form is provided at the bottom for the user to reach out and engage with AISA Realty.

Wireframes

Wireframes: Low-Fidelity (Left), High-Fidelity (Middle), Final Website (Right)

Video Hero Section

Having a video as the background for the hero section immediately creates higher engagement to the user and sets the tone for the environment in which AISA Realty specializes in. Two of their largest clientele are showcased in the video, the Shangri-La Hotel and the Trump International Hotel. Because the target audience are busy individuals, it was important to position links to AISA Realty's main services at the bottom of the screen - out of the way of the stunning views but readily available if you need it.

Dynamic CMS Database

Webflow Custom CMS Collection for Property Listings

A custom database was created to manage the property listing details within Webflow's content management system (CMS). Once all the custom fields have been created, AISA Realty was able to add or update new listings in a matter of minutes and all the specific information such as number of bedrooms, bathrooms, square footage, and price are then dynamically pulled from the database and applied to the relevant property listing cards and pages. Even updating the status of a listing to be Available for Rent, Leased, Sold, etc can be easily updated by the client. This gives all the control for updating property information back into the client and saves a lot of time calling a web developer changing and maintaining new updates.

Property Listing Cards

Dynamic Property Listing Card with CMS Database
Yes, you saw correctly...that's $25,000/mo - I know, right?

CMS Filter System

The CMS Collection for property listings were categorized into locations and number of bedrooms and utilizes AND operators for multi-filter settings as shown below.

Filter Settings for Listings with 1 Bedroom Rentals
Filter Settings for Similar Listings by City Location, Listing Type, and # of Bedrooms

The Design Process

Research & Findings
Design Planning

Prototyping & Testing

Recent Projects

Clear Aligner Technique
Webflow Responsive Website
Clear Aligner Technique
Webflow Responsive Website
This clinical handbook showcases the future of digital orthodontic treatment planning for orthodontist and dental students
This clinical handbook showcases the future of digital orthodontic treatment planning for orthodontist and dental students
Juice Labs
Tech Community Meetup Event
Juice Labs
Tech Community Meetup Event
Empowering a community of designers, developers, and digital marketers with the skills to make a difference to the people that matter
Empowering a community of designers, developers, and digital marketers with the skills to make a difference to the people that matter
Custom KDS Design
Kitchen Display System
Custom KDS Design
Kitchen Display System
Designed custom KDS prototypes aimed to reduce training/operations costs as part of a cost/benefit analysis study
Designed custom KDS prototypes aimed to reduce training/operations costs as part of a cost/benefit analysis study