Páginas 404

Ajustando voz y tono

Proyecto propio para curso de UX Writing.

Rol: UX writer.

Páginas 404

Punto de partida

La página que muestra el error 404 dentro de una web es una oportunidad única para entablar una conversación con el usuario. En ella, la voz de la marca se hace más presente que nunca y su capacidad para suavizar este punto de fricción a través del tono adecuado puede marcar la diferencia entre una buena y una mala experiencia.

El reto

Diseñar la página 404 de tres compañías con distintas voces.

Planteamiento de trabajo

Para la realización del reto escogí tres organizaciones diferentes con un elemento en común: su interacción con el usuario es muy valiosa para aportar valor añadido y construir su marca de cara al mundo.

Logo Freepik

Freepik es una startup que ofrece recursos gráficos gratuitos y de pago para diseñadores, creativos, etc. La marca invita a sus usuarios a desarrollar su propia creatividad a partir de los recursos que les proporciona.

El mayor ecommerce de productos para mascotas de España. Su objetivo es ayudar a los dueños de mascotas a disfrutar de ellas ofreciéndoles los productos de calidad que necesita sin importar su ubicación geográfica y en un plazo de tiempo récord.

Logo what3words

Sistema de geolocalización que permite ubicar cualquier punto en el mapa con una frase de tres palabras, fácilmente compartible y con una precisión de 3 x 3 metros, incluso sin conexión a internet.

Cada voz de marca define su manera de dirigirse al usuario y cada situación exige un tono específico coherente con esa voz.

Voz y tono

Para establecer un marco teórico sólido sobre el que trabajar, utilicé los arquetipos de Jung. Con ellos definí las tres voces de marca a partir de las que establecería el tono adecuado para cada página 404:

Logo Freepik

Arquetipo de marca: El creador

Personalidad de marca: Freepik es tu amigo lleno de recursos que siempre está ahí para ayudarte a plasmar ideas y desarrollar tu creatividad.

Voz: Inspiradora – Positiva – Desenfadada

Tono según contexto: Usuario confuso → Tono seguro, transmite confianza. Usuario enfadado → Tono sincero, da soluciones.

Logo TiendAnimal

Arquetipo de marca: El cuidador

Personalidad de marca: TiendAnimal ayuda a sus clientes amigos a disfrutar al máximo de sus mascotas poniendo a su disposición los productos de calidad que necesita sin importar su ubicación geográfica y en un plazo de tiempo récord.

Voz: Familiar – Protectora

Tono según contexto: Usuario confuso → Tono amistoso, da tranquilidad. Usuario enfadado → Tono informativo, aclara la situación.

Logo what3words

Arquetipo de marca: El sabio

Personalidad de marca: what3words te ayuda a localizar cualquier ubicación en el mundo por GPS con una herramienta fácil de usar en cualquier situación, incluso sin conexión a internet.

Voz: Científica – Analítica – Didáctica

Tono según contexto: Usuario confuso → Tono conciso, directo al grano. Usuario enfadado → Tono resolutivo.

Herramienta: el copy doc

Para cada uno de los proyectos elaboré sus correspondientes copy docs, con toda la información que necesitarían los equipos de UX, diseño y desarrollo para abordar los proyectos.

Las nuevas páginas 404

Después de analizar la propuesta de valor de cada marca, usando la voz de cada una de ellas y el tono adecuado a este punto de fricción específico en la experiencia de usuario, estas son las tres propuestas que elaboré para las nuevas páginas 404.

Propuesta de página 404 Freepik
Logo Freepik

➔ Transformamos la página de error en una oportunidad de marketing, dando la posibilidad al usuario de probar la herramienta Freepik Stories.

➔ Usamos el contenido (copy y elementos gráficos) para reforzar la voz de la marca.

➔ Ofrecemos al usuario la posibilidad de sacar algo útil de este error de sistema.

Propuesta de página 404 TiendAnimal
Logo TiendAnimal

Mejoramos la usabilidad ofreciendo más información sobre el error y reordenando los elementos de ayuda de una manera más lógica.

➔ Usamos el contenido (copy y elementos gráficos) para reforzar la voz de la marca.

Propuesta de página 404 what3words
Logo what3words

➔ Damos valor añadido al usuario ofreciéndole posibilidades para solucionar el error.

➔ Usamos el contenido (copy y elementos gráficos) para reforzar la voz de la marca.

Antes y después

Aquí se pueden comparar las nuevas propuestas de página 404 con los ejemplos de partida.

Después Freepik
Antes Freepik
Después TiendAnimal
Antes TiendAnimal
Después what3words
Antes what3words

Herramientas utilizadas

  • Google Docs
  • Adobe Illustrator
  • Chrome DevTools

En la mochila

En este trabajo aprendí que la coherencia en tu marca sirve para allanar el camino y que siempre, siempre, siempre hay que meterse en el pellejo de la otra persona para ver las cosas desde su perspectiva. La empatía es una gran herramienta para ayudarnos a diseñar contenidos útiles.

I am asking for your help

Otros trabajos