Designing Websites for Luxury Apartments

A compilation of custom designed websites for luxury apartments that highlight the living experience and property details in an immersive, user-friendly view.

Introduction

This case study includes the final experiences of multiple websites designed for LPC’s luxury properties, but summarizes the key design considerations by focusing on the UX design process for Victory Place.

Background
LeaseLabs is a fullstack digital agency focused exclusively for the multifamily industry. Property management firms across the U.S., with expanding portfolios through new developments and acquisitions, were recognizing a disconnect between their online presence and the living experiences they offered. These firms wanted a stronger online presence for their properties. Recognizing that generic or outdated websites didn't always capture the unique charm of each property, which hindered lead generation and ultimately, rentals. By creating user-friendly, informative websites, these companies can attract and retain renters in a competitive market.

Impact
Working as a designer for LeaseLabs, I conceptualized custom-designed websites alongside developers to create user-centric and visually appealing experiences that effectively attract and convert potential renters seeking high-end living spaces.

Role
Designer for LeaseLabs

Client
Lincoln Property Company (LPC)

Contribution
Web Design, Interaction Design, Visual Design, Responsive Design, UI Design, Wireframing, Prototyping

Scope
Agile creation of entire single scrolling websites from initial exploration to development hand-off.

Platform
Website, Desktop and Mobile

product overview

Interaction Design (IxD)

Welcome Intro Animation

LPC wanted Victory Place’s website to feel personal and innovative. I came up with a welcome animation that loads on the page before fading to reveal the site’s content above the fold. This playful animation emphasizes Victory Place’s branding and compliments a v-shaped motif that I use throughout parts of the site. Or, perhaps a loading icon that animates playfully keeps users engaged while waiting for a task to complete.

Microinteractions and Animations Throughout

The rest of the site has subtly placed animations to guide users through the website. They add an interactive feel to create a more engaging experience. Some of the animations include an animated chevron background, fade-in text animations, a line animation that fades in on load, and an auto-looping carousel that teases the property.

Other examples of micro-interactions include strategically placed “read more” CTAs that can expand and hide additional copy content. This dropdown feature provides an intentional, interactive component that is user-friendly and can satisfy SEO optimization without overwhelming the user visually.

Responsive Design

Mobile-friendly

Mobile-friendly design ensures a seamless user experience across all devices, allowing users to easily navigate, access information, and complete tasks on the go. Because a majority of users utilize their phones to find and view apartment websites at one point through their search journey, having the view be convenient translates to increased engagement, higher conversion rates, and a stronger overall digital presence.

Single Scrolling Page Architecture

Single scrolling page architecture offers a unique and engaging way to present information on a website. It’s a multi-page, single-load website that dynamically loads interior web pages as a user scrolls. This approach minimizes click-through navigation and allows for a seamless flow of content that keeps users engaged through visuals, motion and scrolling.

UI Design

Visuals

The v-shaped animation motif ties into Victory Place’s branding, evoking the “V” in Victory and acts to draw the eyes downward to promote scrolling.

In addition to the on-site imagery from their property, LPC also requested additional stock photography that matched their property’s location and feeling. I focused on sourcing imagery that tied into the branding, conveyed a sense of luxury, and depicted a vibrant atmosphere that gives potential renters a better feel for the living experience.

Branding Guide

While Victory Place possessed a foundation with a defined logo, primary brand colors, and target audience characteristics, their visual identity was missing some other aspects that completed their brand direction. I focused on developing a guide that complemented their existing elements and resonated with their target audience. This included selecting a typography that aligned with their brand personality and incorporating additional visual elements that could be used throughout their website.

Component Styles

A core aspect of my interaction design process was the use of reusable components. A style guide helped ensure consistency across the entire interface, creating a familiar and intuitive experience for users. Additionally, reusable components streamlined development by allowing for efficient code reuse. This not only saves time during the initial development but also simplifies updates and maintenance, ensuring the interface remains cohesive and functional over time.

Design Approach

Establishing Project Goals

Business Objectives

Initial stakeholder meetings covered timelines, integrations, and goals that LPC wanted to meet within a website design or redesign.

Goals typically looked like:

  • enhancing a brand’s value and recognition

  • increasing the incoming amount of leads

  • improving the site’s traffic and engagement.

Further conversations focused on getting stakeholder buy-in of their brand positioning and any challenges they are looking to overcome, or anticipate with the property.

Problem Statement

The current website doesn’t portray the true value of the luxury apartments, leading to a disconnect with potential renters. Additionally the user experience of outdated sites needed be improved upon, since poor navigation and detail can reflect negatively on the brand image of the property.

User Centered Design

Identifying and Breaking Down User Types

Segmenting and categorizing users who visit apartment websites helps establish a user-centric approach when considering design decisions. Generally, there are two main user groups to consider: potential prospects (primary user type) and current residents (secondary user type). Creating user personas for renters interested in luxury apartments gives a clearer picture of their motivations, frustrations, and expectations. Understanding these needs, goals, and pain points helps inform designs that effectively caters to their search experience.

User Personas

I crafted two personas that represent the primary user group, Potential Prospects. Each persona embodies specific demographics, needs, and desires, allowing us to design an experience that resonates with their unique lifestyles. Keeping the user’s wants and needs at the forefront of the website’s designs helped craft an experience that ultimately increases their interest in Victory Place.

Design Methods

Sitemapping

Structuring the User’s Journey

To ensure a seamless user experience and account for essential placements of the property’s offerings, I developed a sitemap to depict the user’s navigation flow. This visual representation of the website's architecture helped give me a blueprint to outline key content. Since the site was being built as a single scrolling page, I concentrated on strategizing a singular flow that made sense to the user’s journey. My prioritization of the sections were based on content that they frequented the most, such as floor plans and amenities of a property. My considerations were also for providing a convenient flow for the secondary user group of existing residents.

Wireframes

Iterative Design Progress

The foundation of the site’s design began with sketching out wireframes that focused on information architecture and user flow, essentially serving as the website's blueprints. It was a visual way for me to translate the sitemap into a rough outline of the site without losing my priority of the user experience with visuals.

I was able to use low fidelity versions for easier conceptualizing and configuration of different layout options for the website’s sections which allowed for internal feedback and navigation clarity. After pulling together a cohesive wireframe, I would start to apply visuals and content placeholders. This also involved a few rounds of iterations to make sure everything tied in visually.

Website Sections

Above the Fold

Hero

The hero design includes a full width image, property name, and introductory text of Victory Place’s value proposition along with a CTA to view floor plans.

LPC often has move-in deals and wanted the specials to be shown immediately to visitors loading the site. I opted to have a banner that sits above the navigation to display these promotions instead of a modal window for a less invasive user experience. Users can close the message and also toggle it open with the specials button at anytime.

Navigation Menu Behavior

For the website's navigation, I implemented a responsive design solution to ensure a smooth user experience across all devices. On desktop screens, the navigation utilizes a dual navbar approach. This caters to the extensive list of links and calls to action by providing dedicated sections: one for branding or important information, and a secondary navbar for core site navigation. To enhance usability on desktop, the secondary navbar employs a drawer effect, shrinking as users scroll down and revealing when scrolling up, keeping essential navigation options readily accessible. Since the site is a singular scroll, the sections flow into eachother but users have the option to jump around if they’re intuitively reverse scrolling.

For mobile and tablet users, the navigation menu transforms into a side bar pop-up menu, maximizing screen space and offering a touch-friendly navigation experience. This responsive approach ensures clear and efficient navigation regardless of the device being used.

Floor Plan Exploration

Floor Plans Cards

The floor plan section defaults to a card-based design that fits comfortably within the viewing window. The rest of the data is sized effectively to display key information while allowing for multiple cards on the screen. Viewing unit layouts is a priority when choosing their next apartment and users often compare multiple options, so these cards prioritize clear floor plan visibility. This enables users to compare different floor plan options at a glance, mirroring their natural browsing behavior of evaluating several units before making a decision. This focus on user convenience empowers informed decision-making within the floor plan section.

Tab Solution: Building Map vs. Unit View

The floor plan section caters to diverse user preferences by offering a dual-tab solution that fits comfortably within the viewing window. The default "Cards" view prioritizes comparability with clear floor plan visuals, allowing users to easily juxtapose different unit options. Recognizing the importance of location-based searching, an additional "Building Map" tab is provided. This interactive map, particularly valuable for Victory Place's multi-story layout, allows users to explore available units within their preferred areas of the building, fostering a more targeted search experience. This dual-tab approach empowers users to navigate floor plans based on their individual needs, whether it's immediate visual comparison or location-specific exploration.

Amenities

Simple View for Text Heavy Information

The amenity section also leverages the tab design pattern to streamline information access and fosters user familiarity. These tabs fit comfortably within the viewing window, and categorize amenities into "Residences" and "Community" offerings so users can quickly identify features offered within their individual unit and those available throughout the entire property.

Neighborhood Exploration

Interactive Point of Interest Map

Understanding the surrounding area is crucial for potential renters. The website incorporates an interactive map with points of interest to empower users to explore nearby listings. An embedded map is paired with a category list that allows users to view relevant businesses within the property’s distance. This functionality caters to a key user finding – the desire to understand the property’s location fit for their lifestyle. By promoting the property's location and showcasing the vibrant surrounding community, the interactive map not only enhances user experience but also reinforces the value proposition of Victory Place.

final experience

 

Victory Place

La Villita

The Earl

Summary

Reflections

Reflections

Designing multiple websites for the luxury apartment space has honed my iterative design skills. It's encouraged me to re-evaluate my work and seek ways to optimize the design process. While each property offered distinct value propositions, the core user groups often overlapped. This allowed me to leverage learnings from previous iterations, prioritizing user needs throughout the design process.

Beyond the specific design decisions, the project reinforced the importance of understanding user needs. By empathizing with the aspirations and priorities of our target personas, I was able to design a website that not only showcases the luxury apartments but also empower potential renters to explore their future home and surrounding community with ease.

Challenges

Throughout this project, securing stakeholder buy-in for design choices was crucial as they ultimately had the final word on approvals for their website’s designs. Discussions often centered on balancing aesthetics with functionality and emphasizing this as a key outcome for the benefit of user’s and the business’ needs. Fortunately, demonstrating how user-friendly interfaces contribute to visual appeal helped bridge the gap.

As with many projects, designing with time and budget was a priority. Collaborating with developers on this front helped ensure the final product reflected both design vision and technical feasibility. Open communication, exploring creative solutions together, effectively articulating design choices through detailed documentation, and prototyping tools proved invaluable in bridging the gap between design and development.