Design & Web Development
Manoir de l'Aumônerie
BRAND DESIGNER, GRAPHIC DESIGNER, WEB DESIGNER, WEB DEVELOPER •
FIGMA, WIX.COM, AMENITIZ (HOTEL PMS) •
PROJECT DETAILS
TOOLS
Figma, Google Suite, Whimsical, Notion, Useberry, Wix.com, Amenitiz
REMOTE PROCESS
Everything was done remotely between Jovi and the other stakeholders (company owner & interviewees). We used almost constant zoom sessions but also, Trello for project management, Google Suite for research, Useberry for testing, and Whimsical and Figma for prototyping our solution and Wix.com for web development.
For this project, we used the design thinking methodology.
OVERVIEW
The Manoir de l’Aumônerie is an historical monument. 800 years of history in its stones. They started a huge restoration of the place in 2018. It is a private house but open to visitors. They have four main activities: rental of cottages, private or professional events (parties/seminars), public events (craft market, medieval weekend, Christmas concerts…), and tourist visits.
The challenge is to re-design a new version of Manoir de L’Aumônerie’s commercial website (especially the English version) more fluid and easy to use. They would like to have a very clear interface for their web visitors that could be interested in their activities to participate in the restoration of the place.
DESIGN PROCESS OVERVIEW
1- EMPATHIZE: Survey & Interviews, Competitors Analysis, User Pain Point, User Persona
2- DEFINE: User Journey Map, HMW Statement, Problems & Hypothesis
3- IDEATE: Site Map, User Flow, Moodboard, Style tyle
4- PROTOTYPE: Logo Design, Design System, Mid-fi prototypes
5- TEST: Testing results, Iteration & Implementation, High-fi prototype, Next steps
.jpg)
CHALLENGE
Manoir de L’Aumonerie has three main objectives: Renting cottages, Events(public & private) &Tours. Renting cottages is the main source of income and the main goal for the stakeholder is to make sure people can access the information about renting cottages clearly.
I had to make sure that the correct audience was indeed the one mentioned by the stakeholder and, from a deep analysis, it come out that the main clients are families and couples.
As the Manoir is a historical building that has been recently restored by the Owner, each income helps towards the Monument renovation and it was very important to show the possibility of donating something toward the maintenance costs of it.
01. EMPATHIZE
Our main research goal here is to understand the needs and motivations of their target audience and how they react to their current website.
-
Survey and Interviews
-
Competitors Analysis
-
User Pain Points
-
User Persona
SURVEY RESULTS
We first conducted a survey targeting their first audience: middle-aged couples with kids looking for a peaceful place to spend a few days vacation. We emphasized our survey on how they react to the Manoir de l’Aumônerie’s current website. The main outcomes of the survey were:
-
63% think the website looks old-school
-
26% think the website doesn’t look professional
-
63% don’t find the booking process fluid and straightforward
-
42% don’t understand clearly what is their offer from the homepage
-
60% don’t like the colors of the website
-
75% don’t think the pricing is clear when booking
-
80% don’t buy souvenirs online
INTERVIEWS
For more qualitative data, we decided to interview people from their target audience as well, here are the outcomes of the different interviews:
-
Description of what she would like to see from going to a historical building for vacation↳ comfort, intrigue, a sense of luxury (depending on holiday), culture specifics, a welcoming and inviting feeling; something cozy for winter and airy and bright for summer; a child-friendly place with activities for kids; at the same time a relaxing moment but also a special experience.
-
Booking on hotel websites↳ want the prices and availability of options to be shown right away; if decide on a specific date, not showing options unavailable; wants to see special terms & conditions easily to have a sense of booking protection; wants to see that it’s safe to book and pay online.
-
Would describe the current website as↳ wordy, not descriptive of the experience, very confusing navigations, wasn’t sure about what is there to do at the Manoir, too many words, overwhelming
COMPETITORS ANALYSIS
We have selected a few competitors in the historical travel industry and mapped them according to their price ranges and experience.
We have studied their visual identities on their websites, as well as their booking processes.
USER PERSONA
This user persona is the fictional representation of our ideal user. It is based on the user research previously done. It incorporates their motivations, frustrations, and observed behavior patterns. In our case, his name is Jean-Baptiste:
To best describe the User Persona of the place’s visitors, we chose a Parisian family, the Chaumont. The father, Jean-Baptiste is looking for a family-friendly place to travel to on weekends, with children's activities but with a romantic atmosphere too, not far from Paris.
USER PAIN POINTS
-
He can’t get rentals information easily
-
The prices and availability dates are not clear
-
The navigation is confusing
-
There are no activities around listed anywhere so he can’t know what he could do with his kids and wife
-
He doesn’t feel secure paying online
02. DEFINE
Here our goal is to define the problem and hypothesis statements that will be in our minds throughout the whole ideation process.
-
User Journey Map
-
How Might We Statements
-
Problems & hypothesis
USER JOURNEY MAP
Here is one anecdote story that could be Jean-Baptiste’s journey and illustrates how he’s feeling while looking for the right place to rent.
HOW MIGHT STATEMENTS
Those statements are questions that allow us to reframe the user’s pain points into opportunities and innovate on the problems found during the user research phase.
Problem 1: “The navigation is confusing”
↳How Might We have clear navigation on the website with everything easy to find & read?
Problem 2: “There are no activities around listed anywhere so he can’t know what he could do with his kids and wife.”
↳How Might We leave a cozy, fun, family-oriented, charming impression?
Problem 3: “He can’t get to rentals information easily, the prices and availability dates are not clear and he doesn’t feel secure paying online“
↳How Might We make a secure / straightforward booking process?
PROBLEM & HYPOTHESIS
PROBLEM STATEMENT
We have observed that the website is not currently optimal for people to navigate through and find the relevant information to book a cottage easily which is causing a lack of interest in potential visitors.
HYPOTHESIS STATEMENT
We believe redesigning the website of le Manoir de l’Aumônerie with attractiveness and charm for couples and young families will achieve an increase in the bookings through the website.
03. IDEATE
Our goal in this step is to imagine what the website will look like, from its look and feel to the technical features it will have.
-
Site Map
-
User Flow
-
Moodboard
-
Style tiles
SITE MAP
In order to make clearer navigation for the visitors to go through, we decided to divide the pages into the navigation links and the burger links.
USER FLOW
From our user experience research, the booking process was the most urgent to tackle since it seemed to be their main revenue stream and felt too complicated to even tech-savvy users. We decided to implement a “Book Now” button straight from the homepage on the navigation bar so that the user can decide to move forward in the booking process at any time.
MOODBOARD
We decided to focus on warmer colors that would depict a calming moment at the Manoir. The terracotta brings back the color of the iconic tower roof. The other colors are soothing and natural to reflect nature and the countryside.
STYLE TILES
We have chosen two main fonts for the typography of the website. Jacques François is a serif font that looks old and authentic and has a medieval feeling to it. On the other hand, Karla is a sans-serif font that looks minimalistic and modern. It shows a historical brand well established in its time.
04. PROTOTYPE
This phase’s goal is to start the design of the elements of our solution for the new website.
-
Logo Design
-
Design System
-
Mid-fi Prototypes
LOGO DESIGN
The existing logo was quite important to the owners. It showed the symbol of the place, which is the iconic tower of the Manoir. I wanted to keep that, but at the same time make it look more modern and a logo that could look well on either pictures or colored backgrounds.
DESIGN SYSTEM
We created a whole design system in order to facilitate animations of the components while hovering on buttons for example or making accordions.
Creating the design system also made it so much simpler and faster to design high-fidelity prototypes, not redesigning the nav bar or other redundant components for each page.
MID-FI PROTOTYPE
We have made our mid-fi prototype whimsical since it is easy to use with already made basic components that you just drag and drop on pages. We didn’t want to test the look and feel here but only the process flow.
We made our mid-fi only for the booking process, which is our main user flow.
05. TEST
The goal here is to check if we answered our target audience’s problems with our solution and iterate if need be.
-
Testing results
-
Iteration & Implementation
-
High-fi prototypes
-
Next steps
TEST RESULTS
We tested out our mid-fi booking process in order to check if our flow and design is straightforward for users. These are the heat maps of our booking process.
ITERATION & IMPLEMENTATION
-
People were not very sure where to click
-
People are more used to clicking on images to select
-
Skip & go back were not clear enough
↳ We decided to take into consideration the feedbacks we have had from our users on the high-fi wireframes.
HIGH-FI PROTOTYPE
We have made a Desktop and Smartphone version but since our scope mentioned that it was a Desktop priority, we decided to dedicate a lot more time to make the Desktop version as perfect as can be.
Check out the prototype for Desktop here.
Check out the prototype for Smartphone here. Only the booking process has been prototyped here.
NEXT STEPS: DESIRABILITY TEST
We have made a desirability test, showing the latest version of our homepage for le Manoir de l’Aumônerie’s website. We gave the testers a list of positive and negative adjectives to choose from. Looking at our homepage, they would choose the ones that reflect the most how they feel while scrolling through the page.
The result was very satisfying for us since the majority of the people chose the adjectives charming, calming, and simple as their main feeling toward our new home page.
We have also asked a simple question: “From the feeling that you receive from the homepage, would you book a journey at the Manoir the l’Aumônerie?”
99% of testers said yes except one who said maybe.
WEB DEVELOPMENT
The website had been done on WordPress 4 years ago when the new owners moved in. The platform was difficult to use and the design was hard to implement for them. We decided to switch to another CMS, which would be easier for them to manipulate. It would cost them less in maintenance afterwards.
We have chosen Wix.com and Amenitiz for PMS service and reservation system.
