A Scalable Site for a Growing Business

Due Madri Restaurant Website

Homepage mockup displayed on laptop screen

Due Madri is a hip Italian sandwich shop with several locations across NYC, known for their funky personality and incredible food. Their website serves as their digital billboard – showcasing mouthwatering food photography that entices visitors to dine in, order takeout, or book catering, while communicating essential business information and their unique brand personality. It's designed to capture the energy of their hip, family-run operation and convert browsers into customers.

Overview

My Role

Web Designer, Webflow Developer

Timeline

March → May 2023

Client

Due Madri

The Team

Tools Used

Figma | Webflow | Zapier

Desktop view of top of homepage and mobile view of photo of charcuterie board — The home page, with enticing food photos

The Challenge

Due Madri is run by two married moms who are always in motion – slinging sandwiches, launching pop-ups, and scaling across NYC... all while raising two kids and a dog. They needed a site that matched their cool, vibrant energy – bold, fun, and family-oriented, never basic. With so much already on their plates, they also needed something that would be easy to learn and maintain. What’s more, they needed something FAST – they wanted to get something online before their launch.

‍

The Solution

‍

Top of the home page, and links to catering information

‍

Mobile views of the catering page, menu, and locations list — Responsive design for mobile screen sizes

‍

GIF showing scroll-triggered animations with headlines and illustrations floating into view — Subtle animations and floating illustrated elements

‍

I designed and built a dynamic Webflow site powered by CMS collections, so they can easily update menus, hours, or locations as things shift. The design direction was all about being bold and unapologetically cool:

Used their existing red and white branding plus a fresh green accent
Featured large, mouth-watering food photography from their professional shoot
Used bold, accessible typography to both look cool and stay readable
Added lightweight animations (drifting logos, spinning charcuterie boards, scroll-text) to bring energy to the page
Used AI-assisted copywriting to save them time and capture their tone

‍

Style guide showing colors, fonts, button styling, logos, and branded illustrations — Style guidelines for the website

‍

Process

We started by diving deep into mood boards of the hippest restaurant websites, then built a straightforward information architecture – almost everything on a single landing page, plus dedicated menu and catering pages. Given the tight timeline, we worked in phases: delivered a fully functional initial version in just one week so they could launch on schedule, then went back to add their professional food photography once it was ready.

‍

Three versions of low-fidelity wireframes showing options of original single-page layout — Options of wireframes

‍

Original homepage design with generic photo and opening date, and final design with real food photos — Left: the rapid preliminary build, in time for launch; right: the improved final version

‍

Development highlights:

Phase 1: Complete website build in 1 week for launch
Phase 2: Added professional food photography post-launch
Custom animations: moving text, spinning charcuterie boards, drifting logos
AI-assisted copywriting to nail their voice
CMS setup for easy menu and location updates
Responsive design to display on any device or screen size

‍

Desktop views of the locations list and decorative elements using photos and illustrations — The locations list, powered by Webflow CMS collections; decorative elements on the home page

‍

A charcuterie board that spins on scroll!

‍

Key Features

The website seamlessly integrates everything they need to run their business:

CMS-backed menu system for fast edits
Online ordering links (Toasttab, DoorDash, Uber Eats)
Embedded Instagram feed
Catering info page
Email collection form
Hours, location, and contact info—styled with personality

‍

Desktop views of the contact information, menu page with item photos, and links to catering page — Contact info, the menu page, and links to the catering page

‍

Desktop and mobile views of the catering page, showing large photo of charcuterie board — The catering information page

‍

GIF showing scroll-triggered animation with marquis text moving left and right, and photos floating upwards — Scrolling marquis text and floating photos

‍

Impact

We delivered a website that's as cool and dynamic as Due Madri themselves – one that grows with their business without requiring them to become web developers. Most importantly, it doesn't look basic – it looks like your new favorite lunch spot in NYC.

Mobile views of many pages including home, Our Work, About, and Updates,