Enhancing Navigation and User Experience for a REIT Website
Pier 4 REIT
Overview
My Role
UX Designer
UX Writer
Video Editor
Microsoft Office
Adobe Photoshop
Adobe Premiere Pro
Tools
Figma
4 months
Timeframe
My Team
2 UX designers
1 Software Developer
The Challenge
Pier 4 needed a website that offered smooth navigation and clearly introduced the company, outlined their services, and served as a central platform for their diverse clientele—investors, advisors, and renters. Without this, users often struggled to find the information they needed, resulting in frustration.
The Outcome
To address Pier 4's navigation challenges, we created a parent website tailored to the needs of its diverse clientele. As the UX/UI designer and content writer, I focused on developing a user-friendly navigation and a comprehensive information architecture. This improved Pier 4’s online viewership by 40% and helped increase overall investments by 26% in 2023.
Understanding Pier 4’s needs
Our project began with a series of meetings with Pier 4 to understand their business goals and structure. These discussions were crucial for shaping the website's framework.
Pier 4 is the parent company of Pier 4 REIT, Pier 4 Residential, and Pier 4 Capital. While each company had its own website, there was a lack of unification and branding to clearly indicate they were all part of the same operating company, Pier 4.
These conversations provided a clear understanding of Pier 4's preferences and constraints, particularly regarding strict guidelines on public information in the real estate sector.
Structure & Guidelines
Understanding Pier 4’s structure was essential to the project, as it helped pinpoint what each user group would need to access on the website.
The stakeholders of Pier 4 provided important REIT industry guidelines to include in the design:
Focus on attracting advisors, while considering investors as users.
Potential to expand on projects and add reports, such as ESG and financial reports.
Include overall financial performance of the company.
Include detailed acquisitions portfolio.
What are their competitors doing?
I then moved on to a competitive analysis by researching the website designs and structures of Pier 4's real estate competitors. My goal was to gain a clear understanding of corporate color schemes, design attributes, and structures to ensure our design fit industry standards.
Website Mapping
Next, I mapped out the website's information architecture (IA) in a tree format. This helped visualize the different pages and user flows, ensuring an intuitive navigation structure that catered to Pier 4's diverse clientele. I was also responsible for writing the content for each of these pages.
Wireframing
Content Flow Diagram: Began with a clear structure for website navigation, refining it through multiple iterations to ensure smooth information flow.
Low-Fidelity Design: Created initial wireframes focused on translating the navigation into a visual layout.
Mid-Fidelity Design: Incorporated design elements and branding fonts. Added unique features like square-shaped elements to enhance branding. Some images and content were still pending final approval.
High-Fidelity Design: Finalized the design, integrating edited video, included all approved content, and prepared it for developer handoff.
Content Flow
Low Fi
Mid Fi
High Fi
Video Editing
Once Pier 4 approved the mid-fidelity prototypes, we moved to high-fidelity. A challenge arose when the client requested a Hero section background video without providing footage. I quickly created a background video using stock clips in PremierePro, ensuring it aligned with the website's design.
Responsive Design
I adapted the Pier 4 website for mobile, ensuring a seamless experience across all devices. By prioritizing essential content and simplifying navigation, I maintained brand consistency while optimizing for touch interactions. The final design offers a smooth, intuitive experience on mobile, keeping the user journey clear and accessible.
Key Learnings
Adapting to Industry Constraints -This project taught me how to design within the strict regulatory guidelines of the real estate sector, particularly regarding public information. It required a careful balance between transparency and compliance.
Agile Collaboration with Developers - Working closely with the development team in an agile environment, I learned to adjust my designs to fit both the client’s needs and the technical limitations, ensuring the final product was both functional and realistic.
