Columbia Heights
Identity & UI design for Agency FIFTY3
Project Overview
Columbia Heights is an all-age community in Troutdale, Oregon, offering the best in manufactured homes. They came to Agency FIFTY3 in need of personal branding and a responsive community website.
Located on a bluff overlooking the Columbia Gorge, the community is just outside of Portland. Their targeted renters vary in age and demographic, but they are most likely outdoor enthusiasts. The inspiration for their brand originated from their scenic setting and proximity to national landmarks and hiking trails, which set them apart from their competitors.
Once my proposed identity design was approved, I carried it through the photo discovery and responsive website.
The Problem
Individuals looking for housing fail to consider Columbia Heights due to a non-existent website and brand identity
The Goal
Design a brand identity and responsive website that converts
My Responsibilities
Research, identity design, photography discovery, UI design
Project Timeframe
April 2021 – August 2021 (website is currently in development)
Identity Design
Research | Concepts | Brand Identity | Photography Discovery
Research
Their competitive audit guided me through the entire project, especially when I started their UI design later on. By comparing Columbia Heights to nearby competitors within the housing market, I found it was best to design their brand around their scenic setting, which is truly unique to them.
Concepts
By basing concepts on the community’s location in Oregon and the client’s recommended branding words: trusted, friendly, relaxing, charming, original, scenic, I came up with two unique directions. They went through three rounds of internal critiques with the design team before sending them off to the client.
The two initial concepts and their final versions are below.
Client Feedback
The client thought the second option represented the community’s new desired presence. However, they wanted to create a new illustration that more broadly represents the entire state of Oregon, rather than the proposed stylized illustration of Multnomah Falls, the most visited recreation site in the Pacific Northwest just east of Troutdale. They also preferred the serif typeface in the first option.
After additional research, I decided to illustrate Mt. Hood, the highest point in Oregon. I selected a slab-serif typeface that resembled the serif typeface in option 01, but better compliments the new mountain illustration.
Brand Identity
This concept illustrates an iconic part of Oregon’s natural landscape, Mt. Hood. However, it remains site-specific to Columbia Heights since the community resides on a bluff with incredible mountain views. The mountain illustration represents the narrowing valley and lake from the mountain views of Columbia Heights.
An overview of the approved brand identity is below.
Photography Discovery
The next task was to curate a collection of stock photography that best represents Columbia Heights. It was essential to find photos that align with the community’s brand words, are cohesive, and, most importantly, reflect diversity.
I spent time researching Troutdale to make sure the photos closely depict the environment around the community, such as the correct type of foliage found in the Pacific Northwest.
UI Design
Research | Low-Fidelity Prototype | High-Fidelity Prototype
Research
Since Agency FIFTY3 specializes in real estate, and the goal here is to design a website that converts, I approached the UI design with a few things in mind from a study conducted by Google and Apartments.com revolving around trends of apartment renters.
To understand the user, it’s necessary to think about what renters actually want and expect from an apartment community’s website.
Based on the study, users have four specific needs:
Searchabilty
According to Google’s study, 72% of participants immediately jump online to search for an apartment, and about two-thirds of respondents rented an apartment that they found online. With this in mind, it’s crucial that a community site offers real-time data in an easy and accessible manner. The site should be kept up to date and easily accessible.
Media
Users have come to expect engaging visual content within a community site. Having a visually pleasing site with quality photography increases the likelihood of users sharing listings, which increases traffic. The site should contain high-quality photography and videos, if applicable.
Reviews
8 in 10 participants consider reviews the most important factor when searching for an apartment. Embedding a community’s social media and search engine reviews directly on the site give users verified opinions of current tenants and greatly helps influence their decision. Testimonials should be embedded and placed throughout the site.
Mobile
Google’s study found that nearly all participants use a smartphone when searching for apartments. From an SEO perspective, Google will tank your search ranking if a community fails to provide a mobile version of their site. With this in mind, the site must be responsive and easily accessible on mobile devices.
Low-Fidelity Prototype (Desktop)
To stay consistent with the typical layout of real estate community websites and to incorporate the four user needs from above, I created ten pages that display all of the necessary information.
01 Home, 02 Available Homes, 03 Amenities, 04 Gallery, 05 Location, 06 Specials, 07 FAQ, 08 Contact, 09 Error, 10 Thank You
High-Fidelity Prototype (Desktop)
The low-fidelity mockup revisions were based on design and client feedback. The most significant change, separating the “Featured Homes” and “Want to Learn More” sections on the Home and Available Home pages, made them easier to navigate. Among a few other minor changes, some of the photo placements were adjusted to compliment the final copy.
Moving Forward
Key Takeaways | Next Steps
Key Takeaways
Impact
The site is currently in development. However, since it’s designed around research, a competitive audit, and the four user needs: searchability, media, reviews, and mobile, it’s expected to lead to conversions.
What I Learned
Checking in with the copywriter before designing the low-fidelity mockups gave me a better understanding of how much copy each page contained. As a result, layouts complimented most of the copy from the start, which saved time overall.
Next Steps
- The client is providing images taken on-site. I would take those and edit them accordingly to fit the layout and style of the overall site.
- Before the site is ready to launch, I would make sure to address any new client / design revisions.
- Once the site has been live for some time, I would get the statistics and make any further changes to better the user experience.
