Works

En 1988 Nike tenía un serio problema: Michael Jordan quería abandonar la marca. Era la estrella del momento y estaba insatisfecho con los modelos de calzado que habían hecho para él.

Phil Knight llamó a Tinker Hatfield, quien propuso una solución sencilla y compleja a la vez: diseño. Creó los icónicos Air Jordan III y Michael quedó fascinado.

Desde entonces sus leyendas crecieron a la par: Tinker como diseñador y Jordan como atleta, que ese año ganó el concurso de clavadas de la NBA con las nuevas zapatillas en sus pies.

«Un diseño básico siempre es funcional, pero un gran diseño cuenta una historia» -Tinker Hatfield.

Inspirados en esta frase, entre otros temas, fue que iniciamos el proyecto de rediseño para Innvictus®, marca líder en ropa y tenis exclusivos quien tenía un gran reto al rediseñar su sitio web ecommerce, al llevar a sus visitantes a realizar una compra en el contexto de una experiencia digital amigable y eficiente.

Trabajando de la mano del cliente y con muchos aprendizajes que más a detalle comentamos debajo, el resultado superó cualquier expectativa al incrementar la tasa de conversión al 100% de lo cuál fuimos muy privilegiados al sumar una parte del rompecabezas para hacer del rediseño de Innvictus® un sitio exitoso.

«Nos alegró mucho saber acerca del éxito del rediseño del sitio de Innvictus, logrado definitivamente por todas las partes involucradas.

Y esa satisfacción viene en parte, del reconocer que en los proyectos digitales el éxito depende de muchos factores, combinación de marca, producto, tecnología y evidentemente, un buen diseño de experiencia digital, cuestión que se logró con creces en el rediseño de Innvictus» – David Gtz, Project Leader en el rediseño & UXD.

Rediseñar un sitio web implica realizar una deconstrucción analítica de los elementos que le componen en todos los niveles. Mientras lo hacíamos, imaginamos conceptos que nos ayudaran a proyectar la personalidad de la marca de forma natural a través de una experiencia digital atractiva y amigable, siempre con el producto como héroe y centro de la historia.

Al tener el producto en el centro de la historia, los demás elementos deben «obedecer» en jerarquía, contrastes, tamaños, distribución y hacerlo lucir; recordando siempre que una buena interfaz es aquella que se desvanece ante el contenido que le precede sin crear fricciones innecesarias, si no – al contrario – guía en forma natural a las personas a concluir sus intenciones en un sitio web, en este caso la compra de un producto.

Concebir una idea es una cosa, pero llevarla a cabo es otra. Durante el desarrollo del proyecto entendimos que contar la historia era importante, pero también que no sería suficiente para pasar la prueba.

De ahí que nos enfocáramos en el diseñar una landing de detalle de producto enfocada totalmente a responder a la expectativa básica de un usuario que visita un sitio de ecommerce.

Para esto es importante no solo voltear a ver los Design Patterns, en este caso de ecommerce que nos aseguran entrar en el sentido común de las personas si no explorar ideas y ver tendencias. Aquí te compartimos un pequeño benchmarking, del archivo del recuerdo recopilado en Pixave que usamos en su momento:

“Si no está roto, no lo arregles”, reza un dicho de la sabiduría popular. El sitio web de Innvictus® ya era funcional como punto de venta, así que tuvimos que desafiar el aforismo y ser muy precisos en sus áreas de oportunidad para realmente traer valor a la mesa.

Para nosotros en Nett esto representaba una gran responsabilidad. El proyecto nos obligaba no solo a mejorar la imagen y proyección de marca en el sitio web respetando los niveles de conversión, sino también a que uno estuviera en servicio de lo otro, es decir, incrementándolos.

Más allá de proponer ideas innovadoras, éramos conscientes de que teníamos que crear valor tanto para el usuario como para la marca. En ese sentido, dar en el clavo significaba complementar funcionalidad con diseño en beneficio de los objetivos comerciales.

Para llevar el proyecto a buen puerto en términos de la integración con la plataforma fue valioso sentir la confianza por parte del cliente. Gracias a esto nos sentimos en la libertad de explorar y proponer todo tipo de ideas, aún y con los desafíos comerciales detrás y las restricciones que la plataforma pudiera tener.

Fue también fundamental que el diseñador de la interfaz, especialista en su campo, esbozara cada detalle de animación y cada interacción en el sitio para no dejar espacios a la interpretación.

Por un lado, era indispensable enriquecer la propuesta de valor con ideas creativas que estuvieran a la altura del proyecto. Por el otro, también era necesario entender la naturaleza de la plataforma para saber qué ideas sí podían ejecutarse y cuáles no.

Trabajar en equipo nos permitió hacer una transición transparente entre lo que se propone y lo que finalmente se lleva a cabo en la etapa de edición de experiencia de usuario, interfaz y front end. Así minimizamos el número de cambios, ineficiencias y esfuerzos adicionales producto de correcciones al momento de la implementación.

Antes del silbatazo inicial sabíamos que contábamos con lo necesario para armar un proyecto exitoso. Igual había nervios, como los de un jugador antes de salir a la cancha, o los de un aficionado que espera paciente en la grada del estadio.

Pero confiamos en nuestras habilidades. Nos concentramos en crear una experiencia digital que transmitiera un mensaje por sí misma, y favorecimos al usuario para que pueda tomar una decisión de compra informada y de acuerdo con sus necesidades.

A través de ello generamos valor para la marca Innvictus® no solo en el imaginario de su mercado, sino en una métrica medible que nos permite asegurar que este proyecto es un caso de éxito: cuando el cliente nos informó que la tasa de conversión se había incrementado en un 100%, supimos que habíamos ganado el partido.

Nos enorgullece el éxito de Innvictus® y poder ser parte del mismo. El caso nos demuestra que el diseño de un sitio web es crucial para el ecommerce, y que, citando a Tinker Hatfield, un diseño básico siempre es funcional, pero un gran diseño cuenta una historia.

Quick Facts

• 36 Ux / Ui Mockups
• Wireframes en InVision
• Diseño de Interfaz en InVision
• Etapas del proceso: Diseño de Experiencia de Usuario, Arquitectura de Información, Diseño de Interfaz, Desarrollo de Front End, QA
• Herramientas utilizadas: Xmind, Airtable, Sketch, Basecamp, Slack & Coffee .. a lot! ☕️

Team

• Eduardo Martínez: Diseñador de Interfaz
• Jabel Márquez: Front End Designer
• David Gutiérrez: User Experience Designer, Art Direction, Project Leader