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.
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 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 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.
Next was to decide which of the hundreds of pictures that I took to put in the project.
Then setting up the CMS for the recommendations.
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.
Then it was a matter of adding the Finsweet's attributes to be able to filter the recommendations.
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.
This includes making sure the pop-out modal is keyboard accessible.
Can't forget about technical SEO.
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!
Final Product
Key Takeaways
Results
For the site, the Lighthouse scan is nearly perfect.