For the last few weeks, we have been redesigning the website for Marie Chantal’s Bakery. We are finally ready (and very excited) to share the outcome of our work.
Before we delve into what we’ve been doing, let us introduce our client.
Marie Chantal’s Bakery is a small bakery located in Mount Airy, Maryland. Owner and baker Marie Jonas specializes in cupcakes, cakes, cake pops, cookies and more. Her creations are made to order and she caters weddings, launch parties, birthdays, and other events.
Marie provided us with a lot of beautiful photos and other great content to work with during our redesign. Hopefully, you won’t get too hungry as you look through her website.
THE HOME PAGE
We will, of course, start with the home page. Above, you can see that we kept the same image for the hero image on the page. It’s the perfect photo for the home page because you immediately know where you are and what the business offers. We included the business name and tagline in an “h1” tag for two reasons: to help improve her search engine optimization, or SEO, and so the hierarchy is clear to readers and assistive technology tools, such as screen readers.
A site-wide change that is easily seen here is the main navigation at the top of the page. We’ve made it less intrusive to the content and provided quick links to the bakery’s social media accounts and contact information.
One element our client had on her original home page was parallax images. We kept those throughout the home page but add some “white” space sections to create more breathing room within the content. You will see parallax images used throughout the site, as well. Each section of the home page highlights a different page of the website and has a link to that page. The home page provides a brief overview of information available to visitors and then makes it easy for visitors to find more details.
THE ABOUT PAGE
As you go through the website, you’ll see we used hero images at the top of each page. Unlike the rest of the pages that highlight one of Marie’s creations, the about page uses an image of gold confetti on a white background. This image was from the original website and we wanted to find a way to use it on the new website. Here, it sends a visual message that this page is a little different from the others. We’re focusing on the story and person behind the baked goods instead of the baked goods. Plus, the confetti dots look like the confetti sprinkles that top cakes and cupcakes.
Most of the changes to the about page was cosmetic work, such as updating text, colors, and photos. We gave the Colossians quote more prominence because, as you’ll read in her story, it helped inspire Marie to pursue baking as a way to find fulfillment in her life. The quote helps to draw attention to the main text and, hopefully, peaks the reader’s interest.
The Instagram RSS feed still exists, but it and the feeds for the bakery’s Twitter and Facebook accounts are located at the bottom of the page. We moved them below because they weren’t the focus of the page. However, we wanted to make sure they were accessible and easily found by visitors. The feeds also allow us to have some extra photos appear on page that don’t conflict or distract from the main content.
The biggest addition to this page is the button to Marie’s personal blog. Originally, the blog link was located in the main navigation. This took you outside of her website, away from all the baked treats. After discussing the blog’s role and focus, we all decided that the link fit better on the about page. If visitors want to know more about Marie, they can click the button and launch her blog in a new tab or window and not completely leave the bakery website. In addition, removing it from the main navigation keeps visitors from accidentally leaving the site and being confused about where all the cakes and cupcakes have gone.
THE MENU/PRICING PAGE
We completely restructured the menu and pricing page. Originally, the page was a large image of a PDF that detailed order options and prices. While it was legible, the information was unavailable to web crawlers, which hurt the website’s likelihood of showing up in a search result, and was inaccessible to visitors who use screen readers or other assistance tools to view websites.
We decided to make the image of the pricing sheet smaller, though it can still be downloaded. We then pulled the information from the pricing sheet and rebuilt the page. The important notices about allergies, payment, and contact information all appear at the top of the page next to the downloadable PDF. This is important information for visitors to have before they start creating their order, so it was given a place “above the fold.”
Underneath the notices, we recreated the menu part of the pricing sheet. Each section is clearly labeled and contains the options available, such as flavors and price, as well as the starting prices. The menu is mobile friendly and will remain legible and clear across screen sizes. The desktop view will include photos to showcase her work, but these will not be visible on mobile in order to reduce page load time and scrolling.
At the bottom of the menu, there is an “Order Now” button that will take you to the order/contact form, making it easy for visitors to submit an order.
THE OUR WORK PAGE
The “Our Work” page is very similar in content to what existed on the photos page of the original website. There is a large collection of work produced by the bakery and an Instagram feed. The new page has both of these elements, and a few more.
The portfolio gallery has a couple new features: filters and a slideshow. Visitors can view the bakery’s work all at once or by category, such as cupcakes, cakes, cake pops, and miscellaneous (cookies, brownies, etc.). If an individual image is clicked, an overlay will appear over the page with a slideshow gallery in the the middle of the page. Visitors can click through the photos or press the play button on the window and enjoy an automated slideshow.
Visually, the biggest changes were flipping the layout and creating uniformly-sized thumbnails for the gallery images. As you scroll down, we included the Facebook RSS feed under the Instagram feed to add additional content and break up the stream of images.
THE TESTIMONIALS PAGE
The customer testimonials page was another page that saw a lot of changes.
First, we dropped the RSS feeds from the page. This is to decrease page load time and scrolling, both on desktop and mobile. The feeds are present on two other pages, and there are links to the bakery’s social accounts included in the main navigation. If a visitor needs to get to a social media account, they can easily do so from any page.
The top of the page includes a short explanation about what a visitor will find and can do on the page. While it may be clear what a testimonials page is, we didn’t want to dump a visitor into the middle of the content.
In addition, we wanted to highlight the “Submit Your Review” button. This button will take the user directly to the review submit form, which is located at the bottom of the page, allowing the visitor to save time on scrolling if they just want to quickly submit a review. This feature works on desktop, tablets, and mobile devices.
Between the top content and the review form, there are two sliders. The first slider will display a series of images that will showcase the bakery’s work, and possibly the customers enjoying their treats. The second slider is for the submitted reviews. After a review is submitted, our client has the option to publish customer reviews to the slider. They will then appear in this section of the page. Visitors can click through reviews or let the slider play naturally.
THE CONTACT PAGE
We changed a few things on the contact page to improve functionality and accessibility.
The “star” of the page is the contact form. In addition to adding some photos, to lessen the amount of white space around the form, we separated the contact form from the review form and added a few new fields. The form separation allows our client to handle the reviews through the WordPress CMS and keeps the her email inbox more organized. Now she will know the emails received are primarily orders or inquiries, and can respond accordingly.
We added a few fields to the form so users can provide as much information up front as possible. The new form allows users to specify if the message is a general inquiry or an order, to select a delivery date, and to include allergy concerns. The new fields will allow our client to streamline her scheduling.
As we know, however, sometimes contact forms break or users don’t like to use them. A little further down on the page, you will see all the ways the bakery can be contacted. Clicking on the phone number will initiate a call while clicking on the email will launch the user’s preferred email application, if allowed. Once again, the social media links will take a visitor to the specific account.
We included a map at the bottom of the page even though the bakery doesn’t have a physical location yet. The map makes it clear to visitors where the bakery does its business even if they can’t visit a store. It also helps improve the SEO for the website.
BEHIND THE SCENES
Our client needed to be able to update some of the content on her own, such as the “Our Work” gallery, testimonials image slider, and the customer review slider. To make updating the content easy for her, we created a WordPress website so she could use the CMS to add or remove images and manage customer reviews. While it is a WordPress site and we did utilize plugins, the theme and layout design used was coded by the team at Raving Software.
We enjoyed working on this website and with our client, and can’t wait to take our improved skills and knowledge to the next client’s project.
Is there a design topic you want to know more about? Let us know in the comments or contact us through email.