Bienvenido

Carlos Zubeldia · Product Designer

[000]

Carlos Zubeldia
Ecommerce / Coffee shopEcommerce / Coffee shop

From research to design system: how I built Ascaso's shopping experience — clearer and more consistent across the whole store.De la investigación al sistema de diseño: así construí la experiencia de compra de Ascaso, más clara y coherente en todo el e-commerce.

About the projectSobre el proyecto

Ascaso is a premium coffee machine manufacturer known for combining industrial craftsmanship, innovation and contemporary design.

The project focused on rethinking key areas of the e-commerce experience, with the goal of helping users better understand the product catalogue, compare models and make confident purchasing decisions while maintaining the brand's premium positioning.

Ascaso es un fabricante premium de máquinas de café conocido por combinar artesanía industrial, innovación y diseño contemporáneo.

El proyecto se centró en repensar las áreas clave de la experiencia de e-commerce, con el objetivo de ayudar a los usuarios a comprender mejor el catálogo, comparar modelos y tomar decisiones de compra con confianza, manteniendo el posicionamiento premium de la marca.

My roleMi rolProduct DesignerProduct Designer
DurationDuración8 Weeks8 semanas
IndustryIndustriaE-commerceE-commerce

What I worked onQue trabajé en el proyecto

UX AuditAuditoría UXBenchmarkingBenchmarkingUI DesignDiseño UIE-commerceE-commerceInformation ArchitectureArquitectura de la información
Ascaso e-commerceE-commerce de Ascaso

ChallengeEl reto

The existing experience provided access to a wide range of products, but users faced challenges when exploring the catalogue, comparing models and understanding the differences between product categories.La experiencia existente daba acceso a una amplia gama de productos, pero los usuarios tenían dificultades para explorar el catálogo, comparar modelos y entender las diferencias entre categorías de producto.

The goal was to simplify product discovery, improve navigation and create a clearer purchasing journey without compromising the premium perception of the brand.El objetivo era simplificar el descubrimiento de producto, mejorar la navegación y crear un recorrido de compra más claro sin comprometer la percepción premium de la marca.

Understanding Ascaso's brand ecosystemEntendiendo el ecosistema de marca de Ascaso

Before designing the e-commerce experience, I analysed Ascaso's existing digital ecosystem to understand how the brand communicated its values, products and positioning across different touchpoints.Antes de diseñar la experiencia de e-commerce, analicé el ecosistema digital existente de Ascaso para entender cómo la marca comunicaba sus valores, productos y posicionamiento en los distintos puntos de contacto.

The analysis focused on identifying recurring visual patterns, navigation structures, content hierarchy and brand attributes that could be translated into the shopping experience.El análisis se centró en identificar patrones visuales recurrentes, estructuras de navegación, jerarquía de contenido y atributos de marca que pudieran trasladarse a la experiencia de compra.

This phase helped establish a clear connection between the corporate website and the future e-commerce platform, ensuring consistency while adapting the experience to the specific needs of online purchasing.Esta fase ayudó a establecer una conexión clara entre la web corporativa y la futura plataforma de e-commerce, asegurando la coherencia y adaptando a la vez la experiencia a las necesidades específicas de la compra online.

01. TypographyTipografía

For the coffee lovers, since 1962.Para los amantes del café, desde 1962.

There are things that cannot be described in words. Like the aroma of freshly ground coffee. Or the sensation evoked by a good design. It is a moment, an instant, a feeling, sometimes incomprehensible.Hay cosas que no se pueden describir con palabras. Como el aroma del café recién molido. O la sensación que evoca un buen diseño. Es un momento, un instante, un sentimiento, a veces incomprensible.

Libre Caslon
Aa
HeadingTitulares
Poppins
Aa
TextTexto

02. Colour palettePaleta de color

#E2DCD3
#4A94FF
#000000
#5A5A5A

UsageUso

70 %NeutralsNeutros
25 %WarmsCálidos
5 %AccentAcento

03. Product photographyFotografía de producto

Product photography 1Product photography 2Product photography 3

04. Layout & compositionMaquetación y composición

Layout & composition 1Layout & composition 2

05. Navigation patternsPatrones de navegación

Navigation patterns 1Navigation patterns 2
Navigation patterns 1Navigation patterns 2

06. UI componentsComponentes de interfaz

UI components 1UI components 2
Go to STEELIr a STEEL Go to STEELIr a STEEL
UI components 1UI components 2UI components 3UI components 4UI components 5UI components 6UI components 7

Design referencesReferencias de diseño

Learning from industry leaders and curated references.Aprender de líderes del sector y referencias seleccionadas.

To better understand user expectations and identify proven interaction patterns, I analysed a selection of e-commerce experiences recommended by the client alongside additional references discovered during the research phase.Para entender mejor las expectativas de los usuarios e identificar patrones de interacción probados, analicé una selección de experiencias de e-commerce recomendadas por el cliente junto con otras referencias descubiertas durante la fase de investigación.

Rather than replicating existing solutions, the goal was to understand how leading brands approached product presentation, navigation and purchasing journeys. These insights helped shape key areas of the Ascaso experience while maintaining a visual language aligned with the brand's identity.En lugar de replicar soluciones existentes, el objetivo era entender cómo las marcas líderes abordaban la presentación de producto, la navegación y los recorridos de compra. Estos insights ayudaron a definir áreas clave de la experiencia Ascaso manteniendo un lenguaje visual alineado con la identidad de la marca.

01

La Marzocco

www.lamarzocco.com

Key takeawayConclusión clave

Product storytelling and homepage composition. The visual hierarchy, use of large product imagery and editorial layout helped define the structure of the Ascaso e-commerce homepage. This reference demonstrated how premium products can be presented through storytelling while maintaining a clear path to exploration and purchase.Storytelling de producto y composición de la home. La jerarquía visual, el uso de imágenes grandes de producto y la maquetación editorial ayudaron a definir la estructura de la home de Ascaso. Esta referencia demostró cómo presentar productos premium mediante storytelling sin perder un camino claro hacia la exploración y la compra.

La Marzocco
02

Lelit

www.lelit.com

Key takeawayConclusión clave

Product card structure, information hierarchy and colour selector interactions. This reference provided valuable insights into how technical products can be organised and compared efficiently. The product card layout, content prioritisation and colour selection patterns inspired several interaction decisions within the catalogue experience.Estructura de la tarjeta de producto, jerarquía de información e interacción con el selector de color. Esta referencia aportó claves sobre cómo organizar y comparar productos técnicos de forma eficiente. La tarjeta de producto, la priorización de contenido y los patrones de selección de color inspiraron varias decisiones de interacción del catálogo.

Lelit
03

Create

https://www.create-store.com/es/

Key takeawayConclusión clave

Minimal product presentation and clean purchasing experience. Create's approach demonstrated how a reduced visual language can help users focus on the product itself. The product detail page became a key reference for simplifying information, reducing visual noise and creating a more intuitive shopping experience.Presentación de producto minimalista y experiencia de compra limpia. El enfoque de Create demostró cómo un lenguaje visual reducido ayuda a centrar la atención en el producto. La ficha de producto se convirtió en una referencia clave para simplificar la información, reducir el ruido visual y crear una experiencia de compra más intuitiva.

Create

Key findingsConclusiones clave

Editorial product presentationPresentación editorial de producto

Leading brands use large imagery and thoughtful composition to highlight product craftsmanship and reinforce premium positioning.Las marcas líderes usan imágenes grandes y una composición cuidada para destacar la artesanía del producto y reforzar el posicionamiento premium.

Clear product hierarchyJerarquía de producto clara

Information is prioritised to help users quickly understand product differences, features and value.La información se prioriza para que el usuario entienda rápido las diferencias, características y el valor de cada producto.

Minimal purchasing experienceExperiencia de compra minimalista

Reducing unnecessary visual elements helps users focus on decision-making and product exploration.Reducir los elementos visuales innecesarios ayuda al usuario a centrarse en la decisión y en explorar el producto.

Focused product storytellingStorytelling de producto enfocado

Every touchpoint contributes to communicating the brand's values through content, visuals and interaction design.Cada punto de contacto contribuye a comunicar los valores de la marca a través del contenido, lo visual y el diseño de interacción.

Information architectureArquitectura de la información

Organising a complex catalogue into a clearer shopping experience.Organizar un catálogo complejo en una experiencia de compra más clara.

One of the main challenges was helping users navigate a broad product catalogue while understanding the differences between machines, accessories and complementary products.Uno de los principales retos era ayudar a los usuarios a navegar por un catálogo amplio entendiendo las diferencias entre máquinas, accesorios y productos complementarios.

To create a more intuitive experience, I restructured the information architecture, defining clearer navigation paths, product groupings and content relationships.Para crear una experiencia más intuitiva, reestructuré la arquitectura de la información definiendo rutas de navegación, agrupaciones de producto y relaciones de contenido más claras.

The goal was to reduce cognitive load and help users find the right product more efficiently.El objetivo era reducir la carga cognitiva y ayudar a los usuarios a encontrar el producto adecuado de forma más eficiente.

Ascaso
Site map and user flowsSitemap y flujos de usuario

Final designDiseño final

Designing a premium shopping experience for coffee enthusiasts.Diseñando una experiencia de compra premium para los amantes del café.

Ascaso

Key design decisionsDecisiones clave de diseño

Editorial Product PresentationPresentación editorial de producto

Leading brands use large imagery and thoughtful composition to highlight product craftsmanship and reinforce premium positioning.Las marcas líderes usan imágenes grandes y una composición cuidada para destacar la artesanía del producto y reforzar el posicionamiento premium.

Clear Product HierarchyJerarquía de producto clara

Information is prioritised to help users quickly understand product differences, features and value.La información se prioriza para que el usuario entienda rápido las diferencias, las características y el valor de cada producto.

Minimal Purchasing ExperienceExperiencia de compra minimalista

Reducing unnecessary visual elements helps users focus on decision-making and product exploration.Reducir los elementos visuales innecesarios ayuda al usuario a centrarse en la decisión y en explorar el producto.

Premium Product StorytellingStorytelling premium de producto

Large imagery, generous spacing and editorial layouts were used to highlight product craftsmanship and reinforce Ascaso's premium positioning.Imágenes grandes, espaciado generoso y maquetaciones editoriales para destacar la artesanía del producto y reforzar el posicionamiento premium de Ascaso.

Ascaso 1Ascaso 2

Clear Product DiscoveryDescubrimiento de producto claro

The catalogue structure was designed to help users quickly understand product categories and find the right machine for their needs.La estructura del catálogo se diseñó para que el usuario entienda rápido las categorías y encuentre la máquina adecuada a sus necesidades.

Ascaso 1Ascaso 2

Product ConfigurationConfiguración de producto

Users could explore different finishes and configurations while maintaining a simple and intuitive purchasing journey.Los usuarios podían explorar distintos acabados y configuraciones manteniendo un recorrido de compra simple e intuitivo.

Ascaso 1Ascaso 2Ascaso 3

Smooth Checkout ExperienceCheckout fluido

A simplified checkout flow reduces friction and allows users to complete their purchase through sign in, registration or guest checkout, creating a fast and intuitive purchasing experience.Un flujo de checkout simplificado reduce la fricción y permite completar la compra con login, registro o como invitado, creando una experiencia de compra rápida e intuitiva.

Ascaso 1Ascaso 2
Ascaso 1Ascaso 2

ImpactImpacto

The project transformed Ascaso's digital ecosystem into a more cohesive shopping experience, improving product discovery, comparison and purchase confidence while preserving the brand's premium character.El proyecto transformó el ecosistema digital de Ascaso en una experiencia de compra más cohesionada, mejorando el descubrimiento de producto, la comparación y la confianza en la compra, y preservando el carácter premium de la marca.

ReflectionsReflexiones

This project demonstrated how thoughtful information architecture, clear product communication and strong visual storytelling can work together to create a more intuitive and engaging e-commerce experience.Este proyecto demostró cómo una arquitectura de la información cuidada, una comunicación de producto clara y un storytelling visual sólido pueden trabajar juntos para crear una experiencia de e-commerce más intuitiva y atractiva.

Another projectsOtros proyectos

Let’s connectConectemos

Let’s build something meaningful together.Construyamos algo juntos.