San Lorenzo Foods
San Lorenzo Foods: Transforming the Digital Experience to Reflect the Excellence and Tradition of Premium Italian Cuisine
Project Overview:
The San Lorenzo Foods website is a beautifully designed, fully responsive platform showcasing premium Italian culinary products. The website focuses on providing an immersive user experience with its elegant design, easy navigation, and seamless online shopping integration. Key features include advanced SEO, performance optimization, and WordPress integration for easy content management, all aimed at delivering a modern, high-performance digital experience that reflects the brand’s commitment to quality and tradition.
Challenges:
- The previous platform lacked personalization features, leading to a high bounce rate.
- Limited scalability for new products and features.
- Inefficient navigation hindered the user experience.
Objectives::
- Build an intuitive user interface for seamless customization.
- Improve user experience and increase conversion rates.
- Ensure scalability for future product additions.
Our Solution
We adopted a user-centric design approach, starting with discovery sessions to identify client pain points and audience expectations.
Technologies/Tools:
- Figma
- React.js
- Node.js
- Express
- WordPress
- Advanced Custom Fields
- WP Rocket
- Yoast SEO
- Selenium
- Postman
Figma: A robust tool for creating detailed wireframes and high-fidelity mockups. Figma facilitates collaboration among team members and stakeholders, allowing for real-time feedback and iterative improvements. Its component-based design system ensures consistency across all pages
React.js: A JavaScript library used for building dynamic and highly responsive user interfaces. React's component-based architecture ensures scalability and codereusability. It was chosen for its ability to deliver a seamless user experience with fast rendering.
Node.js and Express: Node.js powers the backend with its event-driven, non-blocking I/O model, making it efficient for handling concurrent requests. Express.js adds a layer of simplicity for creating APIs and managing server-side logic.
WordPress: Leveraged as a CMS for ease of content updates and management. Its intuitive admin interface allows non-technical users to make updates effortlessly while maintaining the site's integrity.
Advanced Custom Fields (ACF): Provides extended control over custom fields, enabling tailored content input forms for complex layouts. WP Rocket: A premium performance optimization plugin used to improve page load speed with caching and file compression. Yoast SEO: Helps optimize on-page SEO, ensuring the website ranks well on search engines by managing metadata, XML sitemaps, and readability analysis.
Selenium: Automated testing tool used to ensure functionality across different browsers and devices. Selenium helps identify and fix any UI or UX inconsistencies. Postman: Utilized for testing API endpoints, ensuring robust and error-free server communication.
AWS: Amazon Web Services provides reliable cloud hosting. AWS ensures the website's uptime, scalability, and security. It offers features like auto-scaling and backup solutions for optimal performance.
Process:
Discovery
Examined why the previous platform lost visitors: no personalisation, navigation that got in the way, and no room to add product lines.
Strategy & Planning
Planned a catalogue structure that scales as ranges are added, with search and filtering designed around how people shop Italian produce.
Design
Designed an elegant storefront where product photography leads and the path from browsing to checkout stays short.
Development
Built the shop with advanced search and filtering, and an online purchase flow integrated into the product pages rather than bolted beside them.
QA Testing
Tested search, filtering and checkout against the full catalogue, including the cases where a filter combination returns nothing.
Launch & Handover
Launched the store and handed over product and category management, so new ranges go live without development work.
User flow
Color Palette
Home Page
Desktop Previews
Other pages
Desktop Previews
Mobile Previews
What we did on San Lorenzo Foods
- Frontend developmentReact, Next.js and TypeScript interfaces built from design
- CMS developmentStrapi, Prismic and WordPress, headless where it earns its place
- UI and UX designProduct design and prototyping in Figma, built to be built
- QA and testingManual and automated testing on the paths that carry revenue
Let's Get Started Now!
We would love to hear from you and discuss how we can help bring your digital ideas to life. Here are the different ways you can get in touch with us.