//d28ebfqlcy0ttg.cloudfront.net/images/mastheads/foodiesfeed.com_italian-polenta.jpg

A Classic Tale Of A Software Developer Attempting UX Design

December 28, 2015

User experience design is hard. And as a software developer, I did what all developers do when they attempt UX design... they assume their users will instinctively know how to use their product. I expected the user to intuitively know how my interfaces will work and why an interface needed to function the way it did.

Sometimes I’m probably a little too confident. I believe I’m a “well rounded” developer that has a general understanding of all aspects of the web and it’s related design practices. I knew I should not assume users will know how to use my product. Yet, I still made these classic mistakes and delivered a poor user experience.

After realizing I made some mistakes and needed some professional help, I found a talented UX and visual designer to help me redesign the Kulinarian interfaces.

The most important tool on Kulinarian.com is our Recipe Builder. The builder was also the interface that needed the most attention from a talented UX designer, so that is where the Kulinarian refactor begins.

Here is how we dramatically improved our Recipe Builder

The original recipe builder/editor was a “single page” app that walked users through a three step process.

As you can see already, a single page app with three panels was needlessly complex from the start and was clearly dreamt up by an architecture astronaut.

Step or panel #1 involved giving your recipe a name, writing a description, and then adding recipe “metadata” like servings, meal course, and preparation time.

In step #2, the user was asked to enter the recipe ingredients and preparation steps. While entering ingredients, the user would have to enter quantity, measurement unit, and food item into three separate fields for each ingredient.

And then in step #3, the user would confirm the recipe was correct and ready to be published.

What were the problems?

Step #1 was pretty straight forward and didn’t cause too many issues for our users. Choosing a recipe name, writing a description, and selecting some additional fields was easy.

Recipe Builder

However, after they completed those fields, they were often confused about what to do next. In their minds, it was time to enter recipe ingredients and steps, but they couldn’t find the fields to enter them in to.

Where were the fields for the ingredients and steps? They were in step two. However, users weren’t looking for “step two,” they were looking for the fields to enter their ingredients and steps on the current page, because that’s where a normal recipe interface includes these fields.

Even though there was a very big and obvious button at the bottom of the form indicating click here to “Enter Ingredients,” users were still confused, missed the button and step two entirely, and left the form, which meant I had lost a user.

Example Button

I was baffled. How were they missing this button and step? Most users found step two and successfully published recipes, but many users were confused by this process, and the process had failed them.

So what happened if you found your way to step two?

In the second step of creating a recipe, you were greeted with a big, nasty excel-like form with an infinite number of inputs.

Recipe Builder

Now as a software developer, I was very proud of this form. It was complex as hell and difficult to build. I didn’t use any libraries or frameworks other than jQuery. It took me months to build in my spare time and I loved it. But everyone else… hated it.

Why did they not like my uber complex and sophisticated recipe form? Because it didn’t make any damn sense.

If a user’s recipe called for “2 tablespoons balsamic vinegar” they would have to enter data into three separate fields “2,” “tablespoons,” and “balsamic vinegar.” And if you had 10 ingredients, you would have to enter data into 30 different fields (Are you kidding me? What’s not to love?).

Again, as a developer, for reasons that are only known to me, I thought this was a good idea and a great tool.

Entering the recipe steps was based on the same idea as the ingredients input. Each step had to be entered into it’s own input field. Even though it was far less inputs than the ingredients, it was still more annoying than adding all of the steps into a single textbox.

Recipe Builder

You’ve made it to step three

Step three was simple. Look at your recipe to confirm everything was correct and click publish recipe.

However, just like on step one, people were confused and thought that they had already saved their recipe, so they would not click publish and just leave the form. After all the work they did, they would just leave and never finish publishing their recipe.

It wasn’t their fault though, it was mine, and here is how I fixed it.

Version 2.0

When I decided to completely rebuild our Recipe Builder, I knew I had to start from scratch and that the HTML form and underlying technology had to be as simple as possible. Which meant, no single-page-app, and no multiple pages or steps. The entire recipe building process had to be one page and essentially one step to completion.

After months of work, our recipe builder is one sleek form with only a handful of inputs.

Recipe Builder

Like the previous recipe builder form, you start by adding your recipe name, description, course and servings. You also enter in the time it takes to prepare and cook the food.

Next, in only two simple inputs (instead of countless inputs), you enter your ingredients and recipe steps.

Recipe Editor

Even though this looks simpler than the previous ingredients input (which it is for our users), it’s actually much more complex in the backend of the system. We now use “Natural Language Processing” to parse the ingredient inputs and steps to get the required information we need about the recipe.

After the user is finished creating their recipe, they click publish, and are taken to their live recipe page. And that’s it, it’s as easy pie. Not only is the recipe builder easy to use, but it also looks awesome thanks to the work of a professional UX designer.

Once your recipe is published, you have the option to upload recipe images, tag your recipe with relevant keywords, and add your recipe to a menu.

We’re really proud of our new Recipe Builder and we would love it if you added some recipes of your own to Kulinarian.com. Give it try and let us know what you think.

Nate