Fuerzas impulsoras del diseño: un estudio de caso de rediseño de sitio web

¿Cuándo es el momento más adecuado para hacer un rediseño web?

¿Quién no se ha encontrado con un sitio web que parece desactualizado y abandonado? Como el armazón de un camión averiado abandonado en el desierto, claramente intacto durante muchos años.

Los sitios web se renuevan por todo tipo de razones. Lamentablemente, muchas empresas no se dan cuenta de que su sitio web necesita un rediseño y se quedan atrás cuando los rivales obtienen una ventaja competitiva al mejorar el suyo y, como resultado, aumentan sus conversiones.

Un error frecuente que cometen las empresas es no considerar desde el principio lo que podría suceder si las necesidades de su sitio web se vuelven más complejas y, como consecuencia, se encuentran en una situación difícil y potencialmente costosa cuando necesitan expandirlo. Además, factores importantes como la optimización de motores de búsqueda (SEO), SSL (que afecta la clasificación y la seguridad) y la compatibilidad con dispositivos móviles (que afecta la clasificación y la conversión) a menudo pueden terminar siendo descuidados.

Los nuevos diseños de sitios web a menudo ocurren debido a un cambio de liderazgo en la parte superior donde se instituye una nueva dirección de marca y se incorporan nuevas personas de marketing de marca. Al evaluar el sitio web de la empresa, se horrorizan al saber que tiene una UX horrible y descubren que falta una cantidad considerable de contenido deseable. Llegando a la conclusión de que es simplemente un "sitio web de folleto" mal elaborado que no ofrece la "voz de la marca" o las conversiones que la empresa está buscando, el consenso es que está listo para el cambio. Es hora de renovar el sitio web.

Una renovación del sitio web para una empresa automotriz

Es importante mencionar que este estudio de caso de rediseño de sitio web automotriz no es un rediseño oficial encargado. No tengo información privilegiada sobre la empresa, su estrategia digital o la industria automotriz en general. Simplemente estoy usando la industria automotriz como un caso de prueba para un estudio de caso de rediseño de sitio web.

En este estudio de caso, repasamos el proceso de rediseño del sitio web de la marca automotriz croata, Rimac Automobili. Rimac es una marca que comenzó con un simple concepto de automóvil y desde entonces se ha expandido hasta convertirse en una gran empresa de fabricación de componentes. Como muchas nuevas empresas, la empresa comenzó con una idea que eventualmente se convirtió en algo diferente; esta expansión afectó la estructura del sitio web y cambió todo el enfoque del usuario. La demanda del mercado llevó a la empresa en otra dirección, por lo que el enfoque del sitio web también debía cambiar.

Hay muchos aspectos y ángulos diferentes a considerar para lograr una excelente solución de diseño de sitios web. A pesar del hecho de que el diseñador web anterior puede no haber tenido los recursos o el tiempo suficiente para la investigación de UX, la creación de esquemas, la creación de prototipos y las pruebas de usuario, cuando se trata de la calidad general de un diseño, incluso las primeras decisiones de diseño más pequeñas pueden tener importantes repercusiones negativas y una calidad del sitio web inferior a la óptima conducirá en última instancia a un rediseño del sitio web en dos o tres años. El resultado de esto es que, a la larga, los clientes pagan más por un sitio web de lo que creen. Una estrategia de contenido y una arquitectura de la información bien definidas son cruciales cuando se trata de un nuevo diseño de sitio web.

Cuando diseño grandes sitios web corporativos, portales de noticias y otros sitios con mucho contenido, soy un gran admirador del diseño atómico, un sistema de diseño flexible que consiste en crear todos los componentes de la interfaz de usuario que funcionarán para múltiples pantallas y situaciones imprevistas al principio. de un proyecto Aunque este estudio de caso en particular no es para un gran portal de noticias, hará que el proceso sea mucho más fácil si se configura una biblioteca de diseño de elementos de diseño atómico (un conjunto de componentes de diseño cuidadosamente considerados y bien definidos) para trabajar con luego.

Solo después de que el sitio web tenga la estrategia de contenido y la arquitectura de información adecuadas, el enfoque debe cambiar a la experiencia del usuario. Sin la estructura adecuada del sitio web, el diseño de la experiencia del usuario no tiene potencia. Quizás a primera vista el sitio web se ve bien y funciona bien, pero si no se incorpora suficiente flexibilidad, es inevitable que en algún momento la empresa deba considerar un rediseño del sitio web.

¿Por qué rediseñar el sitio web de esta empresa automotriz?

Rimac Automobili se está expandiendo y, según publicaciones oficiales, ya está en producción un nuevo automóvil conceptual llamado "Concept_One" . En el momento de este rediseño de sitio web no comisionado, su sitio web solo mostraba un automóvil, el "C_Two". No había variedad visual: el sitio web se creó a partir de dos plantillas, por lo que cada página se veía muy similar. El diseño se centró en imágenes grandes y atractivas del automóvil sin mucho más para ilustrar la calidad del automóvil C_Two : información esencial necesaria para guiar a los visitantes del sitio web hacia la decisión de comprar el automóvil.

Como dice el dicho, “Nunca tienes una segunda oportunidad para causar una primera impresión”. Es fundamental utilizar el impacto de un gran diseño para persuadir de manera efectiva a los visitantes (que, en este caso, serían en su mayoría entusiastas de los automóviles de alto rendimiento) para que compren un automóvil que cueste cerca de un millón (USD). Dichos sitios web de alta gama deben cumplir con un estándar increíblemente alto. Deben proyectar un sentido de calidad y carisma, y ​​ofrecer un alto nivel de habilidad para vender, así como un estilo convincente.

Un gran diseño de sitio web debe destacarse en un mar de sitios web similares

Un gran problema en la industria automotriz es que la mayoría de los sitios web en ese espacio tienden a tener el mismo aspecto. Aparte de los diferentes esquemas de color y las imágenes destacadas, casi parece como si estuvieran usando la misma plantilla de sitio web.

Hay muchos factores detrás de las decisiones de diseño del sitio web de una empresa automotriz, pero se debe hacer una distinción clara entre un automóvil de $ 1 millón y uno de $ 25,000 y en la forma en que se presentan.

En el espacio automotriz de alta gama, Ferrari, Lamborghini y Aston Martin tienen sitios web demasiado simples y típicamente corporativos que (en mi opinión) no ofrecen una gran experiencia de usuario.

El rango de consumo medio (Volkswagen, Toyota, Peugeot, etc.) tiene una estructura de contenido de sitio web muy similar a los ejemplos de más alto nivel mencionados anteriormente. La mayor diferencia entre las marcas de automóviles de consumo de gama alta y media es el precio, por lo que uno esperaría que Rimac con sus automóviles de gama alta tuviera un sitio web sobresaliente para reflejar esta diferencia y exhibir su costosa marca.

Las expectativas de los clientes son altas cuando visitan estos sitios web de marcas de automóviles ultra caros; es un gran compromiso financiero y, naturalmente, quieren estar seguros de que obtienen el mejor automóvil que su dinero puede comprar.

¿Por qué es mejor un Rimac que un Toyota? Mirando sus sitios web no hay mucha diferenciación entre estas dos marcas tan diferentes. ¿No debería ser esto evidente por la calidad de su sitio web?

Dirigirse a compradores de automóviles de gama alta con un excelente diseño de sitio web

Cualquier sitio web debe considerar a sus usuarios. ¿Quién es el público objetivo de este tipo de coche? ¿Qué están buscando?

Los autos de Rimac cuestan alrededor de $ 850,000 y solo se fabricarán unos pocos, lo que los califica para una etiqueta de "edición limitada". Aunque no podemos identificar con precisión el tipo de cliente que estaría interesado en comprar estos autos, podemos suponer que la mayoría de los clientes pertenecerán a la élite adinerada. ¿El sitio web de Rimac está dirigido a estos clientes de manera efectiva?

Análisis de la arquitectura de la información

En nuestro sitio web de ejemplo, pudimos ver que el primer elemento de navegación era "Concept_One" (en ese momento, era el único producto de la empresa). Desde entonces, el sitio web real ha sido actualizado. El segundo elemento de navegación es la evolución de la empresa, cómo se produjo el automóvil, mientras que el tercer elemento son los productos y servicios de la empresa. El cuarto elemento de navegación es otro producto de la empresa (bicicletas eléctricas Greyp). Los dos últimos elementos son “prensa”, que contiene comunicados de prensa, y el “blog”, ninguno de los cuales es particularmente útil ya que la mayoría de sus noticias se publican en las redes sociales.

Otro problema fue que el enlace de carrera se ocultó como un elemento de navegación secundario y menos importante y, dada la gran expansión de la empresa, representó un asunto importante. Si consideramos al usuario como el foco de las preocupaciones corporativas, veremos que en la mayoría de los sitios web de la empresa (las excepciones típicas son los sitios web corporativos/extremadamente grandes) es muy importante tener un enlace destacado de "carreras" o CTA.

El proceso de rediseño del sitio web

Imagen principal de la página de inicio antes y después

Originalmente, la intención era crear una versión más oscura y potente del automóvil. Encontré algunas imágenes del automóvil Concept_One en línea y, con un poco de "magia de Photoshop", creé la primera imagen principal para la página de inicio. La siguiente idea fue que una animación revelara lentamente el automóvil, primero el fondo, luego un contorno del automóvil, seguido de una imagen completamente renderizada.

El diseño de la página de inicio

Para la página de inicio, el concepto era definir dos áreas visuales principales: la navegación superior y la imagen del héroe del automóvil. Eso es todo. Para hacerlo minimalista pero llamativo, se eliminó todo lo innecesario. De un vistazo rápido, todas las cosas importantes son visibles; todo lo demás se movió a subpáginas dentro del sitio.

Estrategia y Diseño de Contenidos

Para tales proyectos de renovación de sitios web, también es importante diseñar el contenido, no solo la estructura del sitio y la estética visual. Dado que se trata de un rediseño de sitio web no comisionado, ofrece más libertad para experimentar, así como una flexibilidad estética donde existe la oportunidad completa de tomar nuestras propias decisiones de diseño.

El proceso es sencillo:

1. Prepare el cuerpo del texto que aparecerá en el sitio web.
2. Comunique algunos elementos de diseño, por ejemplo, detalles llamativos sobre aceleración, potencia y velocidad máxima, a través de íconos o animaciones interactivas.

Al hacer esto, no se necesitan palabras auxiliares en la interfaz de usuario y se llama la atención sobre las áreas que son más importantes para los visitantes del sitio web.

Rediseño de navegación del sitio web

La estructura de navegación del sitio web ahora se reorganiza en función de una jerarquía de importancia. Tenemos Vehículos como el primer menú desplegable en la navegación, lo que le da flexibilidad al diseño porque le permite a la empresa agregar más modelos de automóviles en el futuro.

Para brindar acceso inmediato a la página secundaria de Productos desde la página de inicio, se decidió que, en aras de la eficiencia, en lugar de crear otra página de listados de productos (en otra página web), los Productos y sus subcategorías podrían incorporarse a la página de inicio como un área desplegable y formar parte de la navegacion El diseño a continuación muestra varios productos presentados como íconos en la página de inicio cuando los visitantes hacen clic en Productos en la navegación. Para las representaciones de productos en 3D que representan el segundo nivel de Productos , recomendaría Three.js, WebGL, Canvas y Greensock, ya que son herramientas estandarizadas muy conocidas.

Páginas Secundarias dentro del Rediseño del Sitio Web

A diferencia de la página de inicio , las páginas secundarias, como las páginas Acerca de y Servicio , utilizan una cuadrícula diferente con un patrón en Z. La intención del diseño de cuadrícula diferente es brindar a los visitantes un entorno más interesante y dinámico mientras escanean estas páginas.

La idea central sigue siendo el minimalismo visual con la menor cantidad de texto posible. La gente no acude a este tipo de sitios web de automóviles para leer mucho texto, sino para obtener información de forma rápida y visual. Este fue el pensamiento detrás de las fuentes grandes y en negrita en los títulos de las páginas y el empleo de diferentes estilos de fuentes.

Es importante tener en cuenta que este tipo de rediseño del sitio web de "folleto de la empresa" es diferente del rediseño de un servicio. Un sitio web de "folleto de la empresa" tiene más que ver con la comercialización de productos. Los rediseños de sitios web orientados a servicios se inclinan más hacia la conversión de clics en conversiones y ganancias eventuales.

Conclusión

Hay varios otros artículos de blogs de diseño que recomiendan por qué es una buena idea que los diseñadores participen en proyectos de diseño no comisionados. Si desea diseñar un proyecto realmente genial, elija una idea (puede ser un sitio web, una aplicación, un producto SaaS empresarial) y resuelva un problema de diseño.

Dribbble está lleno de proyectos de rediseño conceptual no solicitados donde los diseñadores digitales tienen la oportunidad de mostrar sus habilidades de diseño. Además de brindarle un diseño genial que presenta una solución creativa al mundo, trabajar en un problema de producto "real" mostrará a las empresas y clientes potenciales cómo piensa, su proceso y su experiencia.

En mi caso, fue un gran ejercicio abordar un sitio web automotriz de alta gama porque es particularmente importante que el diseño de sitios web en este sector cumpla con un estándar excepcionalmente alto.

Sin embargo, una advertencia: antes de sumergirse y comenzar a diseñar, es una buena idea mirar hacia el futuro y considerar cómo deberá verse cualquier sitio web en particular dentro de tres años, no solo desde la perspectiva de la estética del diseño sino también del contenido. función y estructura. Es crucial que la flexibilidad incorporada sea una consideración de diseño seria. Es más fácil, más eficiente y mucho menos doloroso hacer pequeños ajustes para adaptarse a las demandas futuras cuando el sitio web o las subpáginas funcionan y son escalables.

A veces, es realmente difícil convencer a un cliente potencial para que renueve su sitio web. A menudo, los clientes son reacios a comprometerse debido a la falta de recursos, fondos o tiempo. Sin embargo, un rediseño de sitio web no solicitado es una excelente manera de mostrar el proceso de rediseño de su sitio web al mundo. ¿Y quien sabe? Es muy posible que el rediseño de su sitio web impresione lo suficiente a un cliente reacio como para que le den luz verde para un proyecto "real", donde, como beneficio adicional, ¡el diseñador recibe un pago!

• • •

Lectura adicional en el blog de diseño de Toptal:

• Los fundamentos del rediseño de sitios web: un estudio de caso
• El verdadero ROI de UX: estudios de casos de rediseño B2B
• Sacar a IKEA de su caja y rediseñarlo para 1600 millones de usuarios
• Rediseñemos Facebook: 10 inspiraciones para comenzar
• Cómo se debe diseñar CrunchBase