Seleccionar página

UI Design & Case Studies

Bienvenido a mi portafolio de UX Design.

This part of my portfolio includes 3 UI case studies, from investigación para maquetas de alta fidelidad:

  • Aplicación Padoca: aplicación de comercio electrónico para una panadería brasileña en Montreal, QC
  • Floristería NYC: sitio web adaptable para Florist NYC, una floristería con sede en la ciudad de Nueva York, EE. UU.
  • Alimentos Saludables: proyecto social para ayudar a las personas a aprender a cocinar comidas más saludables. Incluyendo diseños para una aplicación y un sitio web receptivo.

Proyecto de aplicación de Padoca

Cliente

  • Padoca Pâtisserie Montreal

Servicios

  • UI for app

Entregables

  • Maquetas de baja fidelidad
  • Investigación de usuarios de primera ronda
  • Ajustes y prototipo de alta fidelidad
  • Guía de estilo

Al experimentar malos servicios de entrega con socios externos, el Padoca 'Los propietarios decidieron que comenzarían a entregar sus productos por sí mismos.

Con una aplicación nueva, podían controlar la entrega y otras opciones, además de tener datos importantes sobre las preferencias de sus clientes.

La aplicación les ayudaría a ofrecer mejores opciones de entrega y mejorar el desarrollo de productos para su negocio.

Sobre la competencia

Montreal cuenta con otros 6 competidores en Padocacampo, pero nadie tiene una aplicación exclusiva. En su mayoría, utilizan el teléfono para recibir pedidos de servicios de terceros como Foodora o Uber Eats. O puede ordenar enviarles un correo electrónico.

Ninguno de ellos ofrece pedidos en línea a través de su propio sitio web.

¿Quiénes son los clientes de Padoca? Creando personas para una mejor comprensión.

Después de realizar una investigación sobre los clientes de Padoca, creo 2 personas, en función de las características que se destacaron de los formularios recopilados. El método de investigación utilizado aquí fue un formulario de 10 preguntas creado en Google Forms. Se envió directamente a los clientes que aceptaron contestarla en su tiempo libre.

viaje de los usuarios y primeras maquetas

Con las 2 personas en mente, era hora de comprender cómo las personas usarían la aplicación durante un día normal. Era necesario considerar el viaje de los usuarios para construir algo, fue fácil y rápido de usar en un día ajetreado normal. Durante la investigación, los clientes quieren ver dos características (presentadas en las personas): reserva de mesa y pedido en línea.

Primero, creé ejemplos de los viajes de los usuarios para imaginar cómo Philippe usaría la aplicación en un día ajetreado después del trabajo, mientras estaba en el metro o en el autobús de regreso a casa.

Para leer un recorrido de usuario más detallado basado en la personalidad de Philippe, haga clic en aquí.

Después de una clara comprensión de la viaje del usuario, se hizo más fácil pensar y desarrollar algunas pantallas de maquetas. Básicamente, diseñé dos conjuntos de sugerencias para someterlas a la aprobación de los clientes. Tuve que pensar en cómo incorporar las necesidades de los consumidores en un diseño atractivo.

estructuras alámbricas

De Padoca los propietarios tenían una idea clara del camino a seguir en esta aplicación. Teniendo en cuenta todos los aspectos de la investigación del usuario, llegó el momento de diseñar los primeros wireframes en Figma. Pensé que era importante hacer otra investigación para validar los wireframes. También mostraría si siempre estaba en el camino correcto. 

El concepto original con 3 columnas ...

... se cambió después de la investigación del usuario.

Lo mismo para la pantalla de revisión….

… Donde se agregó la opción de cambiar el orden.

Vea las pruebas de video de baja fidelidad:

PROTOTIPO DE ALTA FIDELIDAD Y PRUEBAS FINALES

Con las 5 pruebas en mente, se creó el prototipo de alta fidelidad. También me hicieron pruebas después, para validar algunos cambios realizados. Compartiré las pantallas realizadas pero puedes probar el prototipo funcional completo haciendo clic aquí.

Proyecto de sitio web receptivo Florist NYC

Floristería NYC es una pequeña florería ubicada en la ciudad de Nueva York, EE. UU. Necesitaban un sitio web receptivo para mostrar y vender en línea. Como es un mercado abarrotado, el desafío aquí fue incorporar algunas características y servicios que a los usuarios les gustan pero que no pueden encontrar en los sitios web de otras pequeñas floristerías.

Cliente

  • Floristería NYC Inc.

Servicios

  • UI for responsive website

Entregables

  • Investigación de usuarios
  • Maquetas de baja fidelidad
  • Ajustes y prototipo de alta fidelidad

Clientes de Florist NYC Inc.: creando personajes para una mejor comprensión.

Realicé una investigación en línea para conseguir clientes de florería en el área de Nueva York (puede ver la investigación y los resultados aquí). Era importante tener personas que compren flores en línea, pero también personas que tengan la intención de comprar pero que no confíen al 100% en este tipo de servicio. El objetivo aquí era comprender qué características agradecerían las personas para comprar flores en línea. Y especialmente algo que pudiera hacer Floristería Inc.El sitio web se destaca de la competencia.

algunas ideas de maquetas basadas en las primeras investigaciones del usuario

Antes de realizar los primeros wireframes en Adobe XD, Bosquejé algunas ideas en papel para obtener algunas imágenes rápidas sobre los problemas a resolver. Como los usuarios quieren elegir y comprar rápido, un diseño claro con diferentes formas para las imágenes era el camino a seguir. Visualmente, era más eficiente navegar de una sección a otra. Mi hipótesis fue validada por algunas investigaciones para la prueba del prototipo.

Para las primeras maquetas, desarrollo pequeñas secciones donde se colocarían las fotos para que el proceso de compra sea fácil y rápido. Como las personas a veces quieren comprar en el último momento, es importante brindarles excelentes sugerencias en la página de inicio o presentarles una manera fácil de elegir. Los usuarios identificaron que un enlace a las redes sociales sería genial para tener inspiración e ideas.

PROTOTIPO DE ALTA FIDELIDAD Y PRUEBAS FINALES

En las siguientes galerías, puede encontrar los prototipos de alta fidelidad para el sitio web receptivo. En la parte superior agregué las maquetas para la versión de escritorio. En la parte inferior, se agregaron las maquetas para la versión de teléfono inteligente. Para estas maquetas, mantuve los puntos que se destacaron durante la investigación: Florist NYC clientes de redes sociales y sugerencias para compra rápida.

para el bien social: aplicación y sitio web de alimentos saludables

Aplicación y sitio web de alimentos saludables es un buen proyecto social para enseñar a las personas a preparar alimentos más saludables. Basándome en algunas investigaciones, traté de diseñar algo para servir a los clientes básicos: personas que necesitan cocinar para ellos y / o sus familias; y personas que necesitan cocinar algo para ocasiones especiales, para impresionar a familiares e invitados en una cena especial, por ejemplo. 

proyecto

  • Ayudar a las personas a preparar comidas más saludables

Servicios

  • UI for app and responsive website

Entregables

  • Investigación de usuarios
  • Maquetas de baja fidelidad
  • Ajustes y prototipo de alta fidelidad

Personas creadas después de la investigación del usuario

Realicé una investigación en línea para comprender mejor qué motivaría a las personas a cocinar de manera más saludable. El acto de cocinar lleva tiempo y cuesta dinero. Descubrí básicamente dos grupos: uno que quiere / necesita cocinar de forma regular y el otro que quiere cocinar para ocasiones especiales. 

Ambas personas presentadas aquí sintetizaron estos 2 grupos y me ayudaron a diseñar funciones para la aplicación y después para que el sitio web sirva a ambos.

Aquí abajo tienes mapas de viaje y declaraciones de problemas creado para ayudar a idear los primeros bocetos:

algunas ideas de maquetas basadas en las primeras investigaciones del usuario

La Certificación de Catequista del ochos locos fueron el primer paso para comenzar a obtener algunas ideas claras sobre cómo diseñar y presentar las funciones de la aplicación y el sitio web.

Para las primeras maquetas en Adobe XD, Desarrollé secciones donde se colocarían las fotos para inspirar a los usuarios a aprender a preparar esa comida.

Aquí está la maqueta para la pantalla de inicio en 3 versiones: teléfono celular, tableta y pantalla de escritorio.

prototipos de alta fidelidad para aplicaciones y sitios web

Después de la ideación y las primeras maquetas, llegó el momento de desarrollar prototipos de alta fidelidad agregando fotos y algunos textos verdaderos.

Uno de los desafíos aquí fue diseñar la aplicación y el sitio web y mantener la coherencia de la marca. En la aplicación, necesitaba agregar en las pantallas algunas funcionalidades que en un sitio web podemos ubicarlas de manera diferente, siguiendo otra arquitectura.

Este es el flujo de trabajo básico para algunas pantallas en la aplicación en un clip de película corto:

Siguiendo aquí, tiene algunas pantallas de sitios web y la forma en que deben ajustarse (escritorio y tableta).

Elijo para la versión de tableta el menú de hamburguesas. Aquí puedes ver el casa y recetas rapidas .

¡Gracias por su interés en mi trabajo!

Estoy disponible para ser contratado o autónomo
Portafolio de diseño webSolicitar contacto