devket
Start a project
devket
Theme
Start a project

Por Suerte

A playful ecommerce experience built around flavor, gifting, and personalized fortune cookies.

Industry
Ecommerce · Food & Beverage
Project type
Ecommerce Website
Services
Information architecture, UX/UI design, Responsive web design, Ecommerce experience design, Design system, Product presentation, Conversion-path design
The Por Suerte website shown as a showcase board — the “Every Flavor a little fortune” homepage, the Pick the perfect box pack cards, the seven-flavor grid, the custom fortune and How it works panels, the All Products page, and the Fortune Flight and Bespoke Dozen product cards.
Overview

Por Suerte is a Napa-based fortune-cookie brand built around handcrafted flavors, playful gifting, and personalized messages.

The website turns that personality into a clean ecommerce journey where visitors can discover products, explore flavors, understand how customization works, learn the brand story, and move directly toward ordering.

Challenge

The experience needed to feel more distinctive than a standard food-store template.

It had to balance strong product photography, multiple flavors and pack options, custom fortune messaging, gifting occasions, founder storytelling, press and social proof, and clear ordering paths — all while staying light, warm, and easy to browse.

Devket’s role
Information architectureUX/UI designResponsive web designEcommerce experience designDesign systemProduct presentationConversion-path design
Solution

The site uses a soft visual system of warm neutrals, pale lavender, muted olive, charcoal, rounded cards, and product-led photography. The experience moves naturally from brand story to packs, flavors, personalization, occasions, and order.

Warm neutrals

A soft beige foundation that keeps the product photography forward.

Pale lavender

A light secondary surface that separates sections without hard edges.

Muted olive

A grounded accent for primary ordering actions.

Rounded cards

A consistent container language across packs, flavors, and occasions.

Product-led photography

Every section leads with the cookies themselves.

Product experience

Inside the product

The Por Suerte homepage — the “Say it with a cookie, take it as a fortune” hero, Pick Your Pack & Flavor, How it works, For every occasion, the seven-flavor grid, testimonials, and the final order CTA.

Homepage — product first, personality throughout

A lifestyle hero opens the brand, then the page moves into packs, process, occasions, flavors, reviews, and a clear final order CTA.

The Por Suerte flavor menu — the “Every Flavor a little fortune” hero, Pick the perfect box, the seven-flavor grid from Vanilla Bean to Everything Bagel, and the custom fortune section.

Flavor discovery — seven flavors, one system

The flavor menu makes the range easy to scan while keeping each cookie visually distinctive.

The Por Suerte All Products page — the filter and sort strip, the product grid with prices and order buttons, How it works, and the occasion cards.

Ordering — simple product discovery

The product page gives shoppers a clear way to browse pack types, specialty products, gifts, and custom options.

The Por Suerte About page — the “A Story Born from Sugar & Luck” hero, Crafted with Heart in Napa Valley, the founder story, the purpose cards, and the Instagram strip.

Brand story — handmade in Napa

The About page adds a human layer through the founder story, local identity, thoughtful packaging, and social content.

The Por Suerte In the News page — featured press cards from the Napa Valley Register and Domaine Carneros, the Instagram collage, and the credibility strip.

Press and credibility

The press page adds trust through local coverage and social storytelling.

The Por Suerte contact page — the “Say Hello” hero with the brand mark, the message form, the reach-us details, and three information cards for location, email, and Instagram.

Contact — simple and approachable

A short form, direct contact details, location, and social channels keep communication clear.

Key features

What makes it work

Product-led homepage

Pack and flavor discovery

Custom fortune messaging

Occasion-based shopping

Product filtering

Brand storytelling

Press and social proof

Contact and inquiry

Responsive layouts

Outcome

What changed

A cohesive digital storefront that feels as distinctive as the product itself
Customers can move from brand discovery to flavor exploration, personalization, and ordering without losing the warm, handcrafted character of the brand
The full story

Go deeper in this case study

Open the full document to read the detailed process, screens, and decisions behind Por Suerte.

Related work

Building something with similar complexity?

Start a project