Culinaria

Evolving a food blog to a user-focused design.

Culinaria

Introduction

Culinaria was a food and travel blog inspired by the Culinaria series of cookbooks published by Konemann Books. Since Konemann stopped publishing books I was inspired to “carry on the idea” with a food blog telling the stories of traditional dishes around the world. While I had poured a lot into the content itself, my site statistics showed I had a high bounce rate, and I wanted to fix that.

Research and Discovery

When I first created the website, I had simply used a traditional Web 2.0 layout, which was the norm at the time. I had made improvements in order to increase engagement on the home page, but still saw my bounce rate very high. Many would arrive on the home page and bounce, and many more would first land on the site in one of the content pages, but not go any further.

I was tired of guessing or just following along other blogs, and wanted to learn more about who is coming to the site. Gaining a decent following on social media, I created a general survey looking into what users wanted and didn’t want in a food blog. I had also left a checkbox for anyone willing to answer further questions.

After receiving 72 responses, I reached out to 10 who said it’s ok to ask further questions, and created another survey asking more user-specific questions, showing layouts and asking how they would find something, or what they would do after they arrive on a page.

It was fruitful. I managed to determine my problems:

  • My “creative” section names on the navigation confused users.
  • The search bar was the most used means for anyone to look around the site, and many wished it was more intuitive.
  • Some of my content titles and blurbs do not incite users to click on them.
  • Most users were unsure on what to do or where to go after reading a piece of content.
  • Too many choices on what to do and where to go on every page.
The old Culinaria site

The old site

User Personas and User Flows

Learning about the users

With all the information I collected from the two surveys, I wanted to organize it all into easily-digestible (pardon the pun) groupings that would give a clear picture of who came and engaged with the blog. I created three user personas representing the three main groups of users based on patterns I saw in the survey answers:

The next step was to map out the user flow of the current site, and think about how things should work moving forward. The User Personas helped a lot in building empathy and thinking about how they interacted with the site. You can see I removed much of the “plethora of choices” in how I wanted to move forward.

Wireframes of the home page and content page

From this point, wireframes were created. I wanted to make the content shine more with a big cover image and headline to grab attention, and then keep the content concise with smarter choices shown to the user in the sidebar or below. Those choices would be inserted based on close alignment of similarity with the current piece the user would be looking at.

Some could question the “menu” as a hamburger on all experiences, but this came back to the problem of too much choice. I didn’t really want users going to a menu for sections, but to just arrive, see a piece of content that appealed to them, and then click. From there, a similar experience of content with a few choices, and a prominent search bar on all pages with a call-to-action as the label so the users go to the search.

The Final Design

Final Design

With the final design, I didn’t want to veer too far away from how the old site looked, outside of removing the background texture. I liked warm colors as it aligned with the brand I had been creating with Culinaria, as well as the look and feel of the books from Konemann. I also didn’t want to use a white background, as I felt too many similar cooking and recipe sites use that, and they all look too similar to one another. Different shades of the background and sizing of content would help in building separation of interest and thus not showing the user too many similar choices.

In laying out what actually happens in the drop-down menu, I empathized with the User Personas I created and thought about everyone from Charlie the Curious Amateur to Tina the Traveler. I wanted a simple solution in case they didn’t want to use the search with imagery that would entice them to click.

Results and Takeaways

With all this great data and work done, it was a shame I had to close down the website. It just a problem of not having enough free time to create content anymore, as well as the rising prices of food. I’m still proud of my UX work in getting to this point, and felt it was worth putting into my portfolio.

On an interesting note, I also wanted to try a social experiment with the new site in banner advertising. Obviously many users now use ad-blocking browsers or extensions, which I can’t blame them. I wanted to see if I used less banners than most sites and gave the ad revenue to charity, if it would drive users to whitelist the site. Perhaps someone will follow through with that experiment in making banner ads do social good.