HASSALO ON EIGHTH WEBSITE UI/UX DESIGN

Project Overview

Client: Hassalo on Eighth

Tools: Adobe Illustrator, Photoshop, Figma
Focus Areas: UI/UX Design, Brand Identity

Hassalo on Eighth is a 3 building superblock in the heart of Portland, OR, making a name for itself due to the innovative, sustainable solutions made at its launch in 2015. Now, ten years later, the investment in infrastructure built for sustainability and climate change have garnered the community a coveted reputation. The website currently is functionally sound and efficient, and the web designers are talented in their backend knowledge but the UI and flow is not working best to get new leads. To pitch a new web design there must be presentations to stakeholders, budget approvals and a large collaboration in UI/UX design overall.

The Challenge

Portland, OR is growing by the day and rental properties are clawing their way to staying relevant as new development and demographics changes the landscape. The website is the gateway to new leads and ultimately new renters. The site’s functionality and visual design are the first impressions of the property, so ensuring the most eye-catching media, clear flow and easy access are key to converting leads. Not only does the current site have design hiccups but there’s not a clear flow that can best showcase Hassalo’s amenities and Green initiatives. Finally, a common critique from previous renters about the website is that there is confusion about the size and scope of Hassalo’s property. Hassalo on Eighth is an umbrella title for the three different buildings that make up this urban superblock. Each building has different amenities, features and branding. An aerial visual representation of the scope of Hassalo on Eighth would be a huge asset in a new renter’s online experience, understanding where the three buildings stand, and what direction each unit faces. Lastly, there is no clear CTA on the homepage, with the ‘Lease Now’ button tucked into the main menu and out of sight.

Desktop wireframe

Key Issues Identified:

  • User flow is confusing

  • Visual design and UI does not adhere to brand guides, and clashes with photographs and media

  • No clear CTA’s on homepage

  • Distinction of three buildings on superblock 

The Strategy

Before sketching out wireframes, the first step to a new website is approval and funding. Starting with user research and studying competitor’s websites for inspiration and standards across the rental market. After approval, allocation of budget funds will be used to understand how much investment will go toward things like an interactive building map. Hiring photographers and aerial drone videographers to capture the property features will be crucial. From there, visual design and updated media will be utilized to start unveiling the vision, and user flow will be edited to the final product.


1  PITCH + APPROVAL 

  • Design Pitch Deck for website presentation to stakeholders 

  • User research: understand the apartment-seeking process from the renter’s POV

  • Research competitors: Draft website comparisons for similar properties in the area

2  NEW MEDIA

  • Hire Photographer+drone videographer for updated property photos/videos

  • Plan design layout based on photographs being the focal point

3  UI DESIGN  

  • Create wireframes for both desktop and mobile

  • Design mockups of new pages

  • Incorporate brand assets from original brand guidelines

  • Finalize page layout and official mockups with high fidelity wireframes

4  UX DESIGN

  • Wireframes for user flow

  • CTA’s in appropriate page placement

  • Clear menu and page navigation 

  • Efficient user experience in site search

Example layout of the Floorplans and Aster Tower pages

Mobile site menu map

Full desktop page layout

The Execution

To successfully re-design the layout and look of Hassalo’s website, there must be collaboration with the backend UX designers on compatibility and realistic changes. For instance: between the cost quote and trouble getting original SVG files from the building’s architects, we decided to scrap the interactive map. These details are common at this phase but create quick adaptation and problem solving.

1  WIREFRAMES+MOCK-UPS

  • Translate wireframes into high fidelity mock-ups of each page

  • Edit and solve any defects in user flow  

  • Establish full page view of desktop and mobile

2  MEDIA

  • Edit and finalize all photos for website

  • Correctly label and add image descriptions 

  • Test video 

  • Ensure mobile compatibility 

3  UI/UX DESIGN

  • Establish all brand assets are correct and placed as planned

  • Check media layout and make changes as needed

  • Refresh website copy

  • Finalize user flow and test 

The Impact

Transforming Hassalo’s website into a modern, clean template where it is easy to show off the beauty of the neighborhood but is also user friendly to give that great first impression, especially with all the moving parts that go into changing homes- the ease of the site’s navigation is meant to support the ease of the rental and move-in process. Not only will a better website ensure more leads and renters, it will elevate the process of those already residing at Hassalo with things like seamless online rental payments and contact pages. Creating a digital space that reflects the stunning landscaping of Hassalo’s Courtyards and Community oriented infrastructure will further the stellar reputation already in place as Portland’s leading sustainable property. 

Key Takeaways

  • A beautiful layout that cleanly displays Hassalo’s urban brand style and community

  • Stand out as a legacy for sustainable living in Portland

  • Produce more leads with user-friendly interaction and a clear vision of the neighborhood

  • Increase long-lasting profits by establishing a Green-Urban legacy