Diseño UI: Implementación y mejora de Alternatif D-sign / Medalleros

BENCHMARKING

El propósito de este análisis de benchmark es evaluar y comparar las características y funcionalidades de tres competidores clave en el mercado de medalleros personalizados. A través de esta evaluación, buscamos identificar las mejores prácticas, así como áreas de mejora, para aplicar estos aprendizajes en el desarrollo de la página de ecommerce para Medalleros de Alternatif D-sign.

El benchmark se enfoca en varios aspectos críticos que impactan la experiencia del usuario y el éxito del ecommerce, tales como el diseño y usabilidad del sitio web, el proceso de compra, las opciones de personalización y la experiencia en dispositivos móviles. Al examinar estos elementos, obtendremos una visión integral de cómo los competidores están abordando el mercado y qué estrategias están utilizando para atraer y retener a los clientes.

Este análisis no solo permitirá establecer un estándar de calidad para nuestro propio sitio web, sino que también proporcionará insights valiosos sobre cómo podemos diferenciar nuestra oferta y mejorar la experiencia del usuario, asegurando que Medalleros de Alternatif D-sign se destaque en un mercado competitivo.

WIREFRAMING

Tras un exhaustivo proceso de Benchmarking, que nos ha permitido analizar y entender las mejores prácticas y estrategias en el mercado, estamos listos para pasar a la fase de Wireframing.

El Wireframing es una etapa esencial en el diseño de nuestra página de ecommerce, ya que nos permite establecer una estructura clara y funcional antes de adentrarnos en el diseño visual detallado. En esta fase, esbozaremos la disposición de los elementos clave, como la navegación, los productos, y las opciones de personalización de medalleros, para asegurar una experiencia de usuario intuitiva y eficaz.

Este esqueleto de diseño nos ayudará a definir cómo los usuarios interactuarán con nuestra plataforma, cómo encontrarán y seleccionarán productos, y cómo completarán sus compras. Nuestro objetivo es crear una estructura que facilite una experiencia de compra fluida y atractiva, alineada con las mejores prácticas del mercado y las expectativas de nuestros clientes.

Tipografía
a. Elección de Tipografías:

Fuente Principal: Helvetica.
Se escoge esta tipografía por lo fácil que es acomodarla y utilizarla.

Tamaños y Estilos:

Títulos: Se usa en peso Bold con tamaños 42 para H1, 32 para H2 y 24 para H3

Texto de Cuerpo: Se usa el Peso regular en tamaño 16, en caso de necesitarlo se usa el peso light.

Textos Secundarios: En el caso de los botones usamos el peso regular en tamaño 18, para poder jugar con la accesibilidad; en el caso de los captions y subtextos usamos un peso regular en tamaño 10

Paletas de Color
a. Colores Primarios:

Colores Base: Azules

b. Colores Secundarios: Verdes

Colores Acento: Verde Limón

c. Paleta de Colores Propuesta:

Íconos
a. Estilo de Íconos:

Consistencia: Se utiliza un estilo de líneas para los íconos de la página, esto con el motivo de mantener el diseño un poco minimalista y usar éstos íconos de forma llamativa.

b. Usos:

Casa: Icono de Casa para la funcionalidad inicio (Home).
Teléfono: Icono de teléfono para la funcionalidad de contacto por teléfono.
Sobre: Icono de sobre para la funcionalidad de contacto por medio de Correo-e.
Bolsa de Compras: Icono de bolsa de compras para la funcionalidad de compra.
Ojo: Icono de ojo para hacer visible el password, este se incluyó al momento de diseñar el Log-In.

Botones
a. Diseño de Botones:

Primarios: Se usó el color azul para el acento y llamar la atención, así como para mantener la paleta de colores propuestas.

Secundarios: El color secundario se usa para llamar la atención y realizar acciones de parte del usuario Final.

b. Estilos y Efectos:

Bordes y Sombras: Se añadieron sombras para destacar el botón y Bordes para mostrar los botones en uso en la forma de accesibilidad.
Efectos de Hover: El color al momento del Hover se aclara u obscurece dependinendo de el botón y la acción realizada.

Aqui están mis diseños ya armados en Figma: