Gwendog, a local e-commerce, or how to build a website for the client experience

This project is the second realized during the bootcamp of Ironhack Paris (summer 2021).
I collaborated with two other girls. I invite you to have a look at their profiles : Maria-José Paquelier, Célia Pascaline.

E-commerce is well-studied in the industry, this project will be focusing on delivering great online shopping experiences for the end users.

1. The Client

With my team, we decided to focus on a local pet groomer in Paris.

Gwendog is a pet groomer located in Montmartre, Paris.
Pre-COVID, the team was made up by Gwendolyne (the owner) and 3 other groomers. Nowadays it’s only Gwen and an intern.

This Pet Groomer already had a website but never use it.

2. The Goal

The SWOT

First of all we decided to make a SWOT (Strengths Weaknesses Opportunities Threats) to have a better understanding of the actual situation of the local groomer.

Strengths :

• Faithful clients
• Neighborhood groomer
• No competitors nearby
• Same number of clients before and after COVID-19

Weaknesses :

• Unclear website
• Contact information not easily found
• Website doesn’t look professional
• Client doesn’t feel the need to grow/expand

Opportunities :

• Better organization with a website
• Better brand image
• Easier to make an appointment

Threats :

• Owner doesn’t have a strong online presence
• Owner doesn’t care about their online/social media presence
• Outdated site makes future clients think it’s not open
• Clients can’t take online appointments, it may disturb potential clients

Feature Comparison

After this analysis, we compared Gwendog website with eights other pet groomers.

To understand better what the others brands have better than the Gwendog website, we decided to compare :

• Book online
• Contact info
• Photo gallery
• Newsletter
• Blog
• Social media
• Info about the shop
• Prices
• Info about the team
• Shop
• Online shop

Because of that, we could notice that Gwendog had really limited infos, but the essential : contact information, some photos, a blog (that nobody else has), and a presentation of the shop (but users can’t buy online).

Brand Analysis

In the long list of brands we choose four, and try to analyse the different.

We analysis the target animals, the brand personality, the prices, and the value proposition.

Competitor Mapping

We decided to position the different brands on a graph showing the price and the difference in service offered on the website.

We can see that Gwengod is a now with a low-price and with more services on website.

3. User Experience

Users Interviews

We did five interviews, with pet owner, to have their impressions about the website and what they expect in a pet groomer website.

What comes out is that the website was not clear at all, it doesn’t look professional, and it even look closed for years !

Affinity Diagram

We did an affinity diagram with the result of interviews, and we put in eleven categories to see more clearly.

Based on dot voting, we chose the following topics:

• Services used
• Appointments
• What users would like to see

User Persona

We created a persona named Léa who is 27 years old and has a dog named Haru, who is 2 years old.

Léa is looking for a great pet groomer, but she doesn’t have the time to call to make an appointment. She needs to be in confidence with the groomer.

User Journey

The logical continuation was to do a user journey.

Léa is at work and summer is coming. She looks on the web for a groomer nearby during her lunch break, and she finds the Gwendog website. She wants to make an appointment through the calendar and know the details of the services and the price.

1. Looking for a pet groomer

• Léa searches for a per groomer online. She sees that Gwendog is the groomer is 10 minutes away.
• She goes to Gwendog’s website.

2. Landing on the website

• She sees the website disposition and wonders if the shop is still open.
• The site doesn’t inspire much trust, but it’s nearby so she decides to keep going

3. Choosing a service

• She goes to the “Grooming” tab to have more information.
• She looks for the services and the detailed information and they’re not very clear.
• She looks for the prices and doesn’t find them.

4. Looking to make an appointment

• She decides to make an appointment anyway
• She looks somewhere on the website to do it, but doesn’t find one
• She remembers there was a calendar on the home page

5. Making an appointment

• She clicks on the calendar on the day where she’s available
• The calendar sends her to a contact form to fill out

6. Frustration

• She can’t see the groomer’s availabilities.
• She feels that filling out the contact form is useless
• She’s frustrated and doesn’t have the time to call
• She has to look for another groomer all over again

Problem Statement

Busy, caring pet owners need to find a way to make appointments online easily at Gwendog because they don’t have the time to call and agree on a time slot.

Hypothesis Statement

Hypothesis for users

We believe that updating the website and more appointment options (online, by phone, and in person) for the clients will achieve a better user experience and build trust. We will know we are right if the users come back, and if there are more appointments by new clients.

Hypothesis for Gwendog

We believe that updating the website and more appointment option (online, by phone, and in person) for the owner will help them with their organization. We will know we are right if the owner is less overwhelmed by taking client calls that interrupt their work.

How Might We

• How might we display relevant, clear, and necessary information ?
• How might we inspire trust to potential clients arriving on the website and still keep the spirit of Gwendog that loyal clients know?
• How might we simplify appointment management for the users and our client?

MOSCOW

We used the 3 How Might We questions to brainstorm for solutions. Then we used the MoSCoW method.

MOSCOW is an acronym for Must-have, Should-have, Could-have, and Won’t-have.

This method allows to prioritize our action, and to give a conduct line.

Minimum Valuable Proposition

The goal of the Gwendog website, at the bare minimum, is to give show the clients relevant, clear and necessary information. By having this information available and easily accessible, the website will project an image of trustworthiness and professionalism.

Therefore, we must do the following:

Create a page where the services and the prices are clearly detailed. Gwendog is a pet groomer that not only receives dogs of all sizes, but cats as well.

By ensuring that these items are available to the user, they will be able to make an appointment online or by phone. This will also have an impact on our client’s way of working, because they will not be constantly interrupted by incoming calls to make a reservation.

Site Map

We made the site map of the Gwendog website. We can see that there is a lot of link in the main page.

We decided to make the site a little better organized.

User Flow

After doing all these steps, we were able to realize Léa’s happy path which takes place as follows :

1. Léa arrives on the main page of Gwendog website
2. She wants to take an appointment
3. She choose a date
4. She choose an hour
5. If the place is available, Léa can validate her choice
6. She doesn’t want to take an other appointment
7. She exits the website

Low-fidelity

After all of this it’s time to iterate with my team and do the low fidelity of the website.

Medium Fidelity

Because the low we were able to do tests and modify some elements.

4. User Interface

Visual Competitive Analysis

We analyse three competitors : Pet So Chic, Dog Station, Animal’s.

All the brands have differents visual approche. Pet So Chic is in black and white, while Dog Station is really colorfull.

Moodboard

After the competitor analysis we decided to choose the theme of the Gwendog website.

Our brand attributes, which are five words than define our brand, are :

• Caring
• Happy
• Friendly
• Trustworthy
• Warm

We tested our moodboard and “friendly” and “happy” was the main words that people gave us0

Style Tile

We wanted the color to be calm, friendly, like the font.

High Fidelity

You will find below the high fidelity for computer, but also on mobile, since we have made a responsive version.

During our desirabilty tests users tell us mainly that it was easy to use.

Next Steps

At this stage, the project is not finished and needs adjustment :

• Add a floating window next to the drop-down menu for selecting services in the “make an appointment” page
• Add a “back to menu” button in the confirmation page
• Add a floating window next to the prices to help the user to know which animal size is the one for them
• Bug correction

Thanks for reading, I invite you to test te new website :

Figma