Este caso de estudio se centra en el diseño de la landing page de una aplicación nativa para iOS dedicada a la presentación y comercialización de granolas saludables. El objetivo principal fue crear una interfaz atractiva y funcional que combinara estética, consistencia visual y accesibilidad, dentro de un marco de diseño flexible y escalable.

El trabajo se desarrolló en Figma, implementando un sistema de variables que permitió gestionar de manera eficiente los modos Day y Night. Gracias a ello, se logró mantener la coherencia visual en ambas versiones de la interfaz.

Se diseñaron y documentaron componentes responsives aplicando Auto Layouts, con el fin de asegurar que la interfaz se adaptara de manera fluida a distintas resoluciones y dispositivos.

Además, todo el diseño se desarrolló siguiendo las Human Interface Guidelines de Apple, asegurando que la experiencia de usuario estuviera alineada con los principios de usabilidad propios de iOS. Esto permitió generar una interfaz intuitiva y familiar, reduciendo la fricción en la navegación.

Un aspecto especialmente relevante de este caso de estudio fue la atención dedicada a la accesibilidad. Se analizaron cuidadosamente los contrastes de color y combinaciones tipográficas para cumplir con los estándares de la normativa WCAG (Web Content Accessibility Guidelines), garantizando que la landing resultara inclusiva y accesible para usuarios con diferentes capacidades visuales.

En conjunto, este caso de estudio refleja un proceso de diseño donde la estética, la funcionalidad, la accesibilidad y la coherencia con el ecosistema iOS se integran para ofrecer una experiencia digital sólida, clara y adaptable a las necesidades del usuario.

Link a Figma

Tokens base, semantics y usables

Tokens Base

Colores puros, no tienen ningún significado ni asociación. Sirven para relacionarlos con los semantics tokens que ya tendrán una funcionalidad en el sistema. Distribuirlo de este modo como base semantics y usable también sirve para tener 3 niveles de afectación. De más grande a más específico.

Tokens semantic

Definen un propósito de elementos base del sistema. (text icons, backgrounds, buttons, cta, dividers) Aquí los colores ya tienen una funcionalidad y es donde se definen los modos light y dark que afectarán a todo el sistema.

Tokens usable

Aquí se asignan los tokens semánticos en cada componente y heredan el comportamiento dark y light de semantics. Tienen un uso específico. De este modo se puede modificar el color de un componente en concreto sin tener afectaciones en todo el sistema si se detecta la necesidad.

Desarrollo de la interfaz HMI (Human-Machine Interface) para múltiples proyectos de automoción, garantizando experiencias de usuario coherentes, intuitivas y alineadas con los estándares del sector.

• Creación de vistas y mantenimiento de bibliotecas de componentes utilizando Sketch y Figma, asegurando la consistencia visual, la escalabilidad y la eficiencia en el diseño.
• Gestión de la iconografía como Icon Master, asegurando la correcta implementación en los sistemas, así como el cumplimiento de la normativa europea R121 en materia de usabilidad y seguridad.
• Colaboración constante con equipos de UX, desarrolladores y project managers para asegurar la correcta implementación de las vistas y la alineación con los objetivos del proyecto.
• Elaboración de propuestas de mejora para interfaces, enfocadas en la usabilidad, la accesibilidad y la estética, con el objetivo de optimizar la experiencia del usuario final.
• Gestión y mantenimiento de librerías de recursos, incluyendo exportaciones y versionado, utilizando GitHub.
• Creación y actualización de componentes y sistemas de diseño, promoviendo la coherencia y la reutilización en todos los proyectos.
• Uso de Jira como herramienta de gestión de proyectos para el seguimiento de tareas, la documentación de requerimientos y la coordinación del flujo de trabajo.
• Comunicación constante con Product Owners y stakeholders para asegurar la correcta priorización y ejecución de las tareas.

Durante mi etapa en Bertrandt, además de mis responsabilidades como diseñador HMI, formé parte del equipo de Concepto UX, participando en la definición de flujos de usuario y en la elaboración de propuestas de mejora con un enfoque escalable, aplicable a todas las marcas del grupo Volkswagen.

Por motivos de confidencialidad, los procesos de diseño no pueden ser mostrados públicamente.

Actualmente formo parte del equipo de producto digital de Viajes Para Ti, S.L., una empresa especializada en turismo y ocio online. Allí colaboro en el diseño y la mejora de cuatro marcas líderes en su sector:

• Esquiades.com – portal de referencia en viajes de esquí y montaña
• Buscounchollo.com – especialistas en escapadas y vacaciones al mejor precio
• Amimir.com – reservas de hoteles
• Jump2spain.com – experiencias y viajes por España

Mi rol dentro del equipo

En mi día a día participo en todas las fases del proceso de diseño de producto, desde la investigación inicial hasta la entrega final a desarrollo:

1. Ideación y propuesta de mejoras

• Desarrollo hipótesis y planteo soluciones de diseño basadas en la investigación.
• Trabajo estrechamente con el equipo de desarrollo para asegurar que las propuestas sean técnicamente viables y puedan implementarse de forma ágil.

2. Trabajo en Agile

• Formo parte de un equipo multidisciplinar que sigue metodología Agile/Scrum, gestionando tareas y prioridades a través de Jira.
• Esto me permite iterar rápidamente, recoger feedback y ajustar el diseño de forma continua.

3. Diseño de interfaces y Design System

• Trabajo en Figma, creando y manteniendo un design system escalable y consistente para las cuatro marcas.
• Desarrollo componentes responsive que se adaptan a diferentes dispositivos y resoluciones, asegurando una experiencia de usuario coherente en desktop, tablet y móvil.
• Me ocupo tanto del mantenimiento del sistema como de la creación de nuevos elementos que puedan reutilizarse en el futuro.

4. Entrega y soporte a desarrollo

• Entrego diseños completos y pulidos, con documentación clara para facilitar la implementación.
• Creo flujos de usuario, wireframes y prototipos navegables que ayudan al equipo a visualizar la experiencia antes de pasar a producción.

5. Creatividades y landings de campaña

• Diseño creatividades para newsletters.
• Creación de landings para campañas promocionales.

Algunos ejemplos de views de las Apps y design system.

• Master
• Tokens
• Atoms
• Organisms

Este caso de estudio en desarrollo está centrado en la experiencia de usuario (UI) y en la implementación de microanimaciones en los CTA’s, con el objetivo de hacerlos más funcionales y aportar valor al usuario mediante feedback visual claro que refuerce la interacción y muestre los cambios de manera intuitiva.

El proyecto incluye el diseño y prototipado de las siguientes funcionalidades clave:

• Onboarding
• Login / Registro
• Pedidos
• Checkout
• Edición de perfil
• Wish list
• Galería de productos y especificaciones técnicas

En el siguiente enlace se puede explorar el proceso completo de diseño de la aplicación, que abarca la biblioteca de componentes, wireframes de baja y alta fidelidad, así como el prototipo interactivo.

Grupo Lober es una pyme con más de 15 tiendas en el área metropolitana de Barcelona. Durante mi etapa en la empresa, me encargué de gestionar la comunicación digital a través de Mailchimp, diseñar y ejecutar campañas promocionales offline, crear folletos, carteles y banners para la web, así como redactar contenidos para el blog corporativo. Esta experiencia me permitió combinar habilidades de diseño gráfico, redacción y marketing, adaptándome a las necesidades de cada campaña y proyecto. A continuación, se muestran algunos ejemplos de banners y trabajos realizados para su sitio web.