New look and feel for Moors Edge

After 11 years with a dated "artistic" identity (yes, I did design it) it was time for a new look. Times have changed, circumstances have changed, and the space had changed. Why not change the identity and the website? Oh, and let's add an app.

Laptop browser window showing the Moors Edge home page. There is an iPhone next to it with the home screen of the Moors Edge app.

Overview

The project took two months from taking the pictures and initial video to developing the website and app.

Tools Used

  • Webflow
  • Glide
  • Finsweet's Client-First
  • Finsweet's Attributes
  • Google Sheets
  • Integromat

Introduction

When I designed the identity and built the first site there were 3 units used mainly as vacation rentals, a recovering economy, beautiful weather, and a feeling of the artistic colony Provincetown was once known for. Since then opportunities presented themselves to sell two of the units, renovate the last unit, and spend more time enjoying the fruits of labor. The client loves spending time in Provincetown and would like to enjoy the space he and his partner have created. The website is going to be a place for regular renters to keep up with what is happening in the town as well as cultivating new renters to fill in what is not normally booked.

Research

Using the client's 11 years of experience, along with my 12 years of experience hosting on Airbnb we've become familiar with what guests are looking for both in a tourist area and a not so touristy area. Based on that we expended the information about the unit along with new pictures to give a fuller image of what the place is like. Even though guests look up the standard resources of food and activities they sometimes ask for our personal recommendations for things to experience. To facilitate that we've added an app to the experience. The app will act as a local recommendations gudie and house manual.

Personas & User Study

Design Guidelines

This is the old logo:

The old logo for Moors Edge. It's somewhat of a watercolorish logo. The words are on top of a representation of the moors with water, dunes and grass.

The old logo for Moors Edge is somewhat watercolorish. The words are on top of a representation of the moors with water, dunes and grass.

Here is the new logo:

The new Moors Edge logo. On top of the words is a tuft of grass making the logo much simpler.

The new Moors Edge logo only has a tuft of grass on top of the words for a simpler representation of the moors.

Development

The existing site was in Squarespace. I decided to create the new site on Webflow using Finsweet's Client-First wireframing kit 2. This is basically a 2-page site so I did the wireframing directly in the new site.

The Webflow designer with the wireframe for the Moors Edge site.

Next was to decide which of the hundres of pictures that I took to put in the project.

The Webflow designer with tatic content added to the Moors Edge website.

Then setting up the CMS for the recommendations.

The CMS collection settings insite the Webflow designer

Designing the recommendations section to present the optimal amount of information needed for someone to make a decision. We'll be tracking this to see what people use and if they are looking for more.

The Recommendations section being designed in the Webflow designer

Then it was a matter of adding the Finsweet's attributes to be able to filter the recommendations.

In the designer the Custom Attributes section in the settings is highlighted to show attributed being added for sorting.

Webflow provides several tools for improved accessibility. One is a panel that tracks certain technical aspects of the project. The second is an accessibility checklist that you can go through.

The accessibility audit panel is highlighted along with a new feature to make keyboard navigation easier.

This includes making sure the pop-out modal is keyboard accessible.

The Custom Attributes section in the designer is highlighted to show added attributes for keyboard navigation.

Can't forget about technical SEO.

Showing the page settings in the designer with Schema markup for SEO.
Showing the page settings with areas for meta title, description, and open graph image.

Time to add the Glide app. This uses Google sheets as the database. The host can add recommendations and house manual entries to it. There is a Make (formarly Integromat) workflow that looks for new or updated information to then send to the Webflow site. The guest can use the app to find host recommendations and to review the house manual. No more outdated or dirty paper manuals!

The Glide apps designer showing the Moors Edge app.

Final Product

Key Takeaways

Results

For the site, the Lighthouse scan is nearly perfect.

Lighthouse scan results for the website. 100 for performance, 98 for accessibility.
View the Moors Edge Website