Pulseras de seguridad NFC

BuddyTag

En línea

BuddyTag fabrica pulseras de seguridad NFC para niños y personas mayores: un simple toque con cualquier móvil pone en contacto con la persona adecuada en segundos. Me entregaron su sitio anterior y lo reconstruí desde cero, ampliándolo hasta convertirlo en un sitio completo de varias páginas que resulta a la vez cercano y tranquilizador. Ya está en línea en buddytag.se, en sueco e inglés.

HTML5 y CSS3 JavaScript puro Sitio multipágina Bilingüe (SV/EN) Sistema de marca en SVG SEO y datos estructurados Seguridad reforzada Accesible Netlify Diseño UX/UI
Visitar el sitio

El reto

Un producto de seguridad tiene que lograr un equilibrio: resultar cálido y cercano, pero al mismo tiempo inspirar verdadera confianza, y hacer que una solución tecnológica se entienda al instante. El sitio debía mostrar cómo funciona la pulsera de un vistazo, dejar claras sus ventajas y guiar con delicadeza al visitante hacia la compra, sin resultar nunca frío ni clínico.

Lo que hice

Reconstruí todo el sitio y di forma a la marca a su alrededor: logotipos SVG limpios y escalables construidos sobre el rojo característico de BuddyTag, un lenguaje visual coherente y un recorrido de "cómo funciona" que hace que la tecnología se entienda en segundos. Su sitio anterior tenía apenas unas pocas páginas; lo amplié hasta convertirlo en un verdadero sitio de varias páginas: una página de inicio que cuenta una historia, secciones propias para cada público, una estructura de precios segmentada, unas preguntas frecuentes en profundidad y mucho más. El cliente escribió la mayor parte de los textos; el diseño, la estructura, la arquitectura de la información y la forma en que se despliega la historia son míos: más serenos, más seguros y coherentes desde la página de inicio hasta el más mínimo detalle. Creado en sueco e inglés, y ya en línea.

Por dentro del sitio

Es un sitio amplio, y cada parte cumple su función:

  • Una página de inicio que arranca con una situación real —un niño se pierde en una excursión escolar— y te lleva paso a paso por lo que ocurre a continuación, con un breve vídeo de presentación en un reproductor accesible dentro de la propia página.
  • Cuatro recorridos según el público —guardería, colegio, atención a mayores y particulares—, cada uno con su propio tono en una página específica de Por qué BuddyTag.
  • Precios segmentados: una página de precios que se ramifica en páginas a medida para cada público, de modo que colegios, guarderías, residencias y compradores particulares solo ven lo que les concierne.
  • Unas preguntas frecuentes en profundidad, organizadas por temas claros: cómo funciona, la tecnología, privacidad y RGPD, materiales, para quién es, pedidos y en qué se diferencia de un reloj con GPS.
  • Una página "sobre nosotros" que presenta a las personas detrás del producto, una página de clientes con las primeras opiniones de colegios piloto y una página de contacto con un formulario funcional y protegido contra spam, además de la política de privacidad, una amable página de agradecimiento y una página 404 propia.

Cada página existe en sueco e inglés, tanto el texto como las imágenes.

Por debajo

Lo que no se ve trabaja tanto como lo que sí se ve:

  • Más fácil de encontrar en Google. El sitio está construido tal y como a los buscadores les gusta leerlo —señales claras en cada página, un sitemap completo y direcciones web limpias—, así que BuddyTag tiene opciones reales de posicionarse bien y aparecer cuando alguien busca seguridad para niños o personas mayores. Además, los enlaces muestran el título y la imagen correctos al compartirse en redes sociales o en un mensaje.
  • Rápido en cualquier móvil. Imágenes optimizadas, tipografías servidas desde el propio sitio y nada innecesario cargándose de fondo hacen que las páginas aparezcan enseguida, incluso con mala conexión. Los visitantes no se cansan ni se van, y Google también premia con mejor posicionamiento a los sitios rápidos.
  • Seguro y privado por diseño. Unos ajustes de seguridad estrictos protegen el sitio y a quienes lo visitan, sin ningún tipo de rastreo: justo lo que se espera de una marca centrada en la seguridad y la privacidad de los niños. Los sitios seguros también inspiran más confianza, tanto a los visitantes como a Google.
  • Sueco e inglés, al instante. Todo el sitio —palabras e imágenes— cambia de idioma con un solo toque, de modo que los colegios internacionales y las familias de habla inglesa disfrutan de la misma experiencia cuidada que el resto.
  • Funciona para todo el mundo. Se puede usar por completo con el teclado y con lectores de pantalla, así que ningún visitante queda excluido; y ese mismo código limpio y bien estructurado ayuda además a los buscadores a entender el sitio.
  • Las consultas se gestionan con seguridad. El formulario de contacto lleva protección contra spam integrada y un aviso de privacidad claro, y los mensajes llegan directamente a BuddyTag sin pasar por ningún servicio externo.
  • Listo para crecer. Incluso puede guardarse en la pantalla de inicio del móvil como una app, y está construido de forma lo bastante ordenada como para añadir nuevas páginas y funciones más adelante sin empezar de cero.

De lo que estoy más orgulloso

De coger un producto de seguridad serio y darle un sitio que se siente genuinamente cercano y humano, logrando al mismo tiempo que la tecnología se entienda en apenas unos segundos.

Pantallas seleccionadas — escritorio y móvil

buddytag.se
Página de inicio de BuddyTag en un navegador de escritorio, desplazándose por toda la página
Inicio · Escritorio
Página de inicio de BuddyTag en un teléfono, desplazándose por toda la página
Inicio · Móvil
buddytag.se/why
Página «Por qué BuddyTag» en un navegador de escritorio, desplazándose por toda la página
Por qué BuddyTag · Escritorio
Página «Por qué BuddyTag» en un teléfono, desplazándose por toda la página
Por qué BuddyTag · Móvil

El sitio original — antes de mi rediseño

El rediseño ya está en línea. Las capturas de arriba muestran el sitio tal y como es hoy; abajo se ve el diseño original que me contrataron para sustituir.

buddytag.se · original design
Diseño del sitio web original de BuddyTag, antes del rediseño
El sitio original (antes)
← Volver al portfolio