view more

Anas Frutos

A complete redesign of the Anas Frutos roastery: an online store with a category-based catalog, cart, and a checkout that hands off to WhatsApp to close the sale.
Back

Anas Frutos

UX/UI
web-design
Next.js
SEO
A complete redesign of the Anas Frutos roastery: an online store with a category-based catalog, cart, and a checkout that hands off to WhatsApp to close the sale.
A complete redesign of the Anas Frutos roastery: an online store with a category-based catalog, cart, and a checkout that hands off to WhatsApp to close the sale.
Date
March 2026
Duration
6 weeks

Overview

Meet Anas, the owner of Anas Frutos. The business started with a single shop on Pedro de Valdivia, a scale, and an obsession with hand-picking every nut for complementary nutrition. That dedication grew into two stores in Providencia, with hundreds of customers who choose him every day. The catalog? Hundreds of products for every taste.

Anas served hundreds of customers every week, with two stores running at full capacity and a wide catalog of nuts, select seeds, and Arabic-origin products. But here's the thing: when you sell that much every day, there's no time left to build the brand's digital presence and position it against the competition.
No items found.

The challenge

The challenge:

The in-store experience was a world of its own, but the brand had lost touch with what was happening digitally. Its essence got buried under an endless list of products that never conveyed the quality you could feel in the store.

The problem:

Anas Frutos had a site built on a generic template — just enough to exist and bring in the occasional, passive sale. The buying experience came last. The catalog was confusing and unpolished, with no nutritional information, bulk quantities, clear prices, or recipes to discover each ingredient.

The worst part? Every sale ended in a manual WhatsApp conversation, with no checkout and no automation — limited to handling orders person to person, with long response times.

Time was the factor they needed on their side. The commercial system stayed the same; what changed was the internal operational outlook.

Our strategy

Our solution:

We activated the catalog interactively, lighting up the key touchpoints of the customer journey to drive the final conversion.

What we built:

A catalog organized by categories for hundreds of products, with search and intuitive filters. We went from “this is what we sell” to “this is exactly what you're looking for” — from a basic storefront to connecting directly with the customer's need.

The goal:

To motivate customers to explore the store, browse more products, and dare to try new ingredients alongside their usual purchases.

Our vision:

We take care of the brand so it looks clean and professional, keeping its signature and understanding its real purpose.

We built a system that works beyond just showing the product: a shopping cart with shipping costs, a checkout integrated with WhatsApp, and automations that bring order to the business and the customer experience.

A collaborative process, where the brand's vision and “soul” stayed intact throughout the build, without losing its reason for being: bringing quality nutrition and products to people looking to improve their daily diet.

Design system

The decisions
behind the result.

Next.js 15Tailwind CSS v4VercelWhatsApp CTASchema.org SEO

Color palette

#FBF7F0

Warm cream

The background breathes. It evokes the paper of a recipe book — organic, not cold.

#14110D

Deep espresso

Headlines. Earth, root, solidity. In keeping with what the brand sells.

#C2410C

Burnt orange

Primary accent and CTAs. The color of fire and market-fresh produce.

#D97706

Golden amber

Hover and highlights. It complements the orange with premium warmth.

Typography · Inter

Freshness,
direct.

Display · Bold 700

Anas Frutos SPA

Body · Regular 400

From the field to the plate.

Inter is the obvious choice — and that's exactly why it's the right one. Neutral, scalable, with the same legibility in a 72px headline as in the checkout's fine print. The typographic restraint lets the product take center stage.

SEO architecture

Schema.org · Dual GroceryStore

Two GroceryStore entities with precise geographic coordinates. AggregateRating 4.9★ with 32 verified reviews. A parent Organization entity. The result: rich snippets straight in Google Search.

Next.js SSR · Dynamic metadata

Every page rendered server-side for full indexing. Open Graph + Twitter Cards per route. Content reaches crawlers in the first byte, without waiting on JavaScript.