Git Product home page Git Product logo

cdmx-2018-06-bc-core-am-social-network's Introduction

Deafriend for Education

##Red Social - Proceso UX Las redes sociales son sitios donde un grupo de personas con intereses comunes se comunican e interactuan en torno a un tema. Una emprendedora nos ha encargado crear una red social. Nos da ciertos temas en los que le gustaría invertir:

  • Alimentación
  • Feminismo
  • Educación
  • Salud
  • Energías Renovables

Descubrimiento de la investigación

De acuerdo a lo anterior, nos decidimos centrarnos en el tema de educación específicamente en las personas con una discapacidad de tipo auditiva, para tener más información al respecto. Se realizaron dos tipos de investigaciones una documental y otra de campo. En la primera de acuerdo a la documentación podemos definir los siguiente:

Insights de la investigación

  • Primer obstáculo es la comunicación.

  • Sordos tienen su propio idioma, su primer lengua es la de signos y la segunda el español.

  • Cuando no entienden algo pregunta a varias personas, ya que todos los días aprenden palabras nuevas.

  • Mejoran su lenguaje a través de sus propios recursos.

  • La sordera da lugar a una forma diferente de percibir y vivir el mundo que ha tenido como consecuencia el desarrollo de las lenguas de signos y la formación de comunidades de personas sordas con una historia y una cultura propias.

  • El español hablado como escrito y la lengua de señas tienen una gramática completamente distinta, lo que obliga a los sordos a razonar en dos formas diferentes.

  • Las redes sociales han modificado su vida debido a que sienten que escribir es útil.

En un segundo acercamiento al tema se decidió realizar un focus group con 5 estudiantes Sordos de Educación Media Superior, arrojando, en donde se hicieron diversas preguntas como: Qué red social utilizas con mayor frecuencia y porqué?; Qué problemas tienes al usarla?; Qué problemas tienes al interactuar con otras personas ya sean oyentes o sordos?; Cómo te comunicas con tus amigos?; Conoces algún sordo que haya estudiado la universidad?; Si existiera una red social solo para sordos que te gustaría que tuviera o para qué la usarías?

Ana Ian Hector Israel Jose Armando

Nombre / Datos generales Preguntas / Respuestas
Israel, 23 años Estudiante de Educación Media Superior Iztapalapa Utiliza su smartphone Cómo te comunicas con tus amigos o familia? Por medio de mensajes, whatsapp o Lenguaje de señas. Cómo te comunicas con tus amigos oyentes? Escribimos mensajes pero es difícil porque el español es complicado para nosotros a veces no entendemos lo que dicen y nos confundimos. Cuál es la red social que más utilizas? Whatsapp Por qué utilizas esta red social? Es fácil Qué problemas tienes en la educación por ser una persona sorda? Materiales difíciles muchas palabras en español que no conozco. Conoces algún sordo que haya cursado la universidad? No Quieres continuar con tus estudios a nivel superior? Si, quiero estudiar fotografía, aunque aún no se donde. Te gustaría tener ayuda de otros sordos para seguir estudiando? Me gustaría en un futuro aprender, quisiera que me ayudaran las personas, familia, maestros para aprender más para en un futuro ir a la universidad.
Jóse Armando 24 años Estudiante de Educación Media Superior Tlahuac Utiliza su smartphone Cómo te comunicas con tus amigos o familia? Por whatsapp, facebook, messenger, con mi familia por medio de mensajes en el telefóno. Cuál es la red social que más utilizas? Whatsapp Quieres continuar con tus estudios a nivel superior? Yo quiero trabajar de mesero.
Ian 24 años Estudiante de Educación Media Superior Ecatepec Utiliza su smartphone Cómo te comunicas con tus amigos o familia? Whatsapp, facebook Cuál es la red social que más utilizas? Whatsapp Qué problemas tienes al usarla? Difícil español, es confuso lo que dicen. Cómo resuelves este problema? Imágenes, envío vídeo con señas o busco en el diccionario. Conoces algún sordo que haya cursado la universidad? No Quieres continuar con tus estudios a nivel superior? No se, depende de lo que diga mi mamá.
Hector 26 años Estudiante de Educación Media Superior Ajusco Utiliza su smartphone Para qué utilizas una red social? Facebook, instagram, twitter. Las personas las utilizan para mandar mensajes o subir vídeos, comunicándote desde lugares lejanos. Los oyentes escriben mensajes y nosotros subimos vídeos a amigos o familia. Cuál es la red social que más utilizas? Facebook, Tumblr Conoces algún sordo que haya cursado la universidad? No Si pudieras crear una red social solo para sordos que te gustaría que tuviera? Que sea fácil y gratis. Quieres continuar con tus estudios a nivel superior? Si quiero estudiar química en la UAM Te gustaría tener ayuda de otros sordos para seguir estudiando? Sería interesante conocer a otros para saber cómo estudiaron la universidad, sí es difícil o fácil.
Ana 19 años Estudiante de Educación Media Superior Iztapalapa Utiliza su smartphone Cómo te comunicas con tus amigos oyentes? Con mi familia ellos hablan así que yo leo los labios o si no me envían mensajes por whatsapp. Es difícil porque siempre ellos están hablando y pregunto que significa y a veces no saben cómo explicarme. Cuál es la red social que más utilizas? Whatsapp, Facebook Por qué utilizas esta red social? Es fácil y mi familia y amigos la tienen. Conoces algún sordo que haya cursado la universidad? No Si pudieras crear una red social solo para sordos que te gustaría que tuviera? Fácil, palabras fáciles, enviar imágenes(gif) y memes me gustan para compartir con otras personas. Conocer personas de otros países para aprender de ellos y después viajar. Quieres continuar con tus estudios a nivel superior? Si, pero no se donde estudiar. Te gustaría tener ayuda de otros sordos para seguir estudiando? Yo no conozco a otros sordos de universidad pero me gustaría platicar para saber más de ellos.

Insights del focus group

  • La red social que más utilizan los sordos es el whatsapp.

  • La comunicación con las personas oyentes es por medio de la escritura.

  • Ninguno conoce a otra persona sorda que haya cursado la universidad.

  • Sin embargo la mayoría del grupo quiere continuar con sus estudios superiores, aunque desconocen en qué institución puedan ingresar.

  • Han tenido problemas con sus amigos oyentes porque no entienden los mensajes que se escriben generan desacuerdos entre ellos.

  • Les gustaría tener una red social para la comunidad sorda ya que permitiría el intercambio de experiencias y conocer a otras personas con la misma condición. Aprenden de otros.

Bechmark

Bechmark

User Centered Design Canvas

Design Sprint

Análisis Argumentativo

Las redes sociales son sitios de Internet formados por comunidades de individuos con intereses o actividades en común y que permiten el contacto entre estos, de manera que se puedan comunicar e intercambiar información.

En México existen 2.4 millones de sordos, de los cuales, 124 mil 554 son jóvenes entre los 15 a 29 años, de estos el 28% no tienen ningún tipo de educación(INEGI 2014). A pesar de que muchos tienen un certificado de educación básica, hay un alto porcentaje que tienen rezago educativo en el área de matemáticas y lectoescritura.

El rezago educativo al que se enfrentan es el resultado por su paso en escuelas para oyentes en donde suelen ser excluidos o se les aprueban de grado sin necesidad demostrar sus conocimientos. La falta de educación para personas que no escuchan es causa de pocas oportunidades laborales. Es así que el 67% de esta población joven, es decir 83 mil no tienen ingreso económico propio.

La principal obstáculo al que “se enfrentan al momento de comunicarse con personas oyentes es la comprensión de la información ocasionada por un lenguaje pobre, que conduce a la marginación de la persona sorda.” (Amondarain y Correa, 2001). El español hablado como escrito y la lengua de señas tienen una gramática completamente distinta, lo que obliga a los sordos a razonar en dos formas diferentes.

Los sordos, se caracterizan fundamentalmente porque no pueden comunicarse por medio del habla con quienes los rodean,no de modo fluido y natural. Ellos necesitan comunicarse y socializar tanto como cualquier ser humano.En la actualidad la tecnología es una herramienta útil para la comunidad sorda. Los celulares han modificado su vida gracias a los mensajes de texto o video llamadas, en algunos casos ha mejorado el nivel de lectoescritura.

Se identificó que los jóvenes que terminan su educación media superior con esta condición si bien tienen la motivación de seguir adelante no cuentan con la orientación hacia que instituciones educativas dirigirse. De acuerdo a esta problemática es que surge la necesidad de crear una red social que permita la comunicación entre las distintas personas sordas que se encuentran en el país. Esta red permitirá el intercambio de experiencias educativas entre jóvenes sordos que ya han terminado su formación académica a nivel superior y aquellos que están próximos a terminar preparatoria.

Lo que permitirá que personas bajo la misma condición se den consejos para seguir estudiando, se identificaran entre ellos y favorecerá su autoestima y la imagen que tienen de sí mismos para su futuro. Será una oportunidad para que se den cuenta de que la sordera en sí no les impedirá alcanzar sus sueños si se lo proponen como hicieron otras personas con esta condición.

Target

  • Jóvenes Sordos entre 19 a 35 años que cursan o cursaron la educación media superior y superior.

  • Con un nivel socioeconómico medio.

  • Son muy observadores y atentos al detalle.

  • Utilizan la tecnología para comunicarse con sus amigos y familiares.

  • Les gustan las redes sociales que son intuitivas y fáciles de comprender.

  • Les gusta poder comunicarse por medio de imágenes (gifs, memes) con otras personas.

Argumentación del proyecto.

  1. Negocio. La UNESCO señala en su declaración mundial de 1990 que “Educación para todos”. Bajo este principio y aunado al nuevo modelo educativo incluyente. Las universidades han desarrollado proyectos de inclusión. Tal es el caso de la Universidad Santa Catarina, en Nuevo León, donde si un alumno sordo necesita un traductor a Lengua de Señas Mexicana, éste llega al salón cuando va a tomar clase; Universidad Teletón, con su cultura incluyente; UNAM fomentando una cultura de integración para personas con discapacidad; Universidad de Coahuila; UDG.

Sin embargo estas universidades no cuenta con suficiente publicidad para llegar al público adecuado y así responder a sus necesidades. Por lo cual tener una plataforma donde se concentren estudiantes cuyo perfil encaja para estudiar la universidad y tener ex alumnos de estas instituciones siendo los principales promotores. Permitirá ofrecer a estas instituciones un espacio para su publicidad dirigida específicamente a estudiantes que están por cursar su educación superior.

Además de ofrecer un espacio para que otras instituciones ofrezcan cursos o talleres a un público que ha estado descuidado o bien publicitar servicios como intérprete.

  1. Usuario. Si bien existen redes sociales dirigidas a personas sordas, se ha dejado de lado el tema de educación. Siendo así un target potencial para su atención.

Historias de Usuario

Los usuarios son estudiantes Sordos de preparatoria que esta próximo a culminar sus estudios, tienen la intención de seguir estudiando el nivel superior sin embargo no conocen a ninguna persona Sorda que haya cursado la universidad.

Ellos quieren estudiar una carrera pero no conoce ninguna escuela que los acepten por su condición. Han tratado de buscar información en internet sin embargo los textos con los que se enfrentan son muy difíciles por lo que prefieren preguntar entre sus amigos, aunque ninguno de ellos tiene conocimientos al respecto.

Les han platicado que existe una red social para personas Sordas donde platican sus experiencias educativas. Esto le sirve para que otros conozcan las distintas posibilidades que tienen para seguir estudiando. Ellos también puede motivar a otros a culminar la preparatoria.

Ellos esperan que esta red social les permita comunicarse de manera fácil con otros y así conocer a otras personas que como ellos, día con día se enfrentan a un mundo de oyentes.

Los usuarios necesitan que esta red social sea un espacio seguro y donde pueda platicar en confianza, por lo que esperan que al momento de registrarse se utilice un lenguaje claro y sencillo que les permita seguir cada uno de los pasos.

Una vez registrados necesitan que la aplicación tenga información visual que los guie al momento de publicar algún comentario y en donde ellos pueda ver los comentarios de los otros usuarios. Ya que esta red social permite la interacción con personas que no conoce, para los usuarios es importante tener una imagen de su rostro para poder identificarlos. Los Sordos son personas muy visuales así que fácilmente identifica el significado de los iconos.

Les gustaría que al momento de escribir un mensaje ellos tuviera la oportunidad de editarlo por si al momento de escribir la redacción no sea la correcta. También quisieran eliminarlos si por algúna razón se equivocaran.

Es importante que algún mensaje importante se destaque por el número de "me gusta" que tiene. Y así poder identificar fácilmente las conversaciones más destacadas.

Esperan tener un espacio solo para ellos donde puedan escribir una pequeña semblanza de quienes son y compartirlo con las personas que deseen.

Sketching

Sketch mobile

Sketch desktop

(https://www.figma.com/proto/CoK9juRtOR2sIJ3wfHdg6rq9/Untitled?node-id=1%3A3&scaling=min-zoom)

(https://www.figma.com/proto/E1pzxVODlUVx95hI9PyHxIsb/Untitled?node-id=2%3A2&scaling=min-zoom)

Elementos Visuales

Color

La elección del color azul claro, que predomina en Deafriend es muy conveniente para los diseños web y redes sociales ya que representa la calma y amistad. También se asocia a las personas tímidas o introvertidas. Considerando nuestro público y que al ser una red "nueva" que en primer instancia debe captar a los usuarios y trasmitirles seguridad para que la ocupen.

Contraste

Se emplearon colores complementarios que ayudan al contraste en el logotipo. En la página principal(muro). Se le da más valor a los blancos para que se destaquen los mensajes. Se contrastan ciertos elementos con el color naranja para llamar la atención de los usuarios y se resalta el tamaño de la letra del mensaje para que este sea más visible que el nombre.

Jerarquía

En cuanto a la importancia de los elementos se destaca el escribir un mensaje el cual tiene un call to action. Así como el texto de los mensajes.

Testeo con Usuarios

Se realizarón las pruebas con usuarios finales, es decir 3 estudiantes Sordos de Educación Media Superior. Se les compartió la liga del proyecto. No se les dieron instrucciones. Ellos entraron a la aplicación todos se conectaron a través de una red social. Comenzaron a explorar los distintos mensajes que habían y entre ellos se mandaron mensajes. Descubrieron que existia un submenú que los llevaba a ver su perfil y que podían regresar a la pantalla principal. Al terminar la prueba se les pregunto que si había sido fácil la forma de navegar. Ellos comentaron que había sido muy fácil y que les llamaba la atención del logo al combinar dos palabras del inglés. Se les pregunto sobre los iconos y entendian para que servia cada uno y prefieren que en lugar de que diga favorito, sea un me gusta! Uno de los usuarios creo un acceso directo desde su celular. Al final se les explico que esta en proceso de producción.

Deafriend for Education

Es una red social que busca ser un espacio donde personas jóvenes Sordas se comunican entre si y comparten sus diferentes experiencias en el ámbito educativo. Si quieres conocer más de este proyecto ingresa a la página (https://brenduchiz.github.io/cdmx-2018-06-bc-core-am-social-network/src/views/index.html)

  1. Ingresa tus datos para registrarte o bien utiliza alguna de tus redes sociales.
  2. Se parte de la comunidad Sorda online.

Instrucciones para desarrolladorxs:

  1. Realiza un fork de este repositorio. 2.️ Clona tu fork a tu computadora.
  2. Instala las dependencias del proyecto con el comando npm install. Si deseas aportar al proyecto escríbenos un issue o haz un pull request.

cdmx-2018-06-bc-core-am-social-network's People

Watchers

 avatar

Forkers

angiemonroe

cdmx-2018-06-bc-core-am-social-network's Issues

Pruebas / tests

  • Tests unitarios cubren un mínimo del 70% de statements, functions, lines, y branches.

  • Pasa tests (y linters) (yarn test).

Feedback Project Social Network

  1. HTML/semántica: Abuso de divs, aún se pueden ocupar más etiquetas semánticas, les dejo un link que da una idea de HTML semántico pero las invito a seguir indagando sobre este asunto en sus próximos proyectos.

  2. DRY: Aún no llegan al nivel 3 que pretende que haya abstracción y rehuso de estilos a través de clases, por ponerles un ejemplo ustedes están declarando la propiedad font-family dos ocasiones con el mismo valor ´'Pacifico', cursive´, o un background con color #73CBE1, pudiendo tener una clase que se encargue de esto y utilizarla en las distintas etiquetas html donde la necesiten.
    En el punto de lógica, están en el nivel esperado, el siguiente nivel que es el 3 espera que identifiquen y eviten repetición, por ponerles un ejemplo: en el archivo app.js están repitiendo el código que recibe al provider en los dos eventos de cada botón
    ´´´ js
    buttonGoogle.addEventListener('click', google => {
    let provider = new firebase.auth.GoogleAuthProvider();
    funAuth(provider)
    });

// Ingresar con Facebook

buttonFacebook.addEventListener('click', facebook => {
let provider = new firebase.auth.FacebookAuthProvider();
provider = provider.addScope('public_profile');
funAuth(provider)

});

const funAuth = (provider) => {
firebase.auth().signInWithPopup(provider).then(function(result) {
console.log(provider);
let token = result.credential.accesstoken;
console.log(token);
let user = result.user;
let data = {
name: user.displayName,
uid: user.uid,
email: user.email
};
database.ref('user').update(data);
let keyUser = userNew.getKey();
getKeyUser(keyUser);
})
.catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
});
}
´´´
este sería solo un pequeño ejemplo, pero este mismo código puede reducirse aún más!
3. JS/nomenclatura :Algunos pocos nombres en javascript están en español, si se unifican se llegaría al nivel 4!
4. HTML: correctitud/validación, no olviden antes de sus entregas meter su código html en https://validator.w3.org/ es un paso distinto a correr el comando de htmlhint, si tienen alguna duda con respecto a esto, sin problemas se las resolvemos.
Buenas prácticas: cuiden la indentación de sus archivos html. Cuiden borrar los console.log() que han dejado.

Las felicito por su trabajo! Creo que han dedicado importancia a cada parte y su producto me parece que llega a tener una esencia, sigan perfeccionando lo alcanzado, haciendo que el usuario solo pueda borrar sus post por ejemplo, o implementen lo que respondió Brenda el día de la presentación acerca de la validación de los usuarios por parte de otros usuarios o familiares, muy buena respuesta, realmente demostró que habían llevado su idea más allá de lo que llegaron a materializar. Estamos llegando a casi todos los niveles esperados de la parte tech, sigan trabajando así y llegarán muy lejos. Su issue sobre los puntos de UX lo recibirán próximamente.

Un abrazo y cualquier duda estoy a su disposición!

comentarios sobre su primer sprint

@AngieMonroe , @brenduchiz.

  • La interfaz es poco intuitiva para registrar un nuevo usuario.
  • Ya que se crea una nueva cuenta el modal debería cerrarse al darle click en guardar.
  • Se traba cuando me registro e intento ingresar.
  • Que es el archivo .visualCode?
  • No se debería de subir la carpeta de node_modules.
  • Todos los archivos js deberían ir dentro de la carpeta js.
  • Que es la carpeta vendor? Es un template, cierto?
  • Solo debería haber un solo archivo html al entrar al proyecto, si usarán mas archivos de este tipo, deben ir dentro de la carpeta views.
  • Por buena practica un poyecto solo debe de tener un README.md
  • Si van a usar imagenes, todas las imagenes es bueno tenerlas en la carpeta de imagenes.
  • REcuerden que su código debería estar enfocado a los test. Les dejo una lectura que espero les pueda servir: https://medium.com/javascript-scene/5-common-misconceptions-about-tdd-unit-tests-863d5beb3ce9.
  • Los scripts de firebase deben de ir justo antes de cerrar el body, sobre los demas scripts .
  • El arhivo de index.html no se puede abrir.
  • Recuerden tener en cuenta y hacer código enfocado a Test, con esto me refiero a la separación de responsabilidades de los archivos js y hacer las funciones puras para poder testearlas.
  • El archivo data.js y app.js, tienen muchas cosas iguales. Recuerden que cada archivo debe hacer algo diferente con responsabilidades divididas.
  • Nunca dejen de aprender y no se den por vencidas 😄!

Mostrar errores en Login

### Error de usuario de que ya existe este.
Error al ingresar cuando es valido y cuando esta en blanco.

README.md

  • Definición del producto.
  • Benchamarkde las principales redes sociales.
  • Resumen de entrevistas con usuarios.
  • Link/screenshots
  • prototipode alta fidelidad.
  • Conclusiones de pruebas del prototipo con usuarios.
  • Conclusiones de pruebas con el producto en HTML.

Feedback UX

  1. Su proyecto es de los pocos en los que veo que tuvieron que hacer más investigación, más allá de los digital. Felicidades por eso, me gusta que estén documentando
  2. En el login pienso que los colores que escogieron ayuda muy poco al contraste del lago y de los campos del login
  3. Los botones son demasiado pequeños, tomen en cuenta el texto que esperan que el usuario ingrese y eso les dará la respuesta en cuanto al espacio o tamaño que deben de darle
  4. Toda la investigación que hicieron no la veo reflejada en su red social, es decir, si soy sorda hay algo que me indique como usar su página? Solo veo una serie de comentarios con algunas interacciones pero no sé si eso resuelva la problemática
    ¿Hicieron test con usuario? ¿Qué descubrimientos hicieron?
    Creo que este fue un proyecto que pudo retarlas a conocer y acercarse a su usuario, a entenderlo, a ser empáticas, pero creo que al final esa oportunidad se vio apocada por el tiempo y los requerimientos técnicos.

Muro (wall/feed)

  • Muestra muro.
  • Permite publicar nuevos posts.
  • Permite eliminar posts.
  • Pide confirmación antes de borrar posts.
  • Permite editar posts (in place).
  • Permite marcar posts como gustados (like).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.