RESUMEN
El briefing inicial
Uptak requería el lanzamiento de su nueva plataforma de comercio electrónico en Shopify con un
diseño visualmente potente y altamente personalizable. El punto de partida fue una propuesta
visual
estática concebida por una agencia externa. Mi labor en la agencia BAIANAI consistió en actuar
como el
puente entre el concepto visual y la realidad técnica.
Como diseñadora UX/UI y desarrolladora Front-End, asumí la responsabilidad de auditar y
reestructurar la propuesta inicial en Figma, expandir la experiencia a pantallas responsive,
diseñar un sistema de componentes atómicos escalables y desarrollar el tema personalizado en
Shopify desde cero,
asegurando
la total autonomía del cliente para gestionar su tienda.
PLANTEAMIENTO
El Problema y los Objetivos
El principal desafío radicaba en la viabilidad técnica y de experiencia de usuario de la propuesta inicial. El diseño heredado carecía de lógica para una visión en pantalla, comportamientos responsive estructurados y consistencia entre los estilos de sus elementos.
Objetivos clave:
- Optimización y Adaptación Web: Traducir una propuesta visual estática a un entorno web real en Figma, resolviendo inconsistencias y adaptando la experiencia a resoluciones responsive (Mobile, Tablet, Desktop).
- Creación de un Sistema de Diseño: Unificar estilos, tipografías, colores y componentes para garantizar la consistencia visual a lo largo de las nuevas páginas desarrolladas.
- Autonomía y Escalabilidad en Shopify: Diseñar y programar una arquitectura modular basada en bloques configurables en Shopify, permitiendo al cliente duplicar y editar secciones de manera intuitiva sin necesidad de tocar código.
BENCHMARKING
Investigación
Dado que el concepto estético general ya estaba predefinido, la fase de investigación se centró
en un
análisis competitivo (benchmarking) enfocado en la interacción responsive y la conversión
eCommerce,
ya que las páginas críticas del flujo de compra no habían sido diseñadas.
Estudié cómo las marcas líderes del sector estructuraban sus flujos de usuario, páginas de
producto (PDP) y
carritos desplegables. El objetivo fue identificar las mejores prácticas de usabilidad para
aplicarlas al expandir
el mapa del sitio y diseñar las nuevas páginas requeridas, asegurando que la estética audaz de
la marca no interfiriera con una experiencia de usuario fluida y accesible.
SISTEMA DE DISEÑO
Estrategia de Diseño y Sistema Atómico
Para resolver la falta de consistencia, realicé una deconstrucción del diseño inicial en Figma, transformándolo en un sistema de diseño atómico.
Puntos clave:
- Unificación de Estilos: Definí tokens de diseño claros para colores, espaciados y una escala tipográfica estricta que garantizara la legibilidad.
- Diseño de Componentes e Iteración Responsive: Creé componentes maestros en Figma con variantes dinámicas para abordar el comportamiento responsive de elementos complejos como tablas de producto, menús de navegación y layouts de colecciones.
- Expansión de la UI: Diseñé las páginas secundarias y flujos de usuario faltantes, asegurando que cada nueva vista se integrara de forma orgánica con la identidad visual aprobada.
DESARROLLO FRONT-END
Liquid y Modularidad en Shopify
El core del proyecto fue la traducción del sistema de diseño de Figma a código
nativo dentro de
un tema personalizado de Shopify (utilizando Liquid, HTML, CSS y JavaScript).
Delimité con precisión qué propiedades debían ser fijas para mantener la consistencia de
marca (como
fuentes y alineaciones base) y cuáles debían ser flexibles para el cliente (textos, imágenes de
fondo, enlaces
y visibilidad de botones). De esta forma, el usuario final obtuvo una interfaz tipo
drag-and-drop robusta completamente editable.
CONCLUSIONES
Resultados y aprendizaje
El proyecto concluyó con el lanzamiento exitoso de la web de Uptak, cumpliendo rigurosamente los estándares visuales de la marca y las necesidades de autogestión del negocio.
Principales Aprendizajes y Conclusiones:
- Diseño Orientado al Desarrollo: Consolidé mi habilidad para crear archivos de Figma limpios, con auto- layouts precisos y documentación técnica exhaustiva, lo que reduce a cero las dudas durante la fase de maquetación.
- Sistemas de Diseño Escalables: Aprendí el valor de estructurar sistemas pensando no solo en el estado actual del producto, sino en cómo usuarios sin conocimiento técnico interactuarán y expandirán la plataforma a largo plazo.
- Visión de Producto Extremo a Extremo: Este caso demuestra mi capacidad para liderar proyectos desde la fase conceptual de UI hasta la entrega del código final en producción, asegurando que no se pierda ni un ápice de calidad de diseño en el proceso de desarrollo.
