fooodlove: A blend of Taste and Technology

Explore the transformation journey of fooodlove, blending mobile-first design, development, photography, and SEO to enrich a beloved Mediterranean food blog.
fooodlove showcased on multiple Android devices
On this page

As a product designer, I’m always on the lookout for projects that push boundaries and challenge me in new ways. Enter fooodlove: an ambitious food blog with a global following and a deep love for Mediterranean cuisine. When I took on the task of redesigning and developing its website, I knew I was in for an enriching journey—one filled with challenges, new technologies, and, of course, mouthwatering recipes.

About fooodlove

Fooodlove is more than just a blog—it’s a celebration of Mediterranean flavors shared through simple yet irresistible recipes. What sets it apart? Vibrant short-form videos that bring the cooking process to life and transport viewers straight to a Mediterranean kitchen. With a thriving social media presence and thousands of monthly visitors, fooodlove has already captured the hearts of food enthusiasts worldwide. However, in 2021, the blog embarked on its biggest transformation yet: the launch of a custom, mobile-first website designed to elevate the user experience.

Revamping without alienating

Redesigning a website with an established audience isn’t like starting with a blank canvas—it’s more like renovating a beloved home. Fooodlove’s visitors had grown familiar with its charm, so the challenge was to modernize without losing that sense of comfort. I relied on data and user insights to guide every decision, ensuring the new design struck the perfect balance between innovation and familiarity.

Prioritizing mobile experience

With over 70% of visitors accessing fooodlove from mobile devices, a mobile-first approach was non-negotiable. Navigation, layout, and content presentation were meticulously optimized for smaller screens, ensuring a seamless and delightful experience.

Crafting a Style Guide

Before diving into development, I built a comprehensive style guide in Figma. This included reusable components for colors, typography, icons, and other design elements. This groundwork not only streamlined the design process but also ensured consistency across the website.

Designing fooodlove in Figma

From mockups to reality

This project wasn’t just a design exercise; it tested my front-end development skills too. Using ExpressionEngine and the Bootstrap framework, I translated the Figma mockups into a fully functional website. One of my proudest achievements? Developing an automation that generates Google Web Stories for each recipe. Unlike the manual processes used by other blogs, fooodlove’s web stories are created seamlessly based on recipe content.

Diving into Food Photography and Video

As if design and development weren’t enough, I also ventured into food photography and video editing. It was a new and exciting world, one that demanded experimentation and creativity. I crafted templates in Figma and used Final Cut Pro to establish a streamlined workflow for producing recipe videos. The result? A consistent and visually cohesive style that elevated fooodlove’s content.

fooodlove file organization within Figma

Lessons learned

Fooodlove was a crash course in wearing multiple hats. From design and development to SEO and analytics, this project expanded my skill set in unexpected ways. Here are a few key takeaways:

  • Know your audience: Designing for a specific target group ensures relevance and usability.
  • Embrace new skills: From SEO strategies to Google Analytics, I acquired tools that have become invaluable in other projects.
  • Iterate with purpose: Data-driven decisions helped balance innovation with audience familiarity.

Results and Impact

The redesigned fooodlove.com has been a resounding success, attracting thousands of unique visitors each month. Social media engagement has surged, and the blog has even ventured into YouTube, reaching new audiences. The improved user experience, coupled with visually stunning content, has cemented fooodlove’s position as a go-to destination for Mediterranean recipes.

Looking ahead

While the website has come a long way, the journey isn’t over. With a roadmap full of exciting features, fooodlove continues to evolve, and I’m thrilled to be part of its growth. Here’s to more delicious challenges ahead!

fooodlove.com
Tasty food blog featuring easy Greek and Mediterranean-inspired recipes.
Hold on... there’s more