03 / 04
Henri Bendel
Helping shoppers create a bag that reflects their style.
Ayudando a crear un bolso que refleje el estilo de cada persona.
- ClientCliente
- Henri Bendel, with Sawyer Effect
- Henri Bendel, con Sawyer Effect
- My roleMi rol
- Led the design of the personalization experience, desktop and mobile
- Lideré el diseño de la experiencia de personalización, desktop y móvil
- MethodsMétodos
- Stakeholder interviews, benchmark research, persona, sketching, UI design, interactive prototypes
- Entrevistas con stakeholders, benchmark, persona, bocetos, diseño UI, prototipos interactivos
- LaunchLanzamiento
- June 2018
- Junio 2018
01Project overviewResumen del proyecto
Henri Bendel wanted shoppers to personalize bags from its Influencer Collection with more than 120 accessories.
Henri Bendel quería que sus clientas personalizaran bolsos de su Influencer Collection con más de 120 accesorios.
Working with Sawyer Effect, I led the design of the personalization app experience for desktop and mobile. It launched in June 2018.
Trabajando con Sawyer Effect, lideré el diseño de la app de personalización para desktop y móvil. Se lanzó en junio de 2018.
02Problem statementEl problema
Make a large selection of accessories easy to explore without losing sight of the bag being personalized.
Hacer fácil de explorar una gran selección de accesorios sin perder de vista el bolso que se está personalizando.
Shoppers needed to browse options, understand how accessories looked together, and keep track of their selections and total price. The experience also needed to work across desktop and touch devices while maintaining Henri Bendel's visual identity.
Las clientas necesitaban explorar opciones, entender cómo se veían los accesorios juntos y llevar control de su selección y del precio total. La experiencia también debía funcionar en desktop y dispositivos táctiles, respetando la identidad visual de Henri Bendel.
03Research and insightsInvestigación e insights
I started with stakeholder interviews and benchmark research to understand the brand's goals and explore how the personalization experience could work. I also created a persona for the intended audience: young, fashion-conscious shoppers who were active on social media and interested in expressing their personal style.
Empecé con entrevistas a stakeholders y benchmark para entender los objetivos de la marca y explorar cómo podía funcionar la personalización. También creé una persona para la audiencia: compradoras jóvenes, interesadas en la moda, activas en redes sociales y con ganas de expresar su estilo.
Keep the creation visible
La creación siempre visible
The bag preview needed to stay central so shoppers could see their choices in context while exploring accessories.
La vista previa del bolso debía quedarse al centro para ver cada elección en contexto mientras se exploraban accesorios.
Make a large selection easier to navigate
Una gran selección más fácil de navegar
With more than 120 accessories, clear categories helped shoppers browse different types of customization.
Con más de 120 accesorios, las categorías claras ayudaban a explorar los distintos tipos de personalización.
Connect creativity with purchase decisions
Unir creatividad y decisión de compra
Show both the personalized bag and the selected items and total price, so shoppers understand what they are adding as they build.
Mostrar el bolso personalizado junto con los artículos elegidos y el precio total, para entender qué se agrega mientras se crea.
04ProcessProceso
I began with sketches to explore the relationship between accessory navigation, the bag preview and the selection summary. These explorations helped translate the project requirements into a layout that supported browsing and customization together.
Empecé con bocetos para explorar la relación entre la navegación de accesorios, la vista previa del bolso y el resumen de selección. Estas exploraciones ayudaron a traducir los requerimientos en un layout que uniera exploración y personalización.
I then developed the visual design and interactive prototypes, exploring drag-and-drop interactions, persistent previews, and ways to save or share a creation. Desktop and mobile layouts addressed how these elements could fit different screen sizes.
Después desarrollé el diseño visual y prototipos interactivos, explorando drag-and-drop, vistas previas persistentes y formas de guardar o compartir una creación. Los layouts para desktop y móvil resolvieron cómo acomodar estos elementos en distintos tamaños de pantalla.
The prototypes were prepared for user testing.
Los prototipos se prepararon para pruebas con usuarios.
05SolutionSolución
The design brought accessory browsing, customization and purchase information into one experience. The numbers match the callouts on the screen above.
El diseño unió la exploración de accesorios, la personalización y la información de compra en una sola experiencia. Los números corresponden a las marcas en la pantalla de arriba.
Browse by category
Explorar por categoría
Accessories were organized into categories, giving shoppers a way to explore the collection without viewing every option at once.
Los accesorios se organizaron en categorías para explorar la colección sin ver todas las opciones a la vez.
Preview the personalized bag
Vista previa del bolso personalizado
A prominent preview showed the bag with its selected accessories, keeping the shopper's creation at the center of the interface.
Una vista previa destacada mostraba el bolso con sus accesorios, manteniendo la creación al centro de la interfaz.
Customize through direct interaction
Personalizar con interacción directa
The desktop design included drag-and-drop for adding accessories to the bag. Mobile layouts adapted the browsing and preview areas for a smaller screen.
En desktop se incluyó drag-and-drop para agregar accesorios al bolso. En móvil se adaptaron las áreas de exploración y vista previa a una pantalla más pequeña.
Keep selections and pricing clear
Selección y precio claros
A summary displayed the added items and total price, connecting the visual creation with the products selected for purchase.
Un resumen mostraba los artículos agregados y el precio total, conectando la creación visual con los productos a comprar.
Share the creation
Compartir la creación
An option to share the personalized design supported the project's focus on self-expression and social engagement.
Una opción para compartir el diseño apoyaba el enfoque del proyecto en la autoexpresión y la interacción social.
06ImpactImpacto
My contribution
Mi aporte
I translated the brand goal into a shopping flow that connected browsing, visual customization and purchase information. The design work covered desktop and mobile, from early sketches through interactive prototypes.
Traduje el objetivo de la marca en un flujo de compra que conectaba exploración, personalización visual e información de compra. El trabajo de diseño cubrió desktop y móvil, de los primeros bocetos a prototipos interactivos.