hi
Work About Resume Contact
← Back

Island Property

Duration: July - December, 2021

Research / Design / Testing / Branding / Graphic Design

Working with Island Property to bring a fresh, modern look to their website and brand.

The Challenge

When I was contacted to create Island Property's new website, I was tasked with bringing their current website from 1998 into the present. Early on in the project, I felt that my lack of previous experience working on real estate/vacation rental websites would be a significant challenge. However, I eventually realized my reasoning was wrong and that this project would take the same design thinking as others. I took a very generalized role for this project by designing and developing the new website. The project called for me to conduct research, design, develop, and test the website while also creating branding guidelines with a design system. I knew the biggest challenge would be to rethink the previous design and impress with the new. The user flow of Island Property's previous website was clear and accessible from all pages, but the UI was stuck in the 90s and didn't fully represent their brand identity. Its austere style caused various interaction issues and the site wasn't responsive. Therefore, it was necessary for the site to be built from the ground up. In fact, the Island Property logo was the only thing that carried over from the original site.


The Design

Early Design Research

After taking on the project, I began searching for design inspiration from various, modern architectural and real estate websites. This resulted in a moodboard of elements that formed the modern and aesthetically pleasing design I aimed to create. The use of white space and margins were consistent across the sites I studied. This use of an uncluttered, airy design replicates the appearance of a luxury magazine, enticing people to open and read. It was the same bold, inviting style I wanted to introduce to the new Island Property website. Initial Design Sketches


Initial Design Sketches
Design Sketches

Once I determined the new website's design style, I conveyed my vision into a paper mockup and showed how it would translate between desktop and mobile screen sizes. After sketching for a short time, I had a few examples of my vision. The modernist design style seemed to already be presenting itself.


Establishing a Design System
Design System

Using Figma, I established a design system for Island Property's site with inspiration from my moodboard. The border radius of buttons, hover states, font styles and sizes, and color scheme were all defined in this simple design system. This crucial design step certainly paid off throughout the development of the site.


Building a Prioritization Framework
Prioritization Framework

I used the MoSCoW (Must, Should, Could, Won't have) method to identify the priority levels of different features. For example, a major 'Must' was listing weekly availability for all rental properties. A 'Won't' was implementing an online booking feature, as my client enjoyed the personable aspect of taking bookings over the phone.


Implementation of Design Choices
Implementing the Design Choices

Using Wix's EditorX development platform, I began building the new site's numerous pages, while constantly referencing the design system to maintain consistency. I implemented large header images, staggered image and description sections, column sections call to action buttons, and more. After a few months of iterating and several minor design changes, the new Island Property website finally achieved the modern and luxurious aesthetic I strived to create. Every element, from rounded borders, to font styles, to image placement was complementary to each other, forming the site's spacious and inviting appeal.


Accessibility

Accessibility is crucial in creating a site that's built for everyone. Clearly defined sections through hierarchy, alternative text for images, and concise, predictable navigation are the first accessibility features I implemented.

Accessibility

I followed the Gestalt Principles when developing the property listings. For example, on the three listing pages (Home, Land, Vacation Rentals) all elements of a listing are grouped in close proximity, so through pre-attentive processing users can perceive the various elements as being for a single listing. I also gave header images rough borders, while all other images on the site have rounded borders. Therefore, through unconscious design a user can decern header images from other images. The combination of these design choices enables users with varying abilities to use the site effortlessly.


Responsive Design

In research, it was hard to determine what screen size the site would be viewed on most frequently, so I began designing desktop down to mobile. This allowed me to design everything needed, so when I reached mobile, I rearranged the elements.


The Result

At the completion of Island Property's fresh, modern website I had learned to effectively communicate my design choices with clients and gained experience designing and developing a real estate and vacation rental website. The now live website has truly set a new standard for design in the real estate and vacation rental industry in Maine, as many other websites are very dated and in need of a refresh.


Thanks for reading! To explore my other work, check out my website and view my designs on Bēhance and Dribbble. To read more of my articles, see my Dev.to and of course Medium profiles.


Skills
Front-End Development:
- Html
- CSS
- JS
- Laravel
- Experience using Squarespace, Shopify, and Wix Editor
- Responsive Web Design
- Rapid Bug Fixes

UX Design:
- Research
- Writing
- Wireframing
- Design
- Prototyping
- User Centered Research, Design, Testing
- Experience using Figma & Adobe Xd

Marketing:
- Social Ad Campaigns
- Mailchimp Campaigns
- Photography
- Graphic Designs

Other:
- Music Producing / Songwriting
- Digital Photography & Cinematography
- Digital Designs For CNC Machines
- Hardcore Tennis Player
Experience
Island Property:
Website Designer and Developer
Freelance / July - December 2021

Tasked with designing and developing a modern, minimalistic website for Island Property, a real estate and vacation rental agency serving Islesboro, Maine. Using Wix’s advanced editor and database management tools, I iterated on vdesigning the user interface, researching, and developing the website keeping usability in mind.

- Product Design
- Web Development and Maintenance Using Wix Advanced Editor Platform

Custom Quality Covers:
Customer Experience and Marketing, Intern
Part-Time / 2020 - Present

Selected to lead the sales marketing & customer experience (CX) for CQC, utilizing and increasing my knowledge of Mailchimp email campaigns and website development/maintenance with Shopify and Squarespace sites and DNS and CDN management. Enhanced their online presence by scaling social media presence and conducting SEO keyword research by analyzing the target audience.

- Mailchimp Email Ad Campaigns
- Web Development and Maintenance with Shopify and Squarespace
- Social Media Ad Campaigns
- Digital Designs For CNC Machines

Raleigh Golf Carts:
Developer & Marketing Intern
Part-Time / Dec 2020 - Apr 2021

Designed & developed a modern, user focused website while using graphic design skills to create high quality advertisements used in various marketing campaigns across their social media profiles.

- Social Media Ad Campaigns
- Web Design & Development
- Photography & Graphic Design
Education/Certifications

Google - UX Design Specialization Certification

Google Digital Garage - Fundamentals of Digital Marketing

HubSpot - Content Marketing

Goldsmith's, University of London - Mathematics for Computer Science

Harvard CS50 - Introduction to Computer Science


Achievements

Daily UI 100 Day Design Challenge

Hacktoberfest 2021 PR Challenge

Hacktoberfest 2020 PR Challenge




This site is powered by pure HTML, CSS & JS.