Mudd Puddle Coffee Roasters & Cafe
A cozy digital rebrand inspired by the warmth of a local New Paltz favorite.
Project Overview
Mudd Puddle Coffee Roasters & Café is a beloved community hub nestled in the Water Street Market in New Paltz, NY. Known for its cozy atmosphere, handwritten menus, and small-batch brews (including beer from its family-owned Yard Owl Brewery), the café is a cornerstone of local charm.
But its online presence told a different story, one that felt cold, minimal, and disconnected from the shop’s real personality. My goal was to reimagine the digital experience to reflect the café’s physical warmth, inviting energy, and community-centered mission.
Design Goals
• Introduce warmer tones and cozy design elements to reflect the in-store atmosphere
• Create a clean, functional menu system and ordering experience
• Integrate Yard Owl Brewery into the design naturally
• Refresh gift card designs to match the updated brand voice and visuals
Design Process
Visual Research
To begin, I went on a site visit to study the visual environment of the café: cozy wood accents, handwritten chalkboard menus, natural lighting, and casual courtyard seating. With these elements in mind, I created a mood board for the rebrand. These details informed a warmer, earth-toned palette, and a font pairing that could bridge the gap between modern UI and handmade charm.
I opted for a clean sans-serif typeface to balance the organic feel of the café’s handwritten brand elements. The goal was contrast, not conflict.
Initial Sketches
I began the design process with hand-drawn sketches, mapping out possible UI structures and page layouts. Starting on paper gave me the flexibility to experiment with different information hierarchies and navigation patterns without the pressure of committing to visual details too early.
Each sketch was designed with the user’s journey in mind, from ordering coffee to discovering the café’s brewery connection. These low-fidelity layouts became the foundation for the digital wireframes and early prototypes that followed.
Initial Design
In my initial visual direction, I leaned into literal coffee shop references, warm brown tones, decorative accents, and thematic iconography. While it successfully communicated what the café offered, it didn’t quite capture how it felt to be there.
The color palette felt overly muted, and the chosen typography didn’t bring enough contrast or clarity to the UI. I realized that while the concept was visually aligned with a coffee theme, it lacked the weight, polish, and personality needed to represent Mudd Puddle’s charm, especially when also considering its connection to Yard Owl Brewery.
Final Design
For the final iteration, I stripped back the coffee shop clichés and focused instead on clarity, usability, and warmth. I introduced a refined color palette that still felt cozy, but with better contrast for readability and a more modern, versatile tone.
This shift also allowed me to bring Yard Owl Brewery more fully into the brand system, using color and typography choices that felt cohesive across both the café and brewery sides of the business. I adjusted layout spacing, cleaned up the UI elements, and simplified the navigation to better reflect how customers actually use the site.
The result is a cleaner, friendlier interface that mirrors the physical space while giving users a smoother digital experience from start to finish.
Deliverables
• Interactive Figma prototype (see below)
• UI kit including revised type styles, color palette, and reusable components
• Redesigned gift cards and digital menu layouts
• Visual documentation of initial sketches and iteration
Takeaways and Next Steps
This project reminded me how crucial it is for design to reflect the spirit of a brand—not just its product. Mudd Puddleisn’t just a café—it’s a neighborhood staple, and I wanted the website to feel like an extension of that experience.
Next goals:
• Expand the website to include a calendar for events or pop-ups
• Create a store locator for beer sales from Yard Owl Brewery
• Develop a full component library to support future design flexibility
