User Needs and Goals
Stakeholder Interviews: Conducted interviews with the business team to understand how properties were currently being presented and what details mattered most to their users, including size, type, and location. These conversations informed the information hierarchy and filtering priorities for the map.
Competitive Research: Analyzed how similar enterprises surfaced property information, finding that filtering by city and property type and prioritizing size were standard expectations. This research also revealed that a direct CTA was a consistent pattern across competitors, which became critical when advocating for a property link that had been deprioritized. Previously users had to call a rep to take action, a friction point the CTA directly addressed.
User Types: Identified two distinct user types, existing advisors familiar with the portfolio and potential investors browsing for the first time. The interface needed to feel intuitive for both, balancing quick access to detail for advisors with a discoverable, low-friction experience for newcomers.
Interaction Design and UX
Core Features: The interface combined a full map view with a right-side property card list and top-level filters, allowing users to either filter by criteria or browse spatially. Cards were designed to surface the most critical property details, size, type, and location, in a scannable format with a direct CTA linking to each property page.
Interaction Design: Proposed and designed a dynamic card list that updates based on the visible map area, so users browsing Austin and Houston would automatically see only those properties reflected in the card list. Checkbox filtering was a planned future enhancement, and this interaction served as a workaround in the meantime, making the map itself an active filtering tool without requiring additional development lift.
Compliance and Content: Property details including address, square footage, and type were required inclusions per business and compliance guidelines, integrated naturally into the card layout to support both regulatory needs and user decision making.
Visual Design and Map Styling
Consistency and Brand Alignment: Aligned map design with card visuals from the external design firm. Used the company’s core color for contrast with the predominantly white website, highlighting the map as a standout feature.
Loading Times: Improved load times by streamlining the map, reducing landmarks and labels, and optimizing card image sizes. Ensured fast loading of the initial screen, with subsequent cards loading out of view.
Scalability: Designed the map to be scalable with city labels and the capability to add more cards. Updated filters to accommodate new property information.
Resource Management: Integrated the map with the company’s property data list, updated through the backend to enhance resource management and efficiency.
Technical Handoff and Constraints
Feasibility: Leveraged Google API integration to save development time and reallocate resources towards card and filter development, making the project feasible within the proposed budget.
Integration: Implemented a new navigation tab for the map, featuring its own page and a CTA on the homepage.
Compliance: Included essential property details such as address, square footage, and type to ensure compliance.
Design Specifications: Created detailed design specifications in a Sketch file for developers, including card designs and filters. Used Google API to generate HTML for color scheme and map layer visibility, based on user and business needs.
Style Guides: Ensured that the map’s typeface, icons, and color scheme align with the company’s design library while integrating visual directions from the external design firm.
Visual Design and Map Styling
Brand Alignment: Worked within a visual direction provided by an external design firm, adapting it to fit the map context while maintaining consistency with the broader site aesthetic.
Map Styling: Went directly into the Google Maps API to style the map to match the visual direction, customizing land, road, and water colors and controlling layer visibility. Exported the resulting HTML and handed it off to the developer, reducing back and forth and ensuring the map matched the design intent precisely.
Performance and Simplification: To improve load times, analyzed the map configuration and presented options for reducing visual complexity, identifying which landmarks and labels could be removed while keeping the map recognizable and functional. My recommendation was adopted, resulting in a cleaner map and faster initial load without sacrificing usability.
Scalability: Designed the map and filter structure to accommodate future property additions and new location data, keeping the experience maintainable as the portfolio grew.
Technical Handoff and Constraints
Design Specifications: Delivered detailed design specs to the development team via Sketch, covering card layouts, filter designs, and interaction states. Designed dropdown filters for a more polished filtering experience, though native browser filters were implemented in the MVP due to development constraints.
Navigation and Discoverability: Advocated for and designed a homepage CTA to drive traffic to the map, complementing the new navigation tab. Given that this was a net new feature, surfacing it proactively was important for adoption.
