top of page
LND.gif
Apple iPhone 11 Yellow.png

Salón Lumos Nox 

Rediseño optimizado para la experiencia móvil

El sitio web de Lumos Nox tuvo varios puntos débiles que provocaron el abandono de los usuarios. El rediseño propuesto, optimizado para dispositivos móviles primero , agiliza la arquitectura de la información al tiempo que reduce los clics innecesarios. Esto dará como resultado una experiencia de usuario más fluida y un aumento en las reservas de estilistas. 

Herramientas utilizadas

Figma Logo.png
Whimsical logo

mi ¿Por qué?

A medida que me aventuraba hacia una carrera en el espacio del diseño, comencé a practicar acercarme a los espacios digitales con la mirada de un diseñador . Sabía que mi buena amiga Twylla había creado recientemente un sitio web para su salón y lo visité para comprobarlo. Twylla y yo compartimos la misma pasión por el arte y la experiencia humana, así que decidí desarrollar este proyecto basándome en los puntos débiles que encontré al visitar su sitio. Twylla no solicitó el proyecto, pero estaba abierta a recibir comentarios cuando hablé con ella sobre cómo pensé que podríamos mejorar su experiencia en el sitio web .

Este proyecto me sirve como un trampolín para practicar el pensamiento de diseño, las metodologías de experiencia del usuario y para familiarizarme con los principios de la interfaz de usuario y las herramientas de diseño. Tenemos la intención de colaborar en las iteraciones del sitio a medida que adquiera conocimientos mientras estoy en el campo de entrenamiento y lanzarlo en el futuro una vez que desarrolle la red de ingenieros para construir el proyecto.

Down Arrows.png

el problema

El objetivo general del sitio web es hacer coincidir a los clientes potenciales con el estilista adecuado. En la versión actual del sitio, esta tarea es tediosa y probablemente no tenga éxito por tres razones principales.
 

3 points.png
The Problem
Down Arrows.png

el proceso

LSLanding.png

Mi proceso comenzó identificando el flujo de usuarios actual y qué puntos de contacto, o la falta de ellos, son problemáticos.



El primer punto de dolor se reveló rápidamente en la
falta de una llamada a la acción en la página de destino.

El segundo punto, y quizás el más desconcertante, se encuentra en la sección de reservas.

Hay una llamada a la acción, sin embargo, las instrucciones contradicen la CTA al requerir pasos adicionales para encontrar más información sobre los estilistas.
Las instrucciones llevan al visitante a dos pestañas separadas ubicadas en la barra de navegación en la parte superior de la página.

LSBooking.png

Esta página sirvió como catalizador de todo el proyecto. Pedir a sus visitantes que recuerden una serie de pasos de navegación mientras buscan información es una forma segura de perder clientes . También identifiqué problemas de accesibilidad con el contraste en estas dos primeras pantallas. Estaba emocionado de encontrar estos problemas porque confirmó que podía identificar los puntos débiles como lo haría un diseñador.

The Process
Surprised Face.png

Fue en este punto del proceso que cometí algunos errores.

Como nuevo diseñador, estaba ansioso por solucionar los problemas y salté directamente a la fase de ideación. En retrospectiva, esto significa que la mayor parte del proyecto se basa en prejuicios y suposiciones.

Habiendo aprendido esto, creo que algunas pruebas de usabilidad podrían darme datos más precisos para refinar el proyecto.

 

  • La desventaja de este método es que se pierden horas sin una investigación sólida.

  • Los aprendizajes exitosos son que pude identificar una brecha en mi proceso y también aprender a usar herramientas de diseño como Whimsical y Figma.

Lumos Nox Flow 1.png
Wireframes.png

Comencé mapeando el flujo de usuarios y bosquejando algunas ideas de estructura alámbrica.

Profundizar en esto
reveló que es posible que algunos usuarios ya conozcan a su estilista, por lo que el paso "Buscar estilista" no es necesario .

La primera iteración estuvo bien y marcó todas las casillas de funcionalidad, pero se sintió un poco mediocre. Después de un poco de discusión, decidimos que queríamos presentar el trabajo de los estilistas y crear un poco de misterio o curiosidad.

La segunda iteración logró esos objetivos agregando fotos adicionales, creando una copia intrigante y simplemente pidiendo al usuario que eligiera su viaje.

Lumos Nox Salon Project_2x-6 1.png
Lumos Nox Salon Project_2x-7 1.png
Lumos Nox Salon Project_2x-8 1.png
Down Arrows.png

el prototipo

Group 42.png

Interactuar con el prototipo

Hi-Fidelity

llave  comida para llevar

Down Arrows.png
Group.png

Aunque el proceso de diseño se enseña de forma lineal, ¡es todo lo contrario! Sin embargo, descubrí que si hubiera seguido un enfoque más estructurado del proceso y el diseño, podría haber ahorrado mucho tiempo.

carbon_search-locate.png

Las herramientas de investigación son INVALUABLES y deben ser la base de cada decisión. A medida que aprenda más sobre estas herramientas, volveré y realizaré una prueba de clasificación de tarjetas. Esta prueba será la más reveladora ya que la arquitectura de contenido es el enfoque principal del proyecto.

icons8_idea.png

Tomar la iniciativa de acercarme y trabajar en esto me ha brindado la oportunidad de sumergirme y aprender las herramientas y los procesos de diseño sin un alto riesgo. También me ha dado la confianza para confiar en mi intuición de diseño.

Takeaways

Ver otros proyectos

ITB Horizontal Card.png
ITB Horizontal Card-2.png
bottom of page