1. veginning - Última vista (perfil de usuario)

    9 months ago

    Hola a todos, ¿cómo están? espero que muy bien y listos para el último review de nuestra aplicación. Me demoré un poco más en presentarles esta vista porque la semana del 18 me imagino que estaban todos en otra sintonía y la semana que siguiente de esa estuve ocupado afinando los últimos detalles del sitio de la ONG AnimalLibre que podrán ver pronto por las pantallas… que más prefieran, ya saben: tablet, smartphone, laptop, etc.

    Bueno, vamos por esa vista de perfil.
    Teniendo en cuenta que el perfil de usuario va de la mano con el feed (de este mismo usuario) decidimos continuar con la línea que ya veníamos usando de Path (con una foto de perfil circular y otra foto haciendo de cover),  pero le agregamos algunos conceptos que a nuestro parecer se ajustan mejor a los objetivos de nuestro proyecto. Y si bien la idea de un perfil con foto personal y foto cover no es nada nuevo (facebook, twitter y googleplus ya la usan), creemos que mezclando distintas podemos llegar a un resultado único.
    Aquí van algunos ejemplos que nos inspiraron
    image

    Musix app by Scardi Shek

    image

    Some sport iOS app by Sergey Minkin

    Como ven la primera aplicación es bastante parecida a Path y la segunda no demasiado. Pero de ella tomamos la idea de poner contadores escoltando a la foto de usuario, y en nuesta aplicación los contadores serán de los productos y lugares que este usuario ha agregado. Esto es de suma importancia para veginning porque cuando un usuario encuentre un producto nuevo, podrá verificar en el perfil del autor cuántos otros productos éste ha agregado; y si el autor tiene una buena historia de colaboración se ganará la confianza de otros usuarios. Ok, entonces?.. como quedó?

    image

    image

    En los ejemplos anteriores el único cambio que se puede notar en la interface es el botón de “Find People” por el botón “Follow”, el primero aparecerá cuando ingreses a tu propio perfil para que puedas conectar con más usuarios, y el segundo aparece al momento de ingresar al perfil de otros usuarios, este último también cambiará a “Following” cuando ya estés siguiendo a alguien.

    Y sería todo por hoy, quizá hagamos una revisión más la semana siguiente, para analizar las pantallas extras de configuración y los “agregar”, mientras esperamos que salga finalmente nuestra app. Pero todo dependerá de mi programador favorito y socio del proyecto: transmigrado.


    Alex Plaza Cancino

    CEO y Fundador de veginning. Soy vegano desde hace 6 años y me encanta el diseño, me dedico a crear sitios web responsivos y soy un feliz estudiante de TreeHouse.

    image
    alexplaza
  2. Comments
  3. veginning app - Pantalla de Lugares

    10 months ago

    La revisión de esta semana será cortísima e iremos directo al grano ya que las bases de donde nos inspiramos quedaron bien sentadas en post de la semana pasada presentando la pantalla de productos, que es bastante parecida a la de los lugares. Entonces.. ¡vamos directo a los ejemplos!

    image

    En esta pantalla podrás explorar los lugares que tienes cerca, y además hacer búsquedas específicas de lugares que quizá no se encuentren muy cerca. Podrás filtrar por nuestras Categorías especiales de lugares(Common, Vegan Friendly, y Full Vegan) además de las categorías por rubro de cada lugar (restorant, supermarket, coffee, etc.)

    Siempre que desees explorar el mapa con la vista despejada podrás wipear el bloque naranjo para ocultarlo. (wipe it off).

    image

    En esta vista, muy similar a la del detalle de producto, podrás explorar todo lo relacionado al lugar que estás visitando en nuestra guía, los productos que hay disponibles en ese lugar, el contacto(email, teléfono), la dirección, y una galería de foto. Abajo se desplegarán los tips como lo muestra la siguiente vista.

    image

    Aquí la pantalla extendida de ambas vistas.

    image

    Y eso sería todo por esta semana, ya va quedando solo una vista! que es la del perfil de los usuarios, y luego se vienen los detalles del desarrollo de nuestra aplicación para que sepan cuando estaríamos llegando a la Appstore!

    Nos leemos la próxima semana! 


    Alex Plaza Cancino

    CEO y Fundador de veginning. Soy vegano desde hace 6 años y me encanta el diseño, me dedico a crear sitios web responsivos y soy un feliz estudiante de TreeHouse.

    image
    alexplaza
  4. Comments
  5. veginning - Pantalla de Productos

    10 months ago

    Hola a todos, nuevamente. Esto se ha vuelto una especie de Thursday-Post sin querer queriendo y esta semana es el turno de la segunda pantalla de veginning, la pantalla de productos, vamos a ir desglosando cada parte para contarles en qué nos inspiramos para crearla y vamos a mostrarles el resultado final de estas inspiraciones.

     

    Lo primero que verán en la pantalla de productos será una caja naranja de búsqueda, para hacer esta caja nos inspiramos en el sitio responsivo de Adioso, un avanzado buscador de tickets de vuelo, el color naranjo ya lo veníamos usando de antes y lo teníamos contemplado usar en la aplicación, así que es una casualidad que la hicieramos naranja al igual que en Adioso. Pero lo que sí tomamos de ellos fue la estructura y el orden de las entradas de búsqueda y los botones.
    Acá les va un pantallazo del sitio web responsivo de adioso y su caja (respondiendo al tamaño de un celular en mi escritorio, por eso se llama responsivo, ustedes pueden abrir el link de web de Adioso y ver esta caja de otra forma dependiendo de la pantalla en la que estén leyendo esto).
    image
    Al comienzo, nuestra de productos solo mostrará esta caja naranja, pero a medida que se vaya usando, irán quedando las búsquedas de categorías más recientes, para que luzca un poco como la antigua pantalla de explorar de la aplicación Vine, app que mencionamos la semana pasada.
    image

    Después de que especifiques tu búsqueda, o explores alguna categoría específica, de seguro encontrarás un producto vegano que te parezca interesante, y querrás saber algo más acerca de él. Entonces simplemente con tocar la foto de este producto podrás ingresar a su pantalla de detalle, que fue inspirada por 2 increíbles aplicaciones que encontramos en dribbble.
    image
    Luego, si te diriges al boton de tips (que decidimos destacarlo más que los otros botones, porque es muy importante para nosotros que el usuario tenga referencia de otros, y pueda hacer un feedback del producto que está explorando) entonces la aplicación hará un scroll automático hacia la vista de los tips que se encuentra en la misma pantalla. Para esta vista decidimos darnos pocas vueltas y buscar inspiración en los expertos en tips: foursquare.
    Y por último, está la vista de cuando dejas el tip, que es una simple lista como los comentarios de Vine, pero no vamos a ahondar más estas últimas vistas porque son muy simples y muy usadas a lo largo de muchas aplicaciones, así que cuando las vean lo sabrán y se sentirán familiarizados de inmediato.
    Antes de ver los resultados, cabe destacar el uso de “GO!” en gran parte de nuestros botones como reemplazo del clásico “Save”, “Comment” o el más específico “Leave Tip”, quisimos usar esta simple palabra como una transformación práctica de la popular frase “Go Vegan!" para darle una identidad única a nuestra aplicación y una cercanía a nuestros usuarios veganos, pero aún así manteniéndolo simple para todos los no familiarizados con la frase.
    Ya, eso, vamos a ver los resultados! 
    image

    image

    Cuando el producto no tenga foto saldrá su nombre, si el producto tiene foto el nombre probablemente estará en packaging.

    image

    No sabemos si tendremos el botón de check-eat en la primera versión de la app, o en la primera actualización. Pero de que se viene se viene.

    image

    image

    Y eso, estaríamos listos por esta semana, nos leemos el próximo Jueves y una vez más agradecemos a los modelos, que esta semana tuvieron un invitado especial.


    Alex Plaza Cancino

    CEO y Fundador de veginning. Soy vegano desde hace 6 años y me encanta el diseño, me dedico a crear sitios web responsivos y soy un feliz estudiante de TreeHouse.

    image
    alexplaza
  6. Comments
  7. veginning App - Primera Vista

    10 months ago

    Se acabó la parte aburrida, en el post anterior les comentamos todo lo que pasó con el proyecto para llegar a la etapa de desarrollo en la que estamos ahora. Y hoy vamos a darle un primer vistazo a la nueva aplicación que hemos elaborado especialmente para ustedes, los usuarios.

    En el post anterior mencioné que teníamos listo el feed, y como será la primera pantalla que aparecerá cada vez que un usuario se loguee vamos a revisarlo aquí. Vamos a mostrarles en qué aplicaciones, que amamos, nos inspiramos, y como fuimos mezclando las ideas para darle vida a la nuestra.

    Pero antes del feed, vamos a hablar del navegador que está presente a lo largo de casi todas las pantallas de la aplicación. Let’s dive in.

    Para hacer este navegador nos inspiramos en Instagram. Queremos que el usuario siempre tenga a mano el botón de cámara-scanner-buscador, que lo que hace es precisamente eso, abrir la cámara para poder scanear el código de barra de un producto, y luego devolver un resultado(si es vegano o no es vegano).

    image

    Es por esto, que al igual que en Instagram, quisimos destacar este botón del resto de sus acompañantes con un color, y ponerlo en el centro; para que el usuario siempre tenga presente y a mano el scanner. Esperamos sea sobre todo útil para los usuarios no veganos.

    image

    En cuanto al feed, que es justamente el ícono de la bellota seleccionado en nuestro navegador, nos inspiramos en 2 aplicaciones, Path y Vine. Queríamos enfocarnos mucho en las imágenes, que son algo muy importante a la hora de encontrar productos en el supermercado, si sabes como luce el producto que estás buscando podrás identificarlo rápidamente en las coloridas góndolas de la oferta cada vez más variada de productos.

    Entonce, siendo las imágenes un elemento de gran presencia en aplicaciones como Path con sus hermosos filtros para fotos y en Vine que solo se trata de compartir imágenes(mini-videos) decidimos tomar lo que más nos gustaba de ambas.

    También era importante para nosotros que hubiera una distinción inmediata de qué es lo que está sucediendo en tu timeline con un solo vistazo, por ello utilizamos un icono distintivo circular como hace Path para indicar si el usuario está dejando un tip, o agregando un producto, o un lugar. Lo que hacía a Path la aplicación perfecta en dónde poder inspirarnos, excepto porque es un sistema cerrado de amigos, donde necesitas ser aprobado para ver el contenido de otros. Pero con veginning queremos que sea más abierto, con seguidores como twitter, y usuarios que puedan compartir el contenido de otros para que llegue a más personas. Entonces tomamos elementos de Vine, como sus grandes botones en el timeline, que hacen que gustar, opinar y compartir sea simple y siempre esté al alcance del usuario. Y así fue como quedó nuestro timeline.

    image

    image

    image

    Agradecemos a todos nuestros modelos. Esperamos que les guste esta primera vista de la aplicación y la semana que viene hablaremos de la pantalla de Productos. Déjennos sus comentarios.


    Alex Plaza Cancino

    CEO y Fundador de veginning. Soy vegano desde hace 6 años y me encanta el diseño, me dedico a crear sitios web responsivos y soy un feliz estudiante de TreeHouse.

    image
    alexplaza
  8. Comments
  9. Un Nuevo Comienzo

    11 months ago

    Lo que les tengo que contar probablemente incluya varias definiciones técnicas y se alargue mucho, así que iré al grano del asunto de inmediato. ¿Qué fue lo que nos pasó?  pues, nos cambiamos de servidor. Eso.

    Ahora que ya lo saben, y han calmado sus dudas les contaré la historia de cómo tomamos esta difícil pero visionaria decisión.

    La íbamos a lanzar en mayo
    Después de incluir facebook connect en nuestro sitio para que los usuarios se loguearan, nuestro crecimiento empezó a ir muy bien, en un mes logramos doblar la cifra de usuarios registrados que habíamos conseguido antes, a lo largo de todo un año. Con estas proyecciones de crecimiento en mente, presioné a mi único desarrollador(amigo y socio), de “todo” en ese tiempo, para que nos expandiéramos a toda costa. Pero había un problema, o varios, que en el fondo se desencadenaban de uno solo.

    El equipo
    Cuando antes decía “mi único desarrollador”(Jorge Acosta) que hacía TODO, me refería exactamente a eso, con excepción de las ilustraciones, y la selección de fotos y colores que quedaba en mis manos.
    Para la plataforma de veginning, actualmente online, Jorge tuvo que hacer prácticamente todo, excepto por los “monitos” como les mencionaba. Se aplicó con: HTMLCSSJS (lenguajes que interpretan lo que ve el usuario en pantalla) y PHPMYSQL (lenguajes que no ve el usuario pero que lo ayudan a comunicarse con el servidor).
    Si bien mucha gente me ha comentado que lindo que está el sitio, y si bien hay que decir que Jorge se las mandó con todo el desarrollo, siempre quedaron a mi gusto algunos arreglos por hacer en cuanto a diseño, pero no molesté a Jorge con eso porque su fuerte es el backend(los lenguajes que no ve el usuario) y no el frontend(que es lo que ve el usuario).  Y era en ese momento el backend lo que más nos estaba impidiendo avanzar de forma esperanzadora.

    La aplicación
    La app estaba casi lista, yo diseñaba y Jorge armaba en Object-C, lenguaje de programación para iPhone, donde decidimos enfocarnos primero por una cuestión técnica. Teníamos listo el scanner de códigos de barra y de hecho publicamos un par de fotos, que a esta altura todos deben pensar que se trataba de alguna montada falsa, ya que nunca sacamos la app. Sabíamos que si lanzabamos la app íbamos a tener un buzz bastante interesante, muchos más usuarios, más notas en prensa, y más productos y lugares agregados, pero por lo mismo sabíamos que iba a ser un fiasco porque teníamos un problema.

    image

    El problema
    Sin caer en Arjonismos, el problema era el servidor, y de él se deriva nuestra mejor opción, pero aún así problemática, de desarrollar en PHP. Jorge se estaba tardando mucho en replicar lo maravilloso que puede hacer una aplicación móvil, en PHP para que también lo pudiese hacer el sitio web. Incluso habían cosas que se iban a postergar para mucho después, por lo difícil que era emularlas en el sitio web. Pero no solo ese trabajo se estaba tomando mucho tiempo, sino que nuestro servidor también. Pagamos una miserable suma de 7.000 CLP anuales por el servidor actual que tenemos, nos dan mucho espacio y tráfico infinito, pero este tráfico de datos es tan veloz como un ciclista paseando en el fondo del mar. Esta lentitud en nuestro servicio, hace que muchas veces tengas refrescar el sitio más de una vez para que finalmente cargue, y era lo que más preocupaba a Jorge con respecto al creciente número de usuarios, el pronto lanzamiento de la app y el filtro de países, que también cancelamos; todos aquellos factores juntos e incluso de forma separada iban a hacer colapsar nuestro sistema que sin duda no tenía una buena base de donde sostenerse. Pero lo peor de todo era que ni siquiera teníamos una solución viable a este problema.

    Los estudios
    Por ese mismo tiempo, yo me encontraba estudiando en el mejor lugar del mundo: Internet, aunque para los más románticos podríamos decir "en mi hogar", pero la cosa es que estudiaba a través de internet para convertirme en Front-end Developer, y aunque aún estoy luchando con JS(un lenguaje bastante complejo usando en el Front y Back End) podríamos decir que lo logré. Y todo gracias a los increíbles profesores de TreeHouse, pero no solo mi Techducation les debo, sino que algo más, y no hablo de algo mágico, sino de poner atención a lo que no lees de pasada en las redes sociales + una chispa de suerte.

    APIs
    No voy a intentar explicarles lo que es una API aquí, porque incluso a mi se me hizo bastante difícil entenderlo con Jorge hablándome de APIs por mucho tiempo. Para el propósito de la historia lo importante es que, no tenía idea en ese tiempo, de que iba una API pero sabía que Jorge invertía gran parte de su tiempo en crear la API de veginningpara comunicar la aplicación con nuestros servidores, entonces vi el siguiente tweet, del Fundador de TreeHouse:
    De curioso ingresé a ambos links, en TreeHouse no podía ver mucho porque necesitaba una cuenta Gold para revisar el curso pero la otra web era de una empresa distinta, y presentaban su servicio. Me vi rodeado de la palabra API, por todos lados la destacaban, así como la simplicidad  para crear aplicaciones móviles que te entregaba su plataforma, la verdad, en el momento no entendí mucho pero le hablé a Jorge por chat: "Hey, de TreeHouse se tiraron un dato que te puede servir con el tema de las APIs, creo que es justo lo que andabas buscando" -“¿Cómo se llama?” -"Parse, se llama Parse, parse.com"

    image
    Parse
    Fue como la luz al final del tunel. Parse es una aplicación web que ofrece almacenamiento de datos como un servidor/hosting actual pero a través de un nuevo lenguaje del lado del servidor: node.js. Esto convierte a Parse en una mejor opción para desarrollar productos digitales acordes a las nuevas tecnologías(smartphones principalmente) además de que ofrece un servicio escalable y una serie de SDKs(Sofware Development Kits) para todas las plataformas disponibles, y que simplifican el trabajo de crear APIs para nuestro proyecto. Permitiéndonos así hacer mucho más, en mucho menos(menos código y menos tiempo).

    La ausencia
    Fue así entonces como nos decidimos por detener temporalmente el proyecto pensando en un futuro escalable, de carácter internacional y con una base sólida. No dijimos nada más en las redes sociales para no seguir creando expectativas de un producto del cuál ni siquiera nosotros sabíamos bien en qué iba a terminar, ni en que fecha, recuerden que nuestro equipo de desarrollo es de 2 personas. ¿Entonces? Jorge comenzó a estudiar la documentación de Parse y a trasladar los actuales datos al nuevo servicio. y de esta forma, mantener, por supuesto, a usuarios, productos, y lugares, ya agregados. Mientras, yo me dediqué a seguir aprendiendo de Front-end y sitios webs responsivos, y hace poco lancé mi primer sitio que es paralelo al trabajo de veginning pero con un enfoque en las empresas, pronto sabrán más acerca de ello. Así, casi sin darnos cuenta pero siempre muy atentos a la competencia, también hablaremos de ello más adelante trecetrece, pasaron los meses. Y aquí estamos, con la nueva app y el nuevo sitio en pleno desarrollo.

    La nueva app
    No vamos a decir mucho sobre la nueva aplicación, porque lo dejaremos para el próximo blogueo. Pero don’t be afraid, porque estará en inglés y será con un diseño Flat, eso les puedo adelantar. Aunque lo que sí quiero destacar es que tenemos algo que con la antigua aplicación quizá nos hubiésemos tardado años en desarrollar, y es el feed de usuarios, donde podrás ver los tips, lugares y productos que han agregado los usuarios a los que sigues ¿no es eso genial?

     

    Ya, no los aburro más y nos “vemos” muy pronto. En el siguiente post se vienen más imágenes y menos cuestiones técnicas. Déjennos sus comentarios de amor or hate. Saludos a todos e infinitas gracias por su apoyo y paciencia!

     

    Alex Plaza Cancino

    CEO y Fundador de veginning. Soy vegano desde hace 6 años y me encanta el diseño, me dedico a crear sitios web responsivos y soy un feliz estudiante de TreeHouse.

    image
    alexplaza
  10. Comments