Building a new website for a unique pregnancy brand

Introduction

Autumn Rose is a mother and daughter-run business that offers yoga and massage services for pregnant and postnatal women, whose birth and postnatal outcomes are often negatively impacted by high levels of stress and anxiety. Within a year, they’ve had a massive impact on women in their local communities, helping them find calm, reduce anxiety through education, and bond better with their babies. Since then, they have expanded their offerings and into new locations due to growing demand.

In our first project, we created a basic site for them to direct users to and take in booking enquiries via a web form. Back then, they managed everything manually while they explored booking system options, as they needed flexibility to suit their complex schedules:

Current contact form

Aside from this, we had 4 other pages: the Homepage, Our Services, Our Prices and an About. This structure worked well at the start, even though the analytics showed people jumping around the services and pricing pages, as the information was a bit disconnected:

Services and pricing pages

With their expanded service offerings, we knew we needed a different structure, as well as more compelling information to accompany each service.

The Challenge

Their website did a great job of getting them up and running. However, having grown their business, they noticed that the same questions kept popping up on their email enquiries, and that feedback from those who booked showed many were realising the unique value of their service only after experiencing it. From this, they knew they needed to bring more information up to the surface, and utilise the site as a more effective marketing tool.

This also meant that, with more enquiries and bookings, the amount of admin work started to pile up. They needed to ensure people could find the information they needed and book, without requiring them to get in touch. So, after setting up the booking system, they set some goals for the site:

• Receive more bookings via the system
• Receive less manual booking/gift card enquiries
• Rank higher on Google
• Improve the user experience

The Process

Discovery

The first thing we did was make some quick changes to the existing website to direct users to the booking system page, instead of the contact form. This instantly reduced the number of manual enquiries coming in, which helped save a ton of time. After that, we started mapping out where they are at currently, and what the key problem areas were, namely:

• Common questions being addressed manually
• Confusion around where their services are offered
• Low SEO ranking despite most traffic coming from Google
• Not enough information on the website

We also re-visited the notes from our initial discovery session to consider the brand direction and ensure alignment.

Discovery session notes

Finally, we reviewed their social media and booking system pages to get a good understanding of the different touch points, processes and information, so they could be considered in the design.

Planning

After gathering all the necessary information and setting our focus, we started planning out a structure for the new site. I started researching competitors and noted any gaps in their approaches, and then we convened to figure out what else was missing from our perspective.

After some back and forth, we decided on an approach to create a page for each service category, such as “Pregnancy Yoga” and “Postnatal Massage”. This would in turn group information and make it relevant to a single persona (such as a pregnant woman, or postnatal mum):

Sitemap

With this approach, we started working on the copy for each page. We took copy from their booking page and Instagram posts as much as possible, to make sure we kept the language consistent and on brand.

As part of this, we needed to define what testimonials and FAQs to show, and where. To manage this effectively, we created databases in Notion and added a field to select the pages to show them in. This made things much more manageable, and ensured we didn’t end up with duplicates:

Notion information databases

Visuals

Once everything was planned out, we were ready to start designing.

The homepage, being the main entry point of the site, was designed to guide users into the relevant service pages by displaying each service category within user groups (i.e., “For pregnancy”, “For postnatal”, and “For Healthcare Professionals”). Each service item included a short description, a booking link to the relevant services, and a link to the category page:

User type-led service sections

Figma artboard

Each category page followed a similar structure. As per the sitemap, we wanted to include:

• A description of the service
• The benefits
• What they can expect
• About the instructor/masseuse
• Testimonials from those using that service
• Services available
• FAQs to address common queries, both relevant to the service and general

Desktop shots

After a few feedback rounds and iterations, I designed the mobile version, to make sure the user experience remained smooth regardless of the device. This meant designing new layouts and interactions, such as the menu:

Mobile menu

Development

We decided to build the website using Next.js to ensure we had full control over the design, animations, hosting, tech stack, and much more. It also had built-in SEO and image optimisation features that made it much easier and quicker to build.

After all pages were built, we tested the designs on both desktop and mobile, and finished with an technical SEO audit to ensure there were no broken links or issues that could potentially impact their ranking. Once everything had been ironed out, we were ready…