Island Property
Lead Web Designer & Developer, Jul 2021 - Present. Designed and developed a modern, minimalistic website for Island Property, a real estate and vacation rental agency on Islesboro, Maine. Used Wix’s EditorX and database management tools to design and develop a user-centered interface.
The Challenge
When initially approached to revamp Island Property's dated website, the task seemed daunting due to my inexperience in the real estate and vacation rental tech space. However, I soon realized that the project demanded the same design thinking and development process I had previously applied elsewhere. My role encompassed comprehensive responsibilities, including research, design, development, usability testing, and the creation of branding guidelines featuring a robust design system. The primary challenge was to reimagine the outdated design and present a fresh identity. While the previous website maintained a clear and accessible user flow, its user interface was trapped in the 90s and failed to capture the brand's essence. This austere style led to various interaction issues, and the site lacked responsiveness, necessitating a ground-up rebuild. Remarkably, the Island Property logo was the sole element retained from the original site.
Early Design Research
Embarking on the project, I drew inspiration from modern architectural and real estate websites, creating a mood board that laid the foundation for a sleek and visually appealing design. The use of white space and generous margins, consistent across these sites, mirrored the aesthetics of a luxury magazine, inviting visitors to explore. I aimed to introduce this bold, welcoming style to the new Island Property website.
Initial Design Steps
Translating my vision from the mood board into reality, I crafted paper mockups illustrating how the design would adapt to both desktop and mobile screens. These initial sketches revealed the emergence of the modernist design style.
Utilizing Figma, I established a comprehensive design system, informed by my mood board. This system meticulously defined elements like button border radii, hover states, font styles and sizes, and the color palette. This foundational design step proved invaluable throughout the site's development.
Employing the MoSCoW (Must, Should, Could, Won't have) method, I prioritized different features of the site. For instance, it was essential to display weekly availability for all rental properties ("Must"), while implementing an online booking feature was not pursued, as the client preferred personal bookings over the phone ("Won't").
Implementation of Design Choices
Using Wix's EditorX platform, I meticulously constructed numerous pages, adhering to the design system for consistency. Elements such as prominent header images, staggered image and description sections, column layouts, and compelling calls to action were integrated.
After months of iteration and minor design refinements, the new Island Property website finally achieved the modern, luxurious aesthetic I aspired to create. Every detail, from rounded borders to font styles and image placement, synergized to create a spacious and inviting user experience.
Accessibility
Accessibility remained a paramount concern. I ensured clarity through hierarchical sectioning, provided alternative text for images, and implemented concise and predictable navigation. Additionally, I applied Gestalt Principles to property listings, grouping all elements closely for intuitive perception. Header images were deliberately distinguished with rough borders, while other images featured rounded borders. These thoughtful design choices ensured that users with diverse abilities could navigate the site with ease.
Responsive Design
Given the uncertainty of the primary screen size for site access, I adopted a "desktop-down-to-mobile" approach in my design process. This strategic approach allowed me to cater to various screen sizes effectively.
The Result
With the completion of Island Property's revamped website, I not only honed my ability to articulate design decisions to clients but also garnered invaluable experience in real estate and vacation rental web design. The live website has set a new standard for the many other dated websites related to Islesboro, as this site redefined design expectations in an arena where many websites are long overdue for a modern facelift.
Made with ❤️ by Matthew Marquise. Built with HTML, CSS, & JS.