Cooking School Site Redesign

Cooking School Site Redesign

Nourished Table & Home has a mission: to teach others how to nourish their bodies and take care of themselves in healthy, balanced ways. A cooking school, nutrition practice, and boutique, Nourished required a website that could handle multiple types of transactions and also a facelift at the same time. 

CompanyNourished Table & Home
IndustryFood/Health
SkillsUI/UX Design, Front End Dev
ToolsSketch, InVision
RoleUX Lead

Project Goals

  1. Move the client onto a single platform instead of 3 platforms to run their business (Wix, MindBodyOnline, and Healcode) 
  2. Create an elegant and integrated website that could handle multiple types of transactions: class registration, appointment booking, boutique sales, and POS
  3. Create an easier to use website to alleviate user pain in registering for classes online

Project Notes

  • The new platform chosen to handle the website, class registration, POS, and appointments was WordPress
  • POS and E-Commerce transactions were run through Square
  • Worked with an off-shore developer to customize WordPress and Square integration
Step One

Heuristic review of current site and persona definition

Conducted an evaluation of the current website and content structure

Worked with business owners to develop proto-personas

Content audit and site-map, brought in copywriter for SEO & copy review

Nourished Original Website

Heuristic Review

The current website had several usability issues that were hindering ease of use for customers, and complicated business matters on the backend. The website was built on Wix, but was not responsive. Wix could handle content management, but could not provide class registrations online, so the client implemented MindBody for this aspect of the business. The implementation of MindBody was not ideal, with popups used to handle content in many different contexts. The class calendar itself was problematic in that only a weekly view could be shown. Registering for a class meant walking through enrollment screens in a tiny popup window provided by MindBody.  The client also had to enter the same information mulitple times on Wix and MindBody because the systems were not integrated. 

Proto-Personas

Working with the client, we identified 3 main personas that we wanted to make sure were accounted for during the redesign:

  • Persona 1: Empty Nester with Me Time. The empty nester is finally free to do things that they have always wanted to do, and have the income to spend. Me time means taking classes, participating in activities, and taking care of oneself. 
  • Persona 2: Focused on Family Health. The healthy parent wants to know the techniques to feed their family in a healthy and sustainable way, that also won’t take a lot of time. This parent is also interested in their children learning how to cook. 
  • Persona 3: Individual with Health Concerns Turning to Nutrition. Nutrition can be a great tool on the way to beating an illness or condition. A carefully planned approach to nutrition and wellness can make all the difference in one’s recovery. 
Nourished Sitemap
Step Two

Create wireframes and define content focus based on sitemap

Persona 1 interests:
Nutrition Coaching, Lunch & Learns, Private Events 

Persona 2 interests:
Cooking Classes, Kids Cooking Classes, Private Events 

Persona 3 interests:
Detox Programs, Lunch & Learns, Boutique Products 

Nourished Wireframes

Wireframes

The new Nourished website had to account for some complicated requirements.  There would be a variable amount of content from month to month, namely the number of cooking classes. Classes needed to be accessible from the website homepage, a monthly calendar, and class category listing. Other services such as Nutrition Coaching had their own types of packages, which could contain bundles of both products and services. Services such as Grocery Store Tours needed to be bookable appointments. All of the different types of products and services would need to be purchasable within one shopping cart, and users should be able to access past purchases and store credits in their account online. 

Moodboard for Design Facelift

  • Nourished wanted to project a more hand crafted, high-end feel with the website redesign
  • Inspiration came from other holistic approach wellness experts, farmhouse style gurus, and food & cooking websites
  • The client wanted a more subtle green, but overall wanted to stick with a similar palette so they wouldn’t have to change all of their offline materials
  • Nourished wanted the site to appeal to their 3 proto-personas, with fresh photography that would speak to each one
Nourished Moodboard
Step Three

Art direct photography, create visual designs and collaborate with copywriter

Art directed a 2-day photo shoot to create authentic photography at the client’s location

Created visual designs from the initial wireframes, incorporating photography from the shoot

Collaborated with the copywriter to account for SEO and coordinate visual and written styles

Nourished Designs
Step Four

Create web-based point of sale system that integrated with Square.

Using the same website platform, created a point of sale system only accessible by admins

Worked with an off-shore developer to integrate Square swipe processing from the point of sale screen

Point of sale system used for phone orders (keyed in credit card entry), and in person sales (card swipe)

Point of Sale

Final Result:
An elegant, easy to use and integrated platform  

The Nourished project culminated in an integrated system that the client found easy to use and update, and a front end experience that made class registration and checkout less tedious for customers.