En este artículo, explicaré el proceso por el que pasé para rediseñar el sitio web de Nuvyyo.

Sobre el proyecto

¿ Qué es Nuvyyo ?

Nuvyyo es una empresa canadiense que ofrece soluciones de transmisión de TV, incluidos sus populares productos Tablo DVR, que permiten a los usuarios ver y grabar transmisiones de TV en vivo en varios dispositivos.

¿Por qué rediseñar Nuvyyo?

Un día, mientras navegaba por Internet, encontré un artículo en Verge.com que hablaba de una revolución en la industria de la transmisión de televisión. El artículo destacó a Nuvyyo como una empresa líder en el campo, con ideas innovadoras. Además, supe que la compañía había sido adquirida recientemente por SCRIPPS por $14 millones. Esto despertó mi interés y decidí visitar el sitio web de Nuvyyo para obtener más información sobre sus productos.

Desafortunadamente, encontré que el sitio web era básico y estaba mal diseñado, carecía de una comunicación efectiva de los beneficios de los productos de Nuvyyo para los clientes potenciales. Específicamente, el diseño del sitio web estaba desactualizado y no transmitía de manera efectiva la naturaleza innovadora y progresista de la empresa.

Algunos problemas que descubrí

• Diseño visual obsoleto que no reflejaba la naturaleza innovadora y progresista de la empresa.
• Contenido limitado y mal organizado , lo que dificulta que los usuarios encuentren información.
• Desorden visual y falta de jerarquía visual , lo que dificulta la distinción de secciones importantes.
• Secciones importantes como Acerca de nosotros y Equipo de la empresa comprimidas en un diseño de una sola página .
• Breve mención de los productos y beneficios de la empresa , lo que dificulta que los clientes potenciales entiendan su valor.

Objetivo del proyecto

El objetivo del proyecto era renovar el sitio web obsoleto y mal diseñado en uno visualmente atractivo y moderno . Además, la información del sitio web debía reestructurarse y presentarse de manera clara y organizada para mejorar la experiencia del usuario.

Proceso de diseño

Comencé el proceso de rediseño analizando minuciosamente el sitio web de Nuvyyo. Revisé cada sección del sitio y extraje todo el contenido, lo que me ayudó a comprender mejor las intenciones principales del sitio web.

En el segundo paso, busqué inspiración y referencias estudiando la UI, la UX y la Arquitectura de la Información (IA) de varios sitios web, incluidos competidores directos e indirectos. Esto me permitió obtener una comprensión integral de las tendencias de diseño actuales y las mejores prácticas de la industria.

Después de finalizar la visión general del sitio web, comencé a planificar cómo debería organizarse la información. Para hacer esto, comencé a dibujar diseños aproximados. Encuentro que anotar mis ideas en papel me ayuda a explorar una amplia gama de posibilidades y generar múltiples variaciones de mis conceptos.

Ahora profundicemos en la parte más importante de este estudio de caso

Diseños finales

Página de destino

Ahora dividiré la página de destino en diferentes secciones y discutiré cada una. Para empezar, echemos un vistazo a la sección principal del héroe.

• A primera vista, en el antiguo sitio web de Nuvyyo, quedó claro de inmediato que el diseño estaba desactualizado. Un problema importante observado fue que el sitio web no lograba transmitir la naturaleza innovadora de sus productos de manera efectiva.
• Además, la propuesta de valor no estaba clara , y el estilo y texto de la CTA principal eran confusos , lo que me llevó medio segundo identificarlo.
• Como primer paso, decidí establecer un objetivo para la página de inicio. Opté por un estilo de tema degradado oscuro para la página de inicio e incluí una imagen de héroe de una ciudad urbana futurista, ya que mostraría la naturaleza innovadora de la empresa.

• El diseño anterior tenía el encabezado de navegación principal ubicado en la parte inferior de la sección principal, lo que podría haber confundido a muchos usuarios. Si bien es bueno romper las reglas por el bien de la innovación, en este caso, no había una intención clara detrás de la decisión de diseño. Por lo tanto, decidí moverlo a la parte superior de la sección principal para brindar una experiencia de usuario más intuitiva. Además, agregué pruebas sociales al mostrar los logotipos de los socios de Nuvyyo, lo que puede ayudar a establecer la confianza y la credibilidad con los clientes potenciales.

• Hice algunos cambios en la navegación superior del encabezado al agregar un botón de contacto y un enlace de navegación desplegable del producto. En el diseño anterior, todos los enlaces estaban dirigidos a navegar a diferentes secciones de la página, ya que el sitio web era un sitio web de una sola página. Sin embargo, debido a la gran cantidad de contenido del sitio web, era crucial presentar la información claramente a los usuarios. Por lo tanto, decidí convertir secciones importantes en páginas separadas. Descubrí que este enfoque también es eficaz en otros sitios web de empresas de la competencia.
• También modifiqué el enlace de navegación del producto a un enlace desplegable, lo que permite a los usuarios navegar fácilmente a través de los diferentes productos que ofrece la empresa.

En la siguiente sección, agregué una sección que destaca las soluciones y los beneficios de los productos de la empresa. Esta información puede ayudar a los usuarios a determinar rápidamente si el producto es relevante para sus necesidades. Para que el contenido sea más fácil de escanear y comprender, coloqué íconos relacionados encima de los encabezados de cada beneficio.

Sección de productos

El siguiente paso fue presentar los últimos productos. El sitio web anterior tenía una descripción de un párrafo, pero quería brindar más detalles. Decidí incluir solo los detalles de los últimos productos ya que la mayoría de los clientes estarían interesados ​​en la tecnología más nueva e innovadora. En el diseño anterior, solo había una descripción del producto, que la mayoría de las personas dudarían en leer, ya que generalmente escanean la página. Por lo tanto, decidí agregar características destacadas en viñetas visuales clásicas debajo de la descripción para brindarles a los visitantes una idea de las características únicas del producto.

En el diseño anterior, las imágenes de los productos eran menos llamativas, así que las reemplacé con imágenes de nuevos productos. Además, el botón "Más información" estaba mal diseñado, con un estilo de fuente en cursiva y un color menos contrastante. Agregué un nuevo estilo con un icono de flecha a la derecha. El ícono an ayuda a los usuarios a identificar rápidamente el propósito del botón.

Sección de testimonios

El diseño anterior tenía tres testimonios colocados al azar debajo de cada sección importante del sitio web. Esta era una forma extraña de colocar testimonios, ya que los visitantes prefieren ver todos los testimonios en un solo lugar, que es como se diseñaron otros sitios web a los que me referí. Además, el antiguo diseño testimonial tenía una imagen borrosa como fondo, lo que hacía que el texto fuera poco claro e inconsistente. Entonces, decidí hacer que el diseño testimonial sea mínimo con más énfasis en la cita del cliente. También agregué un botón de carrusel en el lado derecho para que los visitantes puedan buscar otros testimonios sin tener que desplazarse por toda la página como lo hacían en el sitio web anterior.

Preguntas frecuentes y sección de pie de página

Uno de los principales inconvenientes del antiguo sitio web era la ausencia de una sección de preguntas frecuentes. Es evidente que los visitantes tendrán algunas preguntas después de recorrer todo el sitio web. Para solucionar este problema, agregué una sección de preguntas frecuentes en la parte inferior del sitio web, justo encima del pie de página. Diseñé los estados colapsados ​​y expandidos de la lista de acordeón de preguntas para que sea más fácil de usar.

En el diseño anterior, había algunos elementos innecesarios fuera del pie de página, como el mapa. Además, los datos de contacto de la empresa se colocaron encima del pie de página. Por lo tanto, decidí combinar ambas piezas de contenido en un solo pie de página. En lugar del mapa, solo pongo la dirección de la empresa, que transmite el mismo mensaje.

Acerca de la página

Como mencioné durante el análisis del sitio web anterior, decidí mover la sección " Acerca de" y "Gestión" , que estaban presentes en la página de destino, a una página separada de "Acerca de" .

• Mi idea principal para esta página era presentar los antecedentes, los valores y el equipo de Nuvyyo a los visitantes. La sección Acerca de es una parte esencial de cualquier sitio web y puede influir en gran medida en la percepción que tiene un usuario de una marca. Comencé creando un encabezado de introducción principal para la página.
• A continuación, expliqué la historia de cómo comenzó Nuvyyo y cómo lograron el éxito. Esta sección es crucial para generar confianza con los clientes.
• Las siguientes dos secciones en la página acerca de son las secciones "Valores centrales" y "Equipo central" . La sección de valores fundamentales es donde la empresa puede comunicar su misión, creencias y lo que la hace única a los clientes potenciales. Esto ayuda a los visitantes a comprender los objetivos y valores de la empresa.
• Por otro lado, la sección Core Team proporciona información sobre las personas que son responsables del éxito de la empresa . Al mostrar a las personas detrás de la marca, humaniza a la empresa y ayuda a construir una conexión con los clientes potenciales.

• En el diseño anterior, la sección de carrera era demasiado breve. El contenido importante, como la cultura laboral y las ofertas de trabajo, se comprimió en una pequeña sección de la página de destino, sin una jerarquía clara o un botón CTA para guiar a los visitantes. Además, había información limitada sobre los beneficios de trabajar con el equipo de Nuvyyo.

• Para diseñar esta página, busqué en los sitios web de diferentes empresas para ver cómo presentaban su sección de carrera. Después de analizar varios sitios, decidí comenzar con una sección principal de introducción e incluí un botón de CTA "Buscar vacantes" para alentar a los visitantes a explorar oportunidades laborales en Nuvyyo.
• La siguiente sección proporciona una descripción general de cómo es trabajar en Nuvyyo, incluida información sobre la cultura y el entorno de la empresa. Esta sección va seguida de un mensaje de video del CEO, que agrega un toque personal y hace que la empresa se sienta más transparente y accesible. Para complacer a los visitantes que no tienen mucho tiempo, también incluí un breve mensaje escrito con citas destacadas del video.
• En la siguiente sección, agregué los beneficios profesionales de trabajar en la empresa. Destaqué los beneficios importantes en secciones pequeñas, para que los visitantes puedan escanear rápidamente todos los beneficios importantes.
• La sección final de esta página fue la más importante, que es la sección "Vacantes actuales" . Aquí es donde la empresa muestra sus ofertas de trabajo disponibles y proporciona información sobre ellas. Diseñé esta sección en forma de tabla, con roles de trabajo y ubicaciones colocados uno al lado del otro en columnas separadas. En mi investigación, descubrí que los buscadores de empleo buscan principalmente roles y ubicaciones de trabajo, después del salario, cuando buscan trabajo. Al final de cada fila de trabajo, agregué un botón "Solicitar ahora" para que los solicitantes de empleo soliciten rápidamente el puesto.
• Además, agregué una opción de filtro a la sección de listado de trabajos, que permite a los solicitantes de empleo restringir su búsqueda de trabajo seleccionando el puesto de trabajo deseado. Esta función les ahorra tiempo y esfuerzo al buscar manualmente ofertas de trabajo irrelevantes.

• Creo que la sección del blog es esencial para Nuvyyo debido a su producción e investigación innovadoras y vertiginosas. Dado que Nuvyyo es una empresa muy centrada en la investigación, esta sección definitivamente ayudará a la empresa a compartir historias internas de experimentos y desarrollos con sus clientes.
• Convertí la sección principal de esta página en un artículo destacado para indicar su naturaleza interactiva.
• Transformé el encabezado de héroe normal en un enlace de texto en el que se puede hacer clic para que los visitantes puedan leer los artículos destacados haciendo clic en él . Debajo de esto, se puede acceder a los blogs recientes en el orden de las últimas versiones.

aprendiendo

Estas son las lecciones que aprendí durante este proyecto.

• Este proyecto fue mi primer proyecto de rediseño personal. Este proyecto me enseñó la importancia de analizar los aspectos de UI y UX de un sitio web en la etapa inicial del proceso de diseño.
• Mientras trabajaba en este proyecto, comprendí cómo usar de manera efectiva el principio del espacio en blanco para mejorar el atractivo visual de un diseño y reducir la carga cognitiva para los usuarios.