Healthy Recipes Website

Case Study for the design and development of a Health and Fitness Website

Introduction

Schlankmitgenuss is a new Idea from BettyBossi, a company in Switzerland. Customers can put together their own nutrition plan to lose weight. In order to do that they get tasty recipes from Schlankmitgenuss.

The Challenge

Schlankmitgenuss create custom nutrition recipes to lose weight. The customers can enter their personal data like weight, height, target weight etc. This data will be used by Schlankmitgenuss to create fitting recipes.

The uniqueness about the Schlankmitgenuss programme is that these recipes are tailored to the customers daily routines. That means he will not get a "you have to spend two hours in the kitchen" recipe when he actually has no time or is not even at home - perhaps because he is commuting.

The challenge has been in the intuitive customization of the customers routine. We wanted to provide a user-friendly experience. We wanted to enable customers to be able to pick recipes depending on their daily schedule for 3 meals distributed throughout the day. The customer has the choice between 30-minute recipes, quickies, 3 ingredient recipes, to go - food for traveling and a joker or cheat meal.

Afterward, all this data had to be somewhat stored and be made accessible to Schlankmitgenuss. Since this is a pilot project, we were also quite curious about how the website is performing.

The Solution

For the Website, we used Lato as a Typografie. We used very natural colors. In the background, we placed a healthy dish from one of the Schlankmitgenuss recipes. It embodies what Schlankmitgenuss stands for. Tasty recipes with health in mind.

For the buttons, we used a high contrasting red to get attention and increase conversions.

To enable the customer to plan their routine we invented a drag and drop table. That makes creating the nutrition plan sheer child play. The table is separated into 3 rows representing a different meal of the day. Breakfast, Lunch, and dinner. The customer had unlimited recipe items he can drop into the meal fields but he had only 3 jokers he can use.

The Technology

The Markup was initially developed using HTML5, SCSS, and Gulp. We used Javascript and jQuery to implement the drag & drop functions. The data from the website has been published to a CSV file on the server. We used Ajax to send the data to a PHP script writing it into the file. We also implemented google analytics event tracking. That would let us know the conversion rate of each step of the website.