/ Victory Place

A custom built website for a luxury apartment, managed by Lincoln Property Company (LPC).

Overview

Context

LeaseLabs is a fullstack digital agency exclusively for multifamily properties in the real estate sector. Their clients are property management firms across the U.S. with expanding portfolios of new developments and acquisitions. Lincoln Property Company, one of the leading firms in the industry, sought to form a strong online presence for their properties in order to capture and maintain their target audience’s interest against competitor properties. This write up showcases the process I took on for a luxury complex in a high traffic area, and details my efforts on custom sites during my time as a designer at LeaseLabs.

Impact

Working as a designer for LeaseLabs, I conceptualized custom-designed websites alongside developers to create user-centric and visually appealing experiences that effectively attracted potential renters seeking high-end living spaces. My design for Victory Place received a strong praise and approval from the client, and reportedly helped them realize an increase of traffic and renter interest.

Platform Responsive website

Product Website design

Client Lincoln Property Company (LPC)

Contributions branding / content strategy / design presenting / dev hand-off / heuristic evaluation / hi-fi mockups / information architecture / interaction design / iterative design / prototyping / responsive design / user personas / web design / wireframing

Features + Highlights

Opening animation

A welcome animation was implemented to load and fade in. This emphasizes Victory Place’s branding and compliments a v-shaped motif that’s placed throughout the rest of site.

Subtle animations and micro interactions

Victory Place’s new website hosts a variety of animations and micro interactions for an engaging site exploration. A downward chevron animation encourages scrolling and strengthens the property’s branding.

Single scrolling page architecture

A single page site with vertical scrolling. This multi-page, single-load website dynamically loads interior web pages off screen while a user is scrolling. This approach minimizes click-through navigation and allows for a seamless flow of content that keeps users engaged through visuals, motion and scrolling.

Mobile friendly design

Responsive design was prioritized to ensure a seamless user experience across all devices. The website’s components accommodate smaller screen sizes for easier mobile viewing.

The Challenge

LPC wanted to minimize the disconnect between their property’s online presence and the living experiences they offered

Victory Place’s current website design was no longer aligning with LPC’s goals for this property’s market value and rental audience. Stakeholders wanted to better reflect the property’s perks and offerings, stand out against competitors, and attract more potential renters in this property’s highly desired area.

Approach + User Empathy

Identifying types of users visiting the site

Before jumping into design, I segmented site visitors into user groupings frequenting the website to empathize with what their goals would be for a site visit. I essentially accounted for two main user types: potential prospects and current residents. These would be the primary and secondary users I referenced to keep the user’s wants and needs at the forefront of the site’s design and help craft an experience that retains their interest and positive perception of Victory Place.

Primary users

potential renters

Goals

  • Finding an apartment that meets lifestyle, aesthetic, amenity and location preferences

  • Conveniently view property and units

  • Make informed decisions before next steps

Pain Points

  • Unclear, cluttered and hard to find information from a glance

  • Frustrated with visibility of apartment layouts, details, and seeing availability

  • Unit viewing experience is overwhelming

  • Struggling with deciding whether the apartment matches preferences

Secondary users

current residents

Goals

  • Conveniently make rent payments

  • Submit maintenance requests

  • Ability to reserve amenities

  • Quickly contact management for general questions

Pain Points

  • Confusion between where to pay rent, where to request maintenance, and where to contact leasing office

  • Trouble locating access to resident portal

  • Apartments have limited information about community and amenity details

The apartment's two main user groups and their goals and pain points.

Identifying types of users visiting the site

Before jumping into design, I segmented site visitors into user groupings frequenting the website to empathize with what their goals would be for a site visit. I essentially accounted for two main user types: potential prospects and current residents. These would be the primary and secondary users I referenced to keep the user’s wants and needs at the forefront of the site’s design and help craft an experience that retains their interest and positive perception of Victory Place.

Primary users

potential renters

Goals

  • Finding an apartment that meets lifestyle, aesthetic, amenity and location preferences

  • Conveniently view property and units

  • Make informed decisions before next steps

Pain Points

  • Unclear, cluttered and hard to find information from a glance

  • Frustrated with visibility of apartment layouts, details, and seeing availability

  • Unit viewing experience is overwhelming

  • Struggling with deciding whether the apartment matches preferences

Secondary users

current residents

Goals

  • Conveniently make rent payments

  • Submit maintenance requests

  • Ability to reserve amenities

  • Quickly contact management for general questions

Pain Points

  • Confusion between where to pay rent, where to request maintenance, and where to contact leasing office

  • Trouble locating access to resident portal

  • Apartments have limited information about community and amenity details

The apartment's two main user groups and their goals and pain points.
Design Requirements

Proposed solution

Create a website representing Victory Place that reflects a feeling of sophisticated and convenient living while providing users with enough information and interest to pursue inquiry and accessibility for current residents to property links.

    • Include all requested property information including SEO content, third party integrations, and property details.

    • Incorporate existing branding but update it modernize the overall feel.

    • Provide quick access to all requested links in the navigation experience.

    • Design a website that is structured as a single scrolling page.

    • Create a design that enhances the brand’s recognition and perceived value.

    • Prioritize the website’s experience to attract new renters.

    • Increase desire and positive perception by showcasing the property’s living potential.

    • Give prospects the information that they are seeking to make or promote further decision making to rent.

    • Make the website’s navigation experience simple and useful for both user groups.

    • Follow and adhere to fair housing best practices.

    • Make the website responsive and mobile-friendly for a smooth viewing experience.

    • Have the website further accommodate for accessibility by meeting WCAG targets.

    • Demonstrate value and relevancy for current clients by providing helpful links to internal access.

    • Make resident portal convenient to locate and access.

    • Provide maintenance link for current residents.

Design Process

Content strategy and considerations

The website is built to look like a single page with a seamless scrolling experience, but was still broken down by sections. Organizing them would help me and my developer stay on top of the page sequence what content needed live in that section. Because of this, my design process started with constructing a sitemap of the site’s navigational flow of when a user scrolls down. I used this structure to keep track of what information I needed to include in each section when sketching out my wireframes.

hero

  • welcome animation

  • logo

  • hero img

  • header + subheader

  • floor plan cta

floor plans

  • header + subheader

  • img + callout

  • seo copy

  • tabbed view

  • slider

  • floor plan cards*

  • property map*

gallery

  • header + subheader

  • seo copy

  • tabbed view

  • slider

  • residences imgs

  • community imgs

contact us

  • header + subheader

  • seo copy

  • contact form

intro

  • bg animation

  • img carousel

  • header + subheader

  • img + callout

  • seo copy

amenities

  • tabbed view

  • residence amenities

  • community amenities

neighborhood

  • header + subheader

  • local highlights

  • img carousel

  • map with poi

  • seo copy

residents

  • img + callout

  • seo copy

  • pay rent cta

  • maintenance link

Organizing page contents for Victory Place's website.
nav bar

  • logo

  • specials cta

  • apply now cta

  • property map

  • schedule tour link

  • virtual tour link

  • site navigation links

footer

  • property address

  • hours

  • email

  • phone number

  • logo

  • privacy link

  • blog link

  • LPC site link

  • fair housing logos

  • back to top push

*property map

  • third party API

*floor plan cards

  • unit name

  • unit type

  • sqft

  • pricing

  • bed / bath count

  • layout img

  • expand layout img

  • virtual tour link

  • apply now cta

  • view availability cta

Additional site components.

Wireframing

Once I had my structure and navigation outlined, I set out to visualize the contents within each page. My initial rounds were quicker variations of how I thought I wanted to structure the site. Lo-fi drafts were for easier conceptualization and the configuration of different layout options for the sections. I moved into applying more realistic content placeholders and visuals. These helped me gain accurate constructive feedback with my internal team about the layout and navigational clarity. Something I wanted to keep in mind during my designing was that each section had enough breathing space while being mindful of scroll fatigue.

A highlight of my wireframe progress for Victory Place.

This involved a few rounds of iterations to make sure everything tied in visually, was functional, and was achievable for development within the project’s scope. High fidelity screens were then created for a prototype that would be presented to LPC for their input and approval. After the client’s additional design requests and adjustments were resolved, I handed off these screens onto the development team to use as visual references, along with notations for how the site should look and behave.

Branding

During early stages of planning out the site’s content and structure, I also took on developing a more robust branding for Victory Place. While LPC had a logo, and a primary brand color, their visual identity was missing some other aspects that completed the property’s brand direction. My branding efforts included expanding on colors and updating typography. In addition, I incorporated more imagery that complimented the presence their building was expressing and resonated with their target audience.

Style guide for Victory Place's branding.

Sourcing stock images for this project also required some consideration since persons advertised in the photography should adhere to fair housing practices. I combined these artifacts together, to form components for development to implement. While forming these components, I composed sections that could be quickly reconfigured or repeated to reduce scope for development. The final steps of my design process was bringing everything into a single view while considering movement and interactive elements.

Full View of Website
Website Components

Subtle animations throughout the site

Victory Place’s website is designed to have subtle animations through out that guide users downward the site or add intrigue to each section’s contents while complementing an elevated brand feel. With the website’s continuous scrolling format, I wanted to design interactions that engage users on the website. These animations hopefully, brought some delight to the experience as well. In addition to the chevron rippling downward, other animated features include an auto looping carousel teasing the property, lines and texts fading in on the screen load, and hover effects on buttons and links.

Collapsible “read more” CTAs

Another micro-interaction includes strategically placed “read more” CTAs that expand and collapse additional content copy. As a designer in an agency that also specializes in SEO initiatives, there’s a content team usually provides detailed copy to boost website rankings. The “read more” CTA’s dropdown effect provides an intentional, interactive component that makes lengthy text more visibly manageable. This optimizes SEO without overwhelming the user visually. The “read more” links are placed where they can comfortably expand without disrupting other components.

Navigation bar

LPC requested to have several callout links prominently accessible to the user. I implemented a dual navbar with a slide out effect on larger screen sizes, as a solution to approach the extensive list of links available. The first navbar is more promotional, with CTAs and easy to reach areas for potential residents. The second navbar contains the website’s core navigation menu and slides behind the first bar when the user scrolls and is revealed again when they reverse scroll. For smaller screens, a hamburger menu folds out with a list of all the links. Since the site is one continuous scroll, this still gives users the option to move out of order to a specific section.

Floor plan cards

The floor plan section tends to be the most frequented page and where users spend the most time interacting with a property’s website. I prioritized this section during my designing, and opted for a card-based sliding view that fits comfortably within the viewport. Each card individually showcases that unit’s specific offerings. Users value viewing floor plan layouts when choosing an apartment and often compare multiple options. So designed the cards to empower the user to easily view multiple floor plans at glance.

In addition to a card view, the client also wanted to display a third party platform that maps the property’s units and amenities. I implemented a tabbed viewing solution that accommodates this API and minimizes scrolling fatigue. Toggling between both views caters to the user by giving them multiple user viewing preferences. The default "Cards" view prioritizes comparability, allowing users to easily juxtapose different unit options. And the third party API allows users to explore available units within preferred areas of a building.

Interactive map with point of interests

Understanding the surrounding area is crucial for potential renters. The neighborhood section incorporates an interactive map with points of interests to build engagement and show the surrounding location. 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 Victory Place’s value proposition.

Screens + Deliverables

  • Welcome animation screen

  • Hero screen

  • Intro screen

  • Floor plan screen

  • Amenities screen

  • Gallery screen

  • Neighborhood screen

  • Resident screen

  • Contact us screen

  • All mobile screens

  • Navigation bar variants

  • Style guide

Summary

This project reinforced the importance of designing for user needs. By empathizing with my created personas, I was able to design a website that showcased the apartment while empowering potential renters to explore their future home and community with more ease. Collaborating with dev ensured that the final product was both a pleasing and feasible design that reflected the property’s perks and offerings. Open communication, exploring creative solutions together and effectively articulating design choices through detailed documentation proved invaluable.

Securing stakeholder buy-in for design choices while working on Victory Place was crucial. Discussions often centered on balancing aesthetics with functionality and emphasizing this as a benefit for both the user’s and the business’ needs. By creating user-friendly, informative websites, LPC can attract and retain renters in a competitive market. Demonstrating how user-friendly interfaces contributed to elevated visuals helped bridge that appeal. I received positive feedback from internal teams and LPC for Victory Place’s final design and went on to take additional projects within LPC’s portfolio.

  • Along with Victory Place, working on various website concepts for property management groups and their luxury properties gave me a platform to hone my design skills. While each property offered distinct value propositions, user groups often overlapped and this allowed me to continue empathizing with a consistent user base. My work at LeaseLabs prioritized web and visual design but I had opportunities within projects to think and incorporate UX while gaining confidence with iterating and approaching projects with a solution oriented perspective.

    This was my first role in a full time design capacity and gaining industry experience as a designer. I learned a lot about designing, cross collaborating with teams, and presenting my design rationale both internally and externally. I’m fortunate to have worked with such an amazing manager and group of senior designers who encouraged my growth. My efforts as a designer at LeaseLabs will always be an experience that I value and look back on as I progress in my career journey.