User Needs and Goals
User Research: Conducted detailed interviews with the company's business team to understand current property presentations, including square footage, type (residential/commercial/multifamily), and location. Competitor analysis revealed similar functionalities were lacking on their sites, giving our company a competitive edge. Explored Google Maps API and best practices for location-based services to ensure optimal map functionality.
User Personas: Categorized users into 'known' (advisors) and 'potential' (individual investors) based on insights from the company’s clients and advisors. Designed a balanced interface with intuitive features for 'known' users and a forward-thinking design to appeal to 'potential' users.
User Stories: Identified key user stories such as comparing properties, seeking detailed property information, and investigating recommended properties. Implemented advanced filtering options and a map interface to refine results by approximate city.
Functionality and User Experience
Core Features: Integrated Google Maps API with a list of property cards displayed on the right side.
Interactive Elements: Incorporated interactive filters at the top, property cards on the right, and the map itself. Enabled users to filter offerings based on various criteria or browse effortlessly.
Feedback Mechanisms: Encouraged business partners to provide feedback based on user interactions. Planned to analyze user data over the next year and reassess with the business and advisors to evaluate the map's impact on their processes, despite currently low mobile user numbers.
Best Practices: Adhered to industry-standard map functionalities while aligning with business and compliance requirements. Property cards feature functionalities from Google and Apple Maps, allowing zoom in/out and dynamic updates based on visible properties. Integrated filters and property cards to support various user skill levels and enhance overall accessibility.
Mobile Responsiveness: Designed the MVP version to be responsive, with cards loading beneath the map. Future updates will include an adaptive map design, although mobile user numbers are currently low.
Technical Constraints and Documentation
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.
Technical Constraints and Documentation
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.