Soy Sara Merino, diseñadora UX/UI

Miami Herbert Business School

Objetivo

Optimizar la gestión de contenidos y automatizar procesos, mejorando al mismo tiempo la accesibilidad del sitio y aplicando buenas prácticas de SEO on-page.

Desarrollo del proyecto

El proyecto, desarrollado dentro de mi etapa en Global Alumni, consistió en la maquetación completa de la web de Miami Herbert Business School en WordPress con Elementor.

El objetivo fue crear un sitio web más accesible y fácil de gestionar, aplicando criterios de usabilidad y optimización SEO desde el inicio.

Maquetación y gestión de contenidos

Durante el proyecto se implementaron plantillas flexibles en Elementor y se configuraron Custom Post Types (CPTs) para la publicación de programas y cursos, automatizando la actualización de contenidos mediante MAKE y la base de datos.

Esto permitió al equipo interno gestionar la información con mayor autonomía y mantener un diseño homogéneo en todas las páginas.

Accesibilidad y SEO

Se cuidó la semántica del código, siguiendo la metodología BEM en CSS y usando JavaScript personalizado, y se aplicaron prácticas de accesibilidad web (contraste de color, jerarquía tipográfica, etiquetas ARIA). También se trabajó el SEO on-page para mejorar la indexación en buscadores.

🌐  www.exed.miami.edu

Herramientas y metodologías

• Elementor
• Custom Post Types (CPT)
• CSS con metodología BEM
• SEO-on-page
• Accesibilidad web
• Mantenimiento web
• Airtable
• MAKE

Academia SKR

Objetivo

Rediseñar la web en base a investigación UX previa y crear de un Design System escalable.

Desarrollo del proyecto

El proyecto, desarrollado como freelance en colaboración con la agencia emergente Agencia Oh Wow!, se centró en crear una identidad visual coherente y un sistema de componentes escalables y reutilizables en Figma. Para ello, se definió un sistema de variables mediante tokens adaptados a los diferentes puntos de corte de los dispositivos y a las versiones light/dark.

Identidad visual y variables

Se eligió la tipografía, el tamaño de los textos, asi como los colores de brand y utilitarios.

Se implementaron de tokens aplicados a los modos claro/oscuro y a los breakpoints, adaptando todos los componentes del Design System -desde el más pequeño al más grande- a los distintos dispositivos.

Componentes principales

Botones, inputs y tarjetas diseñados bajo la metodología Atomic Design.

🌐  www.skr.es

Herramientas y metodologías

• Figma
• Atomic Design System
• Sistema de variables
• Protipado
• Accesibilidad web

Academia Colón Móstoles

Objetivo

Crear un diseño más accesible y práctico para mejorar la experiencia de los usuarios y facilitar la gestión de contenidos.

Desarrollo del proyecto

El proyecto se centró en rediseñar la web desde cero, partiendo de una investigación UX que permitió definir un sistema visual escalable y coherente.

La propuesta se desarrolló en Figma y posteriormente se implementó en WordPress con Elementor, logrando una web más accesible, clara y sencilla de mantener.

Diseño y maquetación

El nuevo diseño de la página web se elaboró en Figma a través de un Design System escalable basado en variables reutilizables y la metodología Atomic Design.

La maquetación en Elementor se hizo a través de plantillas, CSS y JavaScript personalizados y de Custom Post Types, que permitió actualizar de los contenidos, mejorar la accesilibidad y aplicar buenas prácticas de SEO on-page.

🌐  www.academiacolonmostoles.es

Herramientas y metodologías

• Figma
• Atomic Design System
• Sistema de variables
• Elementor
• Custom Post Types (CPT)
• SEO On-Page
• Accesibilidad web

Peluquería Que Corte!

Objetivo

Mejorar la conversión, reducir la tasa de abandono y optimizar la arquitectura y el UX writing de la página web para priorizar la confianza del cliente y los servicios especializados.

Diagnóstico de la web inicial

El diseño original se elaboró en Figma, mientras que la maquetación se realizó en HTML, CSS y JavaScript. También se creó el perfil de Google Business y se configuró Google Analytics y Hotjar para analizar su funcionamiento en el futuro.

La web original se publicó en 2024 y se ha hecho un seguimiento de su performance durante este periodo.

SOLUCIÓN: Rediseño UX/UI y estrategia de conversión

Arquitectura de la información

Se cambió la jerarquía de la secciones. La sección de Opiniones se movió al segundo bloque para combatir la tasa de abandono.

También se separó los servicios básicos de los especializados en secciones diferentes para focalizar la atención a los servicios de alto valor.

UX writing

Se usó la voz en primera persona para reforzar la calidez y la confianza de "peluquería de barrio".

Navegación y conversión

El menú inicial tenía un botón CTA a modo de ancla que llevaba a la sección de CTA de llamada. En el rediseño se sustituyó por un botón CTA de WhatsApp directo. En la versión móvil, ese botón es flotante para que esté siempre visible.

El rediseño prioriza la captación vía WhatsApp a pesar de que la opción de llamada telefónica sigue disponible en la web. Esta decisión se basa en el comportamiento del público objetivo joven y facilita la comunicación directa con la dueña del negocio.

El enlace de texto "Contacto" del menú se mantuvo para aquellos usuarios que buscan la información logística (mapa, horario), ofreciendo así dos caminos claros y distintos para los diferentes tipos de necesidad del cliente.

Design System

Se definió un Atomic Design System completo para asegurar la coherencia visual y la escalabilidad del prototipo de la página web.

Este enfoque garantiza la eficiencia en la entrega del diseño y la consistencia en el desarrollo responsive.

Documentación y prototipo

Resultados esperados

Reducción de la tasa de abandono y aumento de la tasa de clics en el CTA de WhatsApp.

Próximos pasos

Programación en HTML/CSS/JS.

🌐  www.quecorte.es

Herramientas y metodologías

• Investigación UX
• UX Writing Estratégico
• Atomic Design System
• Analítica Web
• Figma
• Mantenimiento web y hosting
• Google Business
• Gestión de redes sociales