Salad Design — UX /UI Study

Es una web responsive que ofrece una opción de comida saludable a domicilio a la vez que permite al usuario diseñar su propia ensalada según sus necesidades.

Problema

- Faltan opciones de comida saludable a domicilio
- Las personas disponen de poco tiempo para cocinar y hacer la compra.
- No existen muchas ofertas para personalizar platos saludables según las necesidades de cada cliente.

Solución

Desarrollar una plataforma web responsive que ofrezca un servicio de entrega de ensaladas a domicilio/trabajo, ofreciendo como variante la posibilidad de cada uno pueda personalizar la ensalada a su gusto.

USER RESEARCH

Para empezar a desarrollar la idea, partimos de una serie de entrevistas y encuestas que tuvieron como objetivo averiguar los hábitos alimenticios de los potenciales usuarios.

De los resultados extrajimos las siguientes conclusiones:

  • La mayoría de usuarios no es reacio a probar nuevos productos, es frecuentemente el desconocimiento de la oferta existente lo que se lo impide.
  • A la hora de pedir comida a domicilio se suele preferir un servicio cómodo y rápido a la calidad del alimento.
  • De la muestra obtenida, la gran mayoría está informada sobre la influencia alimenticia en la salud.

USER PERSONAS

Es un tipo de plantilla que se utiliza para describir a los usuarios o grupos de usuarios de nuestro producto y sus necesidades. Nos sirve para identificar a los personajes de nuestras historias de usuario y, al darles un nombre y asignarles una personalidad, nos es más fácil empatizar con el grupo de usuarios al que representa cada persona y ofrecer soluciones más adecuadas a sus necesidades.

MATRIZ

ARQUITECTURA DE LA INFORMACIÓN

Antes de terminar la investigación, comenzamos a construir la estructura del sitio. Lo importante aquí es conseguir que el usuario comprenda el flujo de navegación y pueda encontrar de forma sencilla lo que está buscando.
El producto debe tener la cantidad de información precisa para alcanzar una experiencia de usuario exitosa.

Functionality Matrix

De la información obtenida, evaluamos las funcionalidades según su prioridad. Las básicas se muestran a continuación en verde y fueron escogidas en función de las necesidades del usuario y en la viabilidad de las mismas. En futuras iteraciones del producto se podrían añadir funciones adicionales de carácter social, como la valoración del usuario y la posibilidad de compartir pedidos en RRSS.

Diagrama de afinidad

Mediante este diagrama organizamos un conjunto de ideas y la asociación las mismas. De esta forma logramos los tres factores principales para abordar de manera directa.

  • Salud: el servicio parte como una alternativa saludable a la oferta de comida a domicilio existente
  • Tiempo: Planteamos un modelo de e-commerce básico que resulte familiar al usuario para garantizar la compra en un tiempo mínimo
  • Comida/alimentación: a la calidad del producto se añade la posibilidad de elegir los ingredientes y customizar el pedido
Diagrama de afinidad

Userflow

Es una representación que ayuda a observar el camino que un usuario puede tomar desde que entra en nuestra web hasta que sale de ella.

Flowchart

Aquí se puede ver el recorrido que realiza el usuario con wireframes low-fi para realizar un pedido.

VISUAL DESIGN

Moodboard

En esta etapa buscamos muchas referencias para definir el colores, la tipografía, el estilo, el tono, la textura que vamos a utilizar en nuestro producto. Aquí se incluyen también el tipo de animaciones que va a tener la interfaz, lo que ayudará al usuario a entender mejor la transición entre las diferentes secciones de la plataforma.

Camino que realiza el usuario para hacer un pedido en nuestra web

Tipografía y paleta cromática

  • Colores: El verde relacionado a lo natural, fresco, liviano y se añaden colores tierra en referencia a lo artesanal y para ofrecer un toque de calidez.
  • Tipografía: Apostamos por Roboto pensando en su legibilidad y óptimo funcionamiento en todos los dispositivos.

MOBILE FIRST

Cuando se diseña un sitio web responsive hay que tener en la cabeza una enorme cantidad de contextos donde el contenido va a ser consumido para conseguir una solución optimizada para todo el mundo.

Partimos de la filosofía Mobile first para diseñar y tomamos en cuenta que nuestros usuarios en su mayoría utilizan dispositivos móviles android. Por ese motivo hemos utilizando recursos de material design, con una tipografía clara, casillas bien ordenadas, colores e imágenes llamativos para no perder el foco y el sentido del orden y la jerarquía, donde la profundidad, las superficies, los bordes, las sombras y los colores juegan un papel principal.

Versión Móvil

Versión Desktop

Demo mobile

Demo desktop

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.