Warmth at Scale

UI design and user flow mapping for Mexico's largest bakery chain's first eCommerce platform

Pastelerías Suspiros is Mexico's largest bakery chain, present in family celebrations across the country for decades (birthdays, quinceañeras, graduations, etc.) This was their first eCommerce platform, which meant solving a genuinely complex UX challenge from scratch: how do you present a nationwide franchise's products when pricing and availability vary by city and location?

Working with the Design Lead at LKMX on my first project there, I built the UI proposal and user flow map that addressed both the emotional identity of the brand and the logistical complexity of its franchise model, modernizing the visual experience while preserving the warmth and Mexican identity that made Suspiros what it was.

Design Process

suspiros_digitalWireframes1

Digital Wireframes

suspirosDesignProcess_loFiPrototype1

Low-fidelity prototype

suspiros_keyViews1

Key views

Final mockup

Final mockup

Then & Now

'Home' page.

'Chocolate Club' page.

Impact

One interaction became the talking point of the redesign: a "rain effect" animating cake ingredients falling across the screen: unexpected, delightful, and distinctly Suspiros that drove notable increases in website traffic and social media engagement.

The effect was eventually retired due to lazy loading performance issues on mobile and older operating systems, but its brief run demonstrated that the right visual surprise in the right context can do the work of a marketing campaign. The tradeoff it revealed (delight versus performance) is one I've carried into every animation and interaction decision since.

What happened after

The client retained the fonts and color palette from our redesign. However, the current site (now managed without our involvement) has introduced carousels organized by location-based promotions, abandoned the colorful product palette, and reintroduced the search, category, and shopping cart pain points the redesign had resolved.

The regression is instructive: Good UX doesn't maintain itself, it requires ongoing stewardship.