How a Change in Key User Interfaces Increased User Retention

Introduction

A popular meal planning site based in North America approached us to revamp their site. The site’s main purpose is to help in family meal planning, recipe sharing with friends, etc. This site built in Drupal 7 takes contributing back to the community to the next level by donating a part of their proceeds to support orphan care charities.

The site already had a large repository of recipes created by the administrator when we started working on it. The recipes contained useful information about the ingredients used in the recipes, including the dietary choices. The site has a database for ingredients as well with which the users could create their own recipes. Users can select the recipes of their choice, can see the cost of ingredients that are needed to purchase and plan their recipes to stay within budget.

The site does not sell recipes or ingredients, it offers monthly, trimonthly, half-yearly and yearly membership to its members for the budgeting and weekly or monthly planning of meals.

The Challenge

The original website was very difficult for the users not only to navigate but to create their own meal plans as well. Users were having a hard time finding the recipes they needed. Creating menus was getting to be time-consuming and not at all user-unfriendly.

The client wanted to first re-design an all important page called ‘Step2’ page, the page in the site for creating a menu. This was so that customers could have a better experience on their site and the site could be more user-friendly.

In the older version of the site, the recipes were not eye-catchy because they were listed only as text labels with diet icons and the menu choice displayed only the selected recipe label and quantity. The users could select the recipes using a checkbox and select the quantity servings using a select box provided along with the recipe name. The client was particular that the redesign shouldn’t affect the then current functionality of Step2, they wanted that to be the center of attraction for their recipes. Along with that, they wanted the menu choice section to be made more interactive.

Along with the Step2, Step1, header and footer of the site was to be redesigned to remove complexity.

The Solution

To handle the redesign of the Step2 page, we introduced the concept of listing the recipes using their images. It was decided to remove the checkbox and allow the user to select the recipe by clicking on the recipe image itself. This visual aid to select recipes helped improve the user friendliness of the site. Also, the diet icons (displaying whether it was gluten free, low calorie etc), price, recipe name, ingredient link were better handled through the recipe image.

The client also wanted to introduce the option to tag recipes as favorites to aid in recipe recall. Using Ajax this process was simplified, whereby we just had to click on the favorite icon on the recipe. Using proper jQuery we moved the step2 page layout to 3 separate sections. This helped in providing more user interactive options in the menu choice section without affecting its functionality. So that from the menu choice section, the users could unselect the recipes and select the serving there itself.

Using the same concept, the Step1 page was also redesigned. The client wanted a hamburger menu in the header to handle important links in the site. Along with that, the footer added more site links so that the users could easily find about the services they were providing to the society.

We implemented Authorize.Net payment services with Authnet ARB API integration to handle site membership, along with the Drupal Commerce Modules. The site handles a huge amount of recipe images and recipe list for meal planning. To speed up the time taken to load content, we implemented caching of necessary pages and forms using Memcache and Drupal boost with necessary configurations.

Some of the reviews from the users:

“I had it on my phone while I shopped, no printing involved.” “It seems easier to get things done on the site. Things make more sense and it's clearer what some of the links and buttons do.”