En este proyecto grupal con mis compañeras SilviaD, Anna Parés Toran y Katya Stein

Vamos a crear algo para darnos voz y empoderar a las mujer.

Con la ayuda de Pere Feliu y Ana Victoria nuestros profesores en Neoland.

Hicimos algo de research y con las suposiciones decidimos enfocarnos en la mujer deportista.

En la parte de hipótesis y sub hipótesis creíamos que estábamos menos visualizadas, se ve mas al hombre deportivo que no a la mujer.

Y era cierto por estadísticas.

Creamos varias protopersonas:

En este caso cree dos perfiles diferentes la mujer senior deportista retirada y la niña que quiere empezar en el mundo del deporte y no sabe como darse a conocer por ser mujer.

Una ves teníamos el prototipo empezaríamos con el protojourney en este caso me centre en la mujer senior.

Entonces empezamos a ver las necesidades de nuestras personas y mirar como podríamos solucionarlas.

Entonces volvimos al Protojourney pero que el usuario tuviera nuestro recurso.

Le daba una solución a su problema.

Ya teníamos la propuesta de valor y los objetivos a lograr

Empezamos a ver que clase de diseño queríamos para nuestra web y nos pusimos con el moodboard:

Empezamos a crear los wireframes de lo que seria nuestra Landing page.

Después de mostrar nuestras ideas empezamos a formar una Landing con lo que nos gustaba de cada wireframe, fue fácil ya que coincidíamos en varios apartados.

Después empezamos a elegir la guía de estilos.

Una vez lo teníamos todo nos dijeron que este proyecto se iba a hacer con HTML y CSS.

Aprendimos de 0 con pocos días para hacerlo todo.

Elegimos un template de una landing ya hecha que se pareciera el estilo a lo que queríamos y copiamos el código para ir modificándolo con nuestros datos.

En este caso introducimos en la landing page y en el Mailing MailChimp y Hotjar para controlar la gente que entraba, los clics que daban y como se movían por la pagina.

También creamos perfiles en las redes sociales:

A continuación os enseño el Mailing que creamos:

Una vez enviado el mail los usuarios ya podían acceder a nuestra web

Luego observamos los datos a través de MailChimp:

Aquí podíamos ver los emails que se habían enviado, los que se abrieron, los clics, aun que los datos no son del todo correctos, nos fallo la web al recopilarlos.

Luego con Hotjar pudimos ver las personas que habían entrado a través de que enlace y el tiempo dentro de la landing y por donde habían estado navegando.

También pudimos ver con mapa de calor los usuarios que la mayoría querían suscribirse a nuestra web.

Aun que los datos no salieron como esperábamos por ese problema, sabemos que nuestra landing cumplió con el reto que nos propusimos ya que mucha gente se intereso y querían saber si esta comunidad existía de verdad y nos preguntaron.

¿Quieres acceder? clica aquí, te esperamos hermana!

Como diseñe esta web:

Propuesta de valor:

Quería crear una pagina web musical para mi padre, quería ir mas allá de las típicas webs y quería que el usuario tuviera dentro todo a su alcance para que así no tenga que acceder a otras webs para buscar algo acerca de la banda.

StoryBoard:

MoodBoard:

Lo bueno de crear una web sobre una banda es que toda la documentación, fotos y demás son fáciles de obtener.

Arquitectura de la información:

Naming:

Guía de estilos:

Wireframes a papel:

En este caso con los wireframes de papel los prototipamos y hicimos ya pruebas para ver aspectos que mejorar con la pagina web.

Wireframes con figma:

Luego hice los wireframes con figma de las pantallas principales que tendría mi pagina web.

Ahora vamos a navegar por mi pagina web.

Home:

Aquí en el menú nos podemos encontrar con las opciones que nos ofrece esta web.

Discografía:

Aqui podriamos escuchar el CD que queramos de nuestra banda.

Eventos:

En este apartado podemos navegar por el calendario para ver los eventos y arriba nos indica los eventos importantes. Si seleccionamos en el calendario un día podríamos ver que evento hay en el lado derecho.

Comunidad:

Gracias a las encuestas vi que los usuarios querían tener una comunidad dentro de la web, así que cree como una especie de foro donde pueden chatear y colgar noticias y hablar entre fans.

Consta de una base de registro, actualización de perfil y el foro.

Videos:

Aquí podríamos visualizar videos de la banda tales como: Conciertos, videoclips, streamings, ensayos… Si le damos a suscribirnos nos estaríamos suscribiendo al canal de YouTube de la banda.

Bio:

Desde aquí podríamos ver la información de la banda y las fotos mas emblemáticas.

Contacto:

El contacto con la banda es solo para gestiones laborales, para todo lo demás en el Header tendríamos los accesos a las redes sociales.

Tienda:

En esta sección podemos separarlo en 3 partes: la tienda, cuando seleccionas el disco, la información que te da y el apartado de compra para registrar tus datos.

User Test:

Empezamos con las entrevistas en este caso hago un total de 5 a diferentes tipos de usuario.

Usuarios nivel básico:

Primer usuario: Suele usar a veces el ordenador, lo ve todo bien.

Segundo usuario: Usa mucho el ordenador, nos da información para mejorar algunas cosas.

Tercer usuario: Es el cliente a quien va dirigida la web, no toca nunca ordenadores y hay que ir guiándole. Le gusta la web pero quiere que añadamos mas información para que sea mas completa.

Usuarios nivel experto:

Primer usuario: Es programador, mira toda la pagina web al detalle y nos da muchísima información y nos dice lo que se podría mejorar, como y lo que se puede llegar a hacer y es mas fácil para luego llevarlo a cabo los programadores.

Segundo usuario: Es diseñadora, mira la pagina web detalladamente y se basa más en todo el diseño tamaños, mediación, colores, nos da también mucha información para poder mejorar nuestra pagina web.

Aquí abajo os dejo el enlace para ver mi proyecto y conocer a esta banda.

En este proyecto individual nos disponemos a hacer una web musical de 0.

Con la ayuda de nuestro profesor Pere Feliu, muchas gracias.

El reto de valor que queremos cumplir en este caso es tener todo integrado en la pagina para mejorar así la UX.

Al ser una pagina web que ya tenemos todos los datos facilitados por el cliente que quiere la web el research es más fácil.

Aun así vamos a mirar las necesidades de los usuarios, vamos a usar en este caso los Arquetipo.

Con esta técnica vemos las necesidades de diferentes tipos de usuarios.

Luego cogemos a dos tipos de usuarios y vamos a probar la técnica de escenarios.

Con esta técnica ponemos al usuario en una situación para ver que es lo que necesita para así mejorar nuestro producto.

Después haríamos el User Journey de un usuario.

Aquí podemos ver las necesidades de este usuario y ver los puntos donde podría entrar nuestro producto.

Lo siguiente que haríamos seria Customer Segments, divide un mercado en segmentos más pequeños de usuarios que tienen diferentes necesidades, características y comportamientos que requieren estrategias o mezclas de marketing diferenciadas.

Con esta tipología podemos ver las motivaciones del usuario y el valor, esto también nos ayuda en la mejora para la UX de nuestra web.

Ahora vamos a realizar las Insights con esta tipología buscamos descubrir lo que el público desea, para enfocar el contenido de acuerdo con eso.

Gracias a las insights podemos comenzar a hacernos preguntas, así sale el HMW:

También hacemos entrevistas y encuestas en este caso lo que mas me ayudo fueron las encuestas enviadas a gente que le gusta la música.

Gracias a los resultados de las encuestas y a la research con arquetipos sabia que es lo que quería el usuario para que la web.

Ver parte 2 UI aquí

El otro día tenia en mente crear algo nuevo, un botón, algo especial y junto a mi pareja que es Developer nos pusimos a idear como podría ser, crearla y darle vida.

Lo primero era elegir el tamaño para el botón, paleta de colores y las letras e iconos que en este caso son de Font Awesome.

Después de pasadas muchas horas y usar plugins nuevos para mi en Figma como: Rotate Origin.

Nuestra idea empezaba a tener vida:

Una vez hecha la parte de diseño tocaba que le dieran vida al producto, suerte tener un Developer en casa.

Y así seria como quedaría nuestro diseño final:

Espero que os haya gustado, tanto como a nosotros hacerlo.

Diseño de la App Conneck:

Nuestra app te la facilitan en la protectora junto al collar.

Si aún no has adoptado puedes bajarte la app igualmente.

¿Qué es lo que hace nuestra APP?

Reto, propuesta de valor:

Evitar los abandonos de animales, gracias a nuestras encuestas y sobre todo a las entrevistas nos enfocamos en:

Evitar el abandono una vez se adopta.

Es muy bonito ir a la protectora y enamorarte de un animal sin conocerlo, pero luego llegas a casa y el animal necesito unos cuidados o quizá el animal ha sufrido un abandono y tiene ansiedad.

Si la persona no se adapta a ello al final acaba abandonando de nuevo el animal así que por eso creamos esta app.

Para definir nuestra idea hicimos el Storyboard:

Antes de empezar hicimos diseño de wireframes:

Ahora empezaba la parte mas creativa y empezamos a buscar paletas de colore i imágenes visuales para nuestro proyecto.

Para la creación del logo nos surgieron varias ideas:

La idea era clara queríamos crear una conexión entre el animal y el dueño así que surgió Conneck que el logo intenta aparentar ser un collar y del cual estamos muy orgullosos.

Para la gama de colores queríamos colores suaves que representaran la tierra y lila para llamar la atención.

A continuación, establecimos la guía de estilo, la cual incluye la familia tipográfica, los estilos utilizados , la paleta de colores.

También los iconos, los cuales los ajustamos para que todos fueran de un mismo estilo. Y los botones primario y secundario.

A continuación vamos a navegar por la app:

Primero de todo nos registraríamos, también estaría la opción a través de Google. Una vez registrados podemos indicar que ya tenemos el animal o que vamos a adoptarlo.

Una vez lo tenemos haríamos el test de compatibilidad y podríamos subir una foto de nuestra mascota.

Ahora vamos a realizar el test, los datos del animal te lo facilitan en la protectora:

Una vez hecho nos dirá si somos o no compatibles con el animal que hemos elegido, en el caso de no serlo nos dirá otros animales que se pueden adoptar y que son mas a fines a nosotros.

En este caso somos afines a nuestra mascota elegida ahora tocaria realizar un pre curso para adaptarnos al animal y saber que hacer una vez llegue:

Una vez finalizado estaremos listos para ir a buscar a nuestro perrito.

Ahí en la protectora nos entregaran el collar de Conneck y solo habrá que seguir indicaciones en la app para poder vincularlo.

Una vez ya vinculado nos dirá lo que podemos hacer junto al collar:

Podemos saber donde va a estar nuestra mascota ya que tiene un sensor el collar con GPS, también lo podemos vincular a Spotify para que nuestra mascota pueda escuchar su playlist que le relaja, además podrá contar los pasos, así sabemos si necesita salir más.

Ahora vamos a navegar por las diferentes opciones que tiene nuestra APP:

Aquí podemos ver el ejercicio que hace nuestro compañero y un calendario para marcar que días ha salido mas que otros, también podemos activar GPS o el micrófono.

Aquí en el apartado de salud podríamos ver su historial medico, cartilla, vacunas, calendario de visitas, lo que puede y no puede comer…

Después tendríamos la pantalla de servicios:

Desde esta pantalla puedes ver que servicios tienes cerca, tienes el filtrado por competencias: Adiestradores, veterinarios, residencia canina, paseadores y protectoras. y el filtrado por precio, cercanías, valoraciones y por fechas.

Desde ahí puedes seleccionar, mirar la información y ya reservar o contactar directamente.

Luego tendriamos la opcion de perfil:

En esta opción puedes configurar la foto, la biografía, ver los amigos que tienes a traves de la app y ver las fotos.

Por ultimo estaría la pestaña de ajustes con algunas de las diferentes opciones.

Me ha gustado mucho poder colaborar en este proyecto con mis otros compañeros SilviaD Carlota Arráez maurijo pizzo

Aquí os dejo la vista de Figma desde fuera:

Creado con todo el amor con un fantástico grupo de 4 personas SilviaD , maurijo pizzo , Carlota Arráez.

Un tema que interesa a todo el mundo desde jóvenes a grandes. Nosotros con esta UX queremos evitar el abandono y mejorar la UX en la adopción.

En este proyecto nos basaremos mucho en el research y la empatía.

Las fases serian las siguientes:

En el brief nos dieron la siguiente informacion:

La tasa de abandono de animales en España es una de las más alas deEuropa, con alrededor de 285.000 perros y gatos recogidos al año por protectoras en todo el territorio estatal, según las cifras recogidas por el estudio “Él nunca lo haría 2022” de la Fundación Affinity.

Antes de empezar con el proyecto teníamos que entender las carencias, hacernos preguntas, entender mas el problema para poder buscar una solución.

¿Qué queremos investigar? ¿Qué es el objetivo? ¿Cómo lo haremos?

Una vez surgieron algunas preguntas empezamos a mirar la competencia.

Benchmark:

Evaluar la competencia, protectoras, centros de compra, criaderos, Apps existentes referentes a los animales.

Después de hacer las comparativas creamos un User persona y un mapa de empatia.

Sam es colaborador en una protectora, 32 años. Persona introvertida, le encantan los animales, siempre ha estado rodeado de ellos y le ayudaron cuando mas lo necesitaba.

A Sam le creamos un Journey map, para ver Paint Points que pudiéramos mejorar.

En este caso a Sam le sale mal la adopción y eso quiere decir que se queda la mascota sin hogar y el esfuerzo de Sam, para buscarle un lugar a su amigo Bruno, no ha servido para nada.

Después de este Journey Map decidimos hacer encuestas anónimas, para saber si la agente prefiere comprar o adoptar y en este caso saber el motivo por el cual eligen tener un animal.

La mayoría de la gente elegía adoptar y un porcentaje muy grande nos indico que era por el apoyo emocional que dan y por la compañía.

Luego hicimos entrevistas a personas que habían adoptado y comprado animales.

Gracias a las entrevistas encontramos varios patrones que se repetían, o varios paint point.

La historia de María, nos emociono y nos impacto a todos y gracias a ella hemos podido crear este proyecto.

Nos preguntamos ya sabiendo los problemas que se repetían como podríamos mejorarlo.

Tocaba la parte de idear, cualquier idea era valida por loca que fuera:

Luego hicimos técnica de hibridación, por marcas.

Despues de toda la lluvia de ideas hicimos lo siguiente:

Averiguar que ideas eran imposibles, posibles, innovadoras y tradicionales.

Necesitábamos las insights para saber que era lo que podríamos hacer para ayudar a cuantos mas usuarios mejor.

De todas las brainstorming que nos surgieron salieron muy buenas ideas y seleccionamos las que se adaptaban a las insights.

Ya casi lo teníamos, sabíamos como podíamos ayudar, que podíamos creas y como iba a afectar a la gente.

Ya sabíamos que íbamos a hacer lo siguiente era hacer un storyboard.

Y así surgió la idea

maurijo pizzo, Laura Moreno, Natália Vieira

En esta guía aprenderemos todas las fases de UX|UI por las que hay que pasar para llevar a cabo un prototipo testeable.

Vamos a realizar un proyecto referente a:

“Contribuir tecnológicamente a la prevención de incendios y recuperación de arboledas.”

EL sprint va a durar 5 días y cada día se centrara en un trabajo distinto a elaborar:

Primer día Mapear:

Primero investigaremos cual es problema y elegiremos objetivos

Debemos hacer research, compartir información, tomar apuntes.

¿Qué causan los incendios, qué podemos hacer, cómo podemos prevenir, como detectarlos a tiempo, gestión de riesgos, respuesta del usuario, comunicar la información a un ritmo rápido.

Las fuentes sugieren que lo mas común es que los incendios sean provocados por las siguientes causas:

• Prácticas agrícolas.
• Materiales secos.
• Super incendios por olas de calor.
• Fuego intencionado…

Elegimos nuestro objetivo a largo plazo y empezamos a preguntarnos cómo podríamos HMW (how my wish)

Con el HMW conseguimos identificar en que radica el problema:

En la falta de prevención.

Entonces nos planteamos el siguiente reto:

“Prevenir los incendios en las urbanizaciones cerca de zonas forestales por causa humana”

Empezamos a pensar en la app, que podemos crear para llegar a conseguir este reto que nos habíamos planteado?

Nos inventamos unas proto personas, para así poder hacer un customer journey map.

Dos proto personas diferentes y vamos a hacer el customer journey map:

Misma historia para dos usuarios, para ver qué haría cada uno en esa misma situación, gracias a esto tenemos que detectar en qué parte de la historia entraría nuestra solución y sería más eficaz:

Una vez hecho el mapa de usuario nos enfocamos más a la pregunta principal que nos hacíamos:

¿Cómo podríamos avisar a los usuarios de las medidas preventivas a tomar?

Una vez ya sabemos hacia donde tenemos que dirigir el proyecto , contamos con la colaboración de un bombero el cual no da información muy útil, en esta fase aun podemos cambiar de idea de enfoque que queremos llevar a cabo en nuestro prototipo.

En este caso nos reafirmamos a que queremos seguir con:

El modelo de prevención.

Segundo día Sketch:

Lighting demos:

Toca idear, hacer boceto, buscar imágenes, research de la competencia, cosas que queremos usar para nuestra web.

• Research de la competencia.
• Mapas de calor, mapas de riesgo, de sequía.
• Imágenes de prevención en folletos, anuncios…
• Una red como Telegram o Waze para crear comunidad con nuestros usuarios.

Una vez tenemos las ideas sobre nuestra app y como queremos dirigirla toca compartirla con el equipo de trabajo y hacer bocetos rápidos acerca de las ideas.

Aparecen muchas ideas con este ejercicio y empezamos a esbozar secciones de cómo queremos que sea nuestra app, algo rápido y sencillo:

Con esto ya tenemos pequeñas pinceladas de lo que queremos que sea nuestro prototipo.

Tercer día decidir y crear un guion gráfico:

Vamos a elaborar un guion gráfico donde en la escena inicial el usuario encuentra nuestro producto.

Trabajar con las ideas que ya tenemos y combinar.

Empezar a crear unos wireframes.

Exponemos nuestras ideas al equipo de trabajo para evaluar cual vamos a llevar a cabo para nuestro proyecto.

Hacemos votaciones, el facilitador narra, resalta las ideas, se anotan las ideas sobresalientes, se revisan inquietudes, se hacen preguntas y se explica la idea que tiene el creador.

Después de argumentar y defender cada uno su idea llega la hora de votar.

Tenemos que votar qué idea de las del grupo queremos llevar a cabo.

Cuarto día : ¡A prototipar!

En esta parte debemos convertir nuestros wireframes en un prototipo realista que se pueda testear.

Una vez tenemos en mente ya el prototipo que queremos hacer nos dividimos por roles:

Creadores — Diseñadores, crearán componentes individuales.

Pegadores — Recopilar y unir el trabajo de los creadores sin que se noten fisuras. Cuidar los detalles.

Redactor — Es imprescindible que el texto sea real para que el prototipo sea creíble

Recopilador de fuentes — Proporcionar fotografías, iconos y referencias al Creador.

Entrevistador — Escribir el guion para la entrevista. Mejor que no trabaje en el prototipo, para no involucrarse emocionalmente y afectar a las respuestas del cliente.

Cuando cada uno tiene su rol, toca hacer un prototipo funcional.

Trabajamos con Figma teniendo ya las imágenes, iconos, ideas, tipografía y todo claro.

Solo hace falta pegar todo y que quede bien para poder presentarlo.

Quinto día: Entrevistas.

Toca probar el prototipo con usuarios, tendremos 4 usuarios para entrevistar y que prueben nuestro proyecto.

Mientras uno del equipo entrevista al usuario nosotros vamos a anotar sus reacciones y comentarios para así poder mejorar nuestro prototipo.

Una vez anotado todo podremos ver los patrones de los usuarios .

Vistos los patrones que se repiten de las fallas nos quedan mucho por mejorar, pero gracias a los comentarios de los usuarios podemos arreglarlo y hacer un buen prototipo.

Nuestra app de prevención de zonas de riesgo, Fuegoff.

Está compuesta por:

• Onboarding

• Zona de mapas

• Comunidad

• Información de precauciones

• Registro

Landing Page:

Por último he hecho una landing page para explicar el funcionamiento de la app y que un usuario pueda registrarse, también tiene una opción que al hacer clic te llevará a la app para descargarla.