CityLife Estate is a user-centered real estate platform developed as a team project for COMP 3020 - Human-Computer Interaction 1. Our application provides a seamless experience for users to search, save, compare, and list properties in the real estate market. Focusing on intuitive design and user experience, we've created an interactive platform that addresses the needs of various user groups in the real estate ecosystem.
This project was developed by a collaborative team of students at the University of Manitoba for the COMP 3020 course. We applied principles of human-computer interaction to create a platform that prioritizes usability, accessibility, and user satisfaction.
- Property Search: Intuitive search functionality with filters for bedrooms, bathrooms, price range, and more
- Interactive Map View: Visual property browsing through map interface
- Save & Compare: Save favorite properties and compare them side by side
- Detailed Property View: Comprehensive property information including images, specifications, and contact details
- Property Listing: Simple form to add property details, images, and specifications
- Realtor Connection: Connect with suggested realtors to help sell your property
- User Profiles: Customizable profiles with preferences and saved searches
- Responsive Design: Optimized experience across different devices
- Breadcrumb Navigation: Clear navigation path to improve user orientation
Our development followed the User-Centered Design process taught in COMP 3020:
- Identified primary user groups (buyers, sellers, realtors)
- Collected requirements through user interviews and market analysis
- Created user personas and scenarios to guide design decisions
- Developed low-fidelity wireframes to test layout and information architecture
- Created high-fidelity prototypes with visual design elements
- Applied Gestalt principles for visual grouping and pattern recognition
- Implemented consistent navigation patterns across the application
- Developed using HTML, CSS, and JavaScript
- Created modular components for reusability
- Implemented responsive design for various screen sizes
- Used the MVC (Model-View-Controller) pattern for code organization
- Conducted usability testing with representative users
- Gathered feedback on navigation, search functionality, and overall experience
- Iterated on design based on user feedback
- Applied heuristic evaluation using Nielsen's usability principles
We incorporated universal design principles to ensure the platform is accessible to diverse users:
- Clear visual hierarchy and readable typography
- Consistent navigation patterns throughout the application
- Descriptive icons paired with text labels
- Alternative text for images
- Keyboard-navigable interface elements
- Clone the repository to your local machine
- Open
index.htmlin Google Chrome for optimal experience - Explore the various features of the application
- HTML5 for structure
- CSS3 for styling and responsive design
- JavaScript for interactive elements
- jQuery for DOM manipulation
- Font Awesome for icons
- Google Fonts for typography
Through this project, we applied several key HCI concepts:
- User-centered design methodology
- Usability and user experience goals
- Task analysis and user requirements gathering
- Prototyping techniques
- Visual design principles
- Navigation and information architecture
- Usability evaluation methods
- Integration with real estate databases for live property listings
- Advanced search algorithms for better property matching
- User authentication and secure profiles
- Responsive mobile application
- Accessibility improvements for users with disabilities
- Integration with virtual tour technology
This project demonstrates our understanding and application of Human-Computer Interaction principles in creating an interactive system that meets user needs while providing an enjoyable experience.