Garambullo
This case study explores the development of a website for Garambullo, a coffee shop in San Miguel de Allende.
- Role
- UX/UI Designer
- Timeline
- March - April 2024
- Skills
- Web Design, Accessibility
- Tools
- Figma, Figjam
Nestled in the central region of Mexico, San Miguel de Allende is a picturesque getaway that captures the hearts of tourists and locals alike. Even prior to being declared a UNESCO Protected Heritage Site, the city is not a stranger to a myriad of visitors that come looking for experiences of all kinds. Whether it be marveling at the Mexican baroque architecture, traversing the intricate maze that is the Mercado de Artesanias, or simply window shopping through the art galleries stationed throughout town, there are many ways of spending your day. And when visitors need a quick pause from their sightseeing day, San Miguel de Allende hosts plentiful culinary destinations.
Just steps away from Mercado Ignacio Ramirez, you should find Garambullo Fonda Gourmet, a culinary urban oasis that caters to patrons looking for an elevated breakfast experience. Their menu spans from traditional Mexican breakfast cuisine to a fusion of modern delight, in addition to having pastries sourced from local bakeries.
Garambullo is also pet friendly, granted that said furry companions heed the likes of Oma, the resident cat of the shop.
San Miguel de Allende has over 2 million tourists yearly, thus being able to cater to the needs of Garambullo's website users meant having a greater understanding of what their needs look like. Our primary audience is users on the go, which stressed the importance of mobile first. In addition, having dual language options for Spanish and English users alike.
Building an Identity for Garambullo
Garambullo, the term, stems from the berry that grows from the nopal/cacti, thus when making the identity of the website, we wanted to hone in on the natura of the concept. For the mood board we had the following:
"A vibrant fusion where industrial rusticity meets Mexican baroque. The palette juxtaposes earthy, organic tones of linen, moss, and wood with bold accents of magenta and coral, creating a space that feels both grounded and alive with color inspired by local flora."
Mood board for Garambullo
Style Guide
The visual identity was meticulously crafted to create a seamless transition from the physical shop to the digital experience. The typography pair of Arvo and Quicksand was selected to directly mirror the fonts used on the storefront and menu, ensuring immediate brand recognition and cohesion.
The color palette is built on a foundation of authentic brand cues and accessible contrast. The vibrant Magenta (#890058), established as the brand's primary color in their existing marketing, serves as the key accent. This was balanced with earthy, organic tones pulled directly from the moodboard: a warm Linen (#D4CCC7), a deep Moss (#4A5711), and a rich, near-black Charcoal (#150F21).
Wireframes
We mapped out the primary functions of the web application, honing in on menu offerings, reservations and private events page, and invoice request page.
Prototype
Check out the prototype for Garambullo, featuring ample touch targets, high-contrast labels, and a clear hierarchy to enable effortless navigation and selection on mobile devices.