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.
As a product designer, I'm constantly seeking exciting projects that push me to think beyond conventional boundaries. Fooodlove was one such endeavor that truly tested my skills. From conceptualizing and developing the website, every step of the process was an enriching journey. Working with new technologies and facing unfamiliar challenges, I felt like an explorer venturing into uncharted territory. Nonetheless, I embraced the opportunity to expand my knowledge and expertise, and I'm proud to say that I successfully navigated the obstacles presented by this project.
Fooodlove is a highly acclaimed food blog that has captured the hearts of food enthusiasts worldwide. With a strong focus on the exquisite flavors of the Mediterranean, this blog specializes in sharing an array of simple, yet incredibly delicious recipes. What sets Fooodlove apart is its captivating short-form videos that not only showcase the step-by-step cooking process but also immerse viewers in the vibrant culinary world of the Mediterranean. From mouthwatering appetizers to delectable main courses and tantalizing desserts, Fooodlove is a delightful culinary journey that will leave you craving for more.
The blog has a long history, starting as a side project and gradually gaining traction over the years. In 2021, Fooodlove underwent a significant transformation with the launch of a custom mobile-first website, elevating the user experience for its audience. With a thriving social media following and thousands of monthly visitors, Fooodlove has successfully captivated food enthusiasts with its irresistible recipes and visually stunning content.
My work at fooodlove
You might think that completely revamping a website is akin to starting from scratch, like facing a blank canvas. However, based on my experience, that couldn't be further from the truth. When a website has been around for a significant amount of time and its visitors have become familiar with every aspect it offers, making drastic changes can risk alienating them. In my opinion, the best approach is to evolve and modernize the existing design by leveraging data and insights to inform your decisions. This way, you can strike a balance between innovation and maintaining the loyalty and comfort of your audience.
With over 70% of fooodlove's visitors coming from mobile devices, it became evident that the functionality of the website on mobile is of utmost importance. This realization prompted me to prioritize the mobile user experience, ensuring that every aspect, from navigation to information layout, is optimized for small screens.
Although fooodlove may not be a large-scale project, I meticulously crafted a comprehensive style guide in Figma. This involved creating components and establishing reusable elements such as colors, typography, and icons. This meticulous planning proved invaluable during the subsequent development phase.
This project truly put my front-end coding skills to the test and required me to don a larger developer hat as I embarked on building the entire thing on my own. Through extensive reading and countless trials and errors, I ultimately utilized ExpressionEngine and the Bootstrap framework to breathe life into my mockups. Once the website was up and running, one of my proudest achievements was creating an automation that seamlessly generated a web story for each recipe! Unlike other food blogs that manually piece together Google's Web Stories, fooodlove's web stories are automatically crafted based on the content of each recipe, streamlining the process effortlessly.
Having completed the design and development phase, my next endeavor was to immerse myself in the realm of food photography and video editing. Exploring the art of visual storytelling through video was a new experience for me, and it opened up a world of possibilities. Through countless trials and various techniques, I managed to create comprehensive templates that streamlined the entire process of publishing a new recipe. By utilizing Figma for image assets and Final Cut Pro for video editing, I established a consistent set of components that not only saved time during production but also ensured a cohesive style across all recipe videos.
Lessons learned
Working on fooodlove.com has provided me with valuable insights into product design, development, and teamwork. It has taught me the significance of understanding the target audience and designing for their specific needs. Collaboration and continuous skill enhancement have also been instrumental in my journey.
At fooodlove, I've had the opportunity to take on multiple roles, spanning from design and development to creating a recipe production workflow. While I may not consider myself a master of food photography and videography at a professional level just yet, I have undoubtedly gained a wealth of knowledge and continue to learn.
Beyond honing my development skills, this project has also deepened my understanding of SEO. Discovering and targeting specific keywords for recipes that have the potential to rank highly on Google's search results has become a skill I never anticipated exploring. Additionally, mastering the capabilities of Google Analytics in a way that translates into actionable insights has proven to be one of the most valuable skills I've acquired, which I now apply to other projects as well.
Conclusion
After months of dedication and teamwork, fooodlove.com has unveiled its fresh new design and enhanced user experience. Serving thousands of unique visitors every month, the blog has witnessed a remarkable surge in followers and engagement, showcasing the success of our hard work. Not only has fooodlove expanded its reach through various social media channels, but it has also ventured into the vibrant world of YouTube, captivating an entirely new community of content enthusiasts. I couldn't be more thrilled with the evolution of this project, and I eagerly anticipate further developments as we bring even more exciting features from its roadmap to life.
