Website Design for a Vegan Chef and Recipe Developer

Website Design for a Vegan Chef and Recipe Developer – Case Study

Website Design for a Vegan Chef and Recipe Developer - Case Study - A Coconut Design article

One day in September, I received a notification that sweetened my morning coffee: a vegan hobby chef and recipe developer expressed interest in consulting with me about their website’s redesign. And this is how our journey started with Betti…

First steps of the website redesign journey

As usual, I sent a personalised, manual confirmation of our appointment, including questions to help Betti prepare for our meeting.

You know what I got back? An organised and detailed document! At this point I knew this would be a great project.

Oh, you’re wondering what those questions were?

  • What are the exact goals of the website? (selling books, building a community, collecting subscribers, etc.)
  • How do potential buyers get to the website, the webshop?
  • Would you like to add other products or services even later?
  • What information do you have about your customers so far? What do they like about you, what kind of feedback have you received?
  • When do you want the new page to be available?
  • What do you like about the current one, what do you not like, and in comparison, what do you expect from the new one?
Plant-based chef website design - before
This is how the website looked like before the redesign

Website Design discovery call

A few days later we had our discovery call. It was a pretty long one as we both felt that it’s a match: we, as a team, will be able to take Betti’s webshop to the next level.

What did we do during the discovery call?

We got to know each other and talked about the features that Betti will need on the new website and all her dreams and expectations about the looks and the design of the site.

I learned that Betti and her husband had decided to start small, three months before our call. They asked a friend to create a webshop for her, just to try out if this business can work out for them. And Betti cooked, made wonderfully beautiful photos and posted them on social media. She gave her best and found her target audience quite quickly, so yes, it did work out. And here we are. It’s time to take this heartwarming vegan business to the next level.

We agreed that we can stay with WordPress and WooCommerce, but the theme will be a custom designed and developed one, tailored for her needs. This way we could give her the opportunity to use the fastest developing CMS with the most plugin, but have all the features she needed customly developed by us, so the website speed won’t be compromised.

Vegan recipe website design
I was so hungry during this project…

Website Design and Development Quote

After talking through everything, I prepared the offer for them. It was our custom webshop design package that includes every single feature that Betti needs. And a little more, as you’ll see it later.

We had a quick call the same day to clarify every detail and by evening time, Betti’s little vegan business had a new designer.

Let’s start working on this Website Design for a Vegan Chef!

Since it was technically a redesign project, we already had some content and structure for the site. However, a redesign project is always a good opportunity to take those to the next level too. So we prepared a document for Betti to help her with the content. We agreed on 2 blog posts until the website launch, as she didn’t have one yet, but it’s super helpful when it comes to SEO. 

What did we include in the document?

  • Basic SEO tips for her blog posts
  • Website structure: pages and menu structure
  • Labels and categories for the recipes
  • Recipe feature and element list both on the front-end and the admin site
  • New content for each pages whether new or pre-existing

Having this document made the work easier for both parties. We always use this solution when working with a solopreneur or a small team where there aren’t dedicated people for each marketing task.

Betti also gave me something: some guidance about the style she wished. Her email included colour codes and images of a couple of websites she liked. It was super helpful for me and very inspiring. I let her know that I’ll work with an extended colour palette to have the best accessibility, but I’ll prioritise the shades she sent me.

From the layouts she sent me I saw that she loves those small graphics! Also, she mentioned that she loved the simple animations she saw on our website, and I always take notes…

Vegan Web Design: Home Page for a Vegan Chef and Recipe Developer

Our first layout was the home page. We skipped the wireframing phase in this project, because it would just elevate the costs as the website structure was pretty straightforward.

web design for vegan chef and recipe developer
The new home page

Let’s see the structure of this page.

The first section we gave answers to the most important questions when someone arrives to a website:

  • What?
  • For whom?
  • Why?

The motto in the top part says: “Whole food plant based recipes from all around the world”

What? -> Recipes

For whom -> those who cook and eat WFPB

Why -> you can learn other culture’s recipes

The main page includes

  • Recipe recommendation and a recipe finder
  • Introduction of the creator
  • USPs
  • Seasonal recipe recommendation
  • An offer about the her new e-book
  • Newsletter subscription form
  • Blog highlight
  • Fancy footer
vegan recipe book webshop design
This is how it looks on tablet

The seasonal recipe highlight was a surprise for her, and it always shows the recipes that are connected to the season based on the calendar we pre set for her, so she don’t have any more job with that besides adding her newest recipes.

In case of unique selling propositions (USPs) I decided to ignore the usual form: icons + keywords. I find it boring and Betti had really eye-pleasing images, so I used a list this time.

By the way, she was super happy with the results so we jumped on the next stage immediately.

Mobile-friendly e-book webshop design vegan recipes
And the mobile layout

Customising the whole vegan recipe book webshop

After the home page has been approved we moved on with the other pages:

  • Shop page
  • Product pages
  • Blog page (list of blog posts)
  • Blog post pages
  • Expert recommendation page
  • About page
  • Recipe pages
  • Recipes page (list, labels and search bar)

While I focused on the design, our skilled developer took on the coding aspect, which isn’t my favourite part, if you know what I mean.

Back-end and Implementation

All page designs were approved by Betti pretty quickly as we were on the same page, so we could move on quickly and start the implementation. 

This stage is usually not that spectacular for our clients, …because we don’t present visually appealing elements to them; instead, we ask detailed questions about functionalities, which, while not the most interesting, are a necessary part of the process.

This is the phase where we make sure that the website is easy to use for the website owner, and the admin is simple, fast and straightforward.

In the case of Betti the critical part was the upload of the recipes as she intended to do it on a daily basis. (Yes, she’s an amazingly creative vegan professional!) 

This is what we created for her to help her work:

It’s technically a recipe creator plugin for WordPress, developed for her.

Best recipe uploading plugin for chefs wordpress
As Betti said: “Uploading recipes became super easy”

Also, this is the stage when we do every step necessary to make the website itself fast and take care of the technical SEO. Because SEO is not only keywords and texts: your website has to meet technical requirements if you want to see organic results.

Core web vitals before
Core web vitals after

Then…

We launched this new website on a Tuesday evening by keeping all the previous content and order data. It took about 2-3 hours and we did it outside of the highest traffic slots.

Tuition for this custom made website

As we were applying the final touches before launching the site, we scheduled a date for our tutorial session. It was a 1,5 hour long consultation.

We talked about:

1. Site use

  • How can the texts and images on individual pages be modified?
  • How can the contents of the recipes be changed and edited? (Text, data, tags, categories, videos, images)
  • How to edit blog posts and upload new ones?

2. SEO

  • What is SEO, what are the benefits of working on it, and what should be avoided?
  • Making blog posts search engine friendly
  • What data will we monitor and how should they be interpreted?
  • Time factor

3. Maintenance

  • What will we do regularly on the site and why is all this important?

They had some questions too and we agreed if they have any further things to clarify, they ask me in email and I send them short videos so they can check it any time.

Website for recipe e-book author
Purchases started increasing organically after the launch of the new website

Afterworks

You might think that’s all; that we’re done and the site is ready. But…

Far from that. The real game just started! Ain’t no website is ready when the website has been done.

If we really want the website to reach it’s full potential and help people to find and buy Betti’s recipe books, we have to take care of the following:

  • Plugin updates
  • Security updates
  • Traffic and SEO insights
  • Fix indexing issues
Mobile-friendly website for recipe e-book author
Since most people look at the recipes on their mobile while cooking, we paid special attention to mobile-friendly development

We do all these in our support package on a monthly basis, step by step. Plus we offer 1 hour of available time per month, which can be used for consultation or minor modifications.

Closing word? For us, Betti was a dream client. And for her? I’ll let the Google ratings speak for themselves:

Positive reviews Coconut Design

What are your thoughts about this project? If you have any questions, I would like to invite you to a coffee date. I will be happy to answer all your web design-related questions in a free 20-minute session. Be my guest!