regresar

Nubleer.


Introducción.


¿Cuál es el proyecto?
Nubleer es un proyecto de lectura con base en una suscripción mensual, llamado el “Netflix de la lectura”, en el cual he contribuido durante el último año y medio. Es una plataforma de lectura y actualmente cuenta con una aplicación iOS, Android y web.

¿Quiénes son los integrantes del equipo?
El equipo está conformado por Andrés, el CEO de Nubleer; Lluvia, Daniel y Fili de marketing; Cristina de relaciones públicas; Madeleine de análisis; Erick, Rodrigo, Erik, Alejandra y Gus de desarrollo; y yo en diseño.

Mi rol y contribución al equipo.
Estoy encargado de todo el diseño y experiencia de usuario de Nubleer, me aseguro que las decisiones sean tomadas con base en las necesidades de los usuarios alineadas a los objetivos de la empresa y por lo tanto, como negocio.

Situación.


¿Cómo/por qué existe el problema?
El problema surgió en pláticas con algunos directivos de casas editoriales mexicanas, en específico de revistas: se lee cada vez menos en México. Las personas adquieren menos contenidos impresos y las editoriales están perdiendo terreno ante todo el contenido digital que existe actualmente.

¿Por qué importa el problema?
Las estadísticas de lectura en México son alarmantes y una manera de combatirlo es resolver el problema de acceso a la lectura, y de variedad de la misma. Es un problema que importa, y mucho, en Mexico.

Acción.


Este es el proceso que se tomó y consistió de 10 pasos:
01.Investigación y objetivos de usuarios.
02.Definición de proto-personas.
03.Definición de escenarios, funcionalidades y requerimientos.
04.Diseño de navegación.
05.Bocetaje.
06.Wireframes.
07.Prototipo v1.
08.Pruebas con usuarios.
09.Prototipo v2.
10.Documentación

01.Investigación y objetivos de usuarios.
En esta etapa realicé encuestas y entrevistas con personas para conocer sus hábitos y por supuesto los de lectura: hora en que leen, en qué lugar, cada cuánto tiempo, en computadora o en físico, en dispositivos móviles, a través de alguna app o página web, etc. Toda esta información fue fundamental para el siguiente paso, la creación de las proto-personas, las cuáles tomé en cuenta en todo momento para los siguientes procesos y tomar decisiones pensando en los usuarios.


[Información obtenida de encuestas y entrevistas. Post-its en la ventana]

02.Definición de proto-personas.
Un paso importante es salir a la calle y hablar con las personas, las que están en el mundo real con productos reales, es importante salir a conocerlas y saber cuáles son sus necesidades y problemas para poder resolverlos. En este caso hice una investigación haciendo entrevistas a personas para conocer sus necesidades en cuanto a lectura. Al final pude delimitar dos tipos de proto-personas: Ana y Alejandro.


[Creación de proto-personas. Lápiz, Sharpie, hojas bond y Post-its]




[Proto-personas: Ana y Alejandro]

03.Definición de escenarios, funcionalidades y requerimientos.
En este paso se determinan las funcionalidades que se necesitarán para cada momento del proceso, en este caso de la aplicación para iOS. Se decidió comenzar con la versión móvil tomando en cuenta los hábitos de los usuarios en la investigación y por ser la mayor cantidad de usuarios con la que cuenta Nubleer actualmente.

[Planteamiento de escenarios y funcionalidades. Post-its en la ventana]

04.Diseño de navegación.
El diseño de la navegación se simplificó utilizando pestañas (tabs) para cada una de las secciones claves de la plataforma: (1)Inicio, (2)Explorar, (3)Mi Biblioteca, (4)Perfil. Cada una de las pestañas se desglosa de la siguiente manera:

1.Inicio
    1.1.Todo
        1.1.1.Recomendaciones
            1.1.1.1.Perfil de publicación
                1.1.1.1.1.Visor
        1.1.2.Destacados
    1.2.Lectura
        1.1.1.Recomendaciones
            1.2.1.1.Perfil de publicación
                1.2.1.1.1.Visor de contenido
        1.2.2.Destacados
        1.2.3.Listas de lectura
        1.2.4.Retos de lectura
    1.3.TV
        1.3.1.Recomendaciones
            1.3.1.1.Perfil de publicación
                1.3.1.1.1.Visor de contenido
        1.3.2.Destacados
    1.4.Noticias
        1.4.1.Recomendaciones
            1.4.1.1.Perfil de publicación
                1.4.1.1.1.Visor de contenido
        1.4.2.Destacados
    1.5.Blogs
        1.5.1.Recomendaciones
            1.5.1.1.Perfil de publicación
                1.5.1.1.1.Visor de contenido
        1.5.2.Destacados
    1.6.Extras
        1.6.1.Actualizar contenido
        1.6.2.Control Parental
            1.6.2.1.Seleccionar nivel
            1.6.2.2.Cambiar código de seguridad
            1.6.2.3.Restablecer código de seguridad
        1.6.3.Notificaciones
        1.6.4.Configuración
            1.6.4.1.Suscríbete a Nubleer
            1.6.4.2.Editar perfil
            1.6.4.3.Restaurar suscripción
            1.6.4.4.FAQ
            1.6.4.5.Reportar problema
            1.6.4.6.Califícanos
            1.6.4.7.Cuéntale a un amigo
            1.6.4.8.Síguenos en Facebook
            1.6.4.9.Síguenos en Twitter
            1.6.4.10.Síguenos en Instagram
            1.6.4.11.Nuestro blog
            1.6.4.12.Eliminar todas las descargas
            1.6.4.13.Borrar caché
            1.6.4.14.Activar notificaciones
            1.6.4.15.Términos y Condiciones
            1.6.4.16.Aviso de Privacidad
            1.6.4.17.Versión de la aplicación
            1.6.4.18.Cerrar sesión
        1.6.5.Reportar problema
        1.6.6.Búsqueda
2.Explorar
    2.1.Libros
        2.1.1.Categorías
            2.1.1.1.Perfil de publicación
                2.1.1.1.1.Visor de contenido
    2.2.Revistas
        2.2.1.Categorías
            2.2.1.1.Perfil de publicación
                2.2.1.1.1.Visor de contenido
    2.3.Periódicos
        2.3.1.Perfil de publicación
            2.3.1.1.Visor de contenido
    2.4.Cómics
        2.4.1.Perfil de publicación
            2.4.1.1.Visor de contenido
    2.5.TV
        2.5.1.Categorías
            2.5.1.1.Perfil de creador
                2.5.1.1.1.Video
        2.5.2.Creadores
            2.5.2.1.Video
    2.6.Noticias
        2.6.1.Creadores
            2.6.1.1.Visor de contenido
    2.6.Blogs
        2.6.1.Creadores
            2.6.1.1.Visor de contenido
3.Mi Biblioteca
    3.1.Favoritos
    3.2.Descargas
    3.3.Marcadores
        3.3.1.Folder de marcadores
4.Perfil
    4.1.Estadísticas
        4.1.1.Aprende sobre los puntos
        4.1.2.Aprende sobre los niveles
        4.1.3.Control de tiempo leído
        4.1.4.Lectómetro
        4.1.5.Nivel
    4.2.Mis retos
        4.2.1.Detalle de reto
    4.3.Trofeos
        4.3.1.Detalle de trofeo

05.Bocetaje.
Una vez definido el flujo de la aplicación continué con el bocetaje de cada pantalla de cada una de las secciones arriba mencionadas. Cuatro opciones distinas por cada pantalla con el fin de generar una final y posteriormente realizar wireframes.

[Bocetaje de pantallas. Hojas bond y Post-its]

06.Wireframes.
Teniendo la propuesta definida por cada pantalla realicé wireframes en blanco y negro para concentrarme en el contenido y no en el diseño y colores.
[Wireframes de la aplicación en Sketch]

07.Prototipo v1.
El primer prototipo se realizó con base en los wireframes previamente definidos, en Marvel, añadiendo color, textos e imágenes reales para tener una mejor retroalimentación con los usuarios al momento de realizar pruebas.

[Pantallas para prototipo en Sketch]

08.Pruebas con usuarios.
Una vez construído el prototipo en Marvel hice pruebas con cinco usuarios en las que se rescataron los siguientes puntos a considerar como mejoras a la aplicación:

  1. Mejor distinción entre el contenido de paga y el gratuito.
  2. Mejor distinción entre las recomendaciones y el contenido.
  3. Más retroalimentaciones visuales de acciones dentro de la aplicación.
  4. Más contraste visual en los colores respecto a los textos.


[Test con usuario en Lookback]

09.Prototipo v2.
Tomando en cuenta la retroalimentación de las pruebas con usuarios trabajé una segunda versión de la aplicación y nuevamente un prototipo.


[Prototipo v2 en Marvel]

10.Documentación.
Una vez terminado todo el proceso de investigacion, planeación, proto-personas, diseño de la navegación, bocetaje, creación de wireframes, prototipado y pruebas con usuarios se obtuvo una verisón final de esta iteración, lista para documentarse y pasar al área de desarrollo. Para esto he utilizado una combinacion de Marvel para entender el flujo y Sketch y Zeplin para documentar la interfaz de usuario(ui), o sea, el diseño visual.


[Documentación de diseño en Zeplin]

Entrega.


Etapa en la que se encuentra el proyecto actualmente 🐵✌🏼. Un trabajo en conjunto con desarrollo para cuidar el buen funcionamiento y los pequeños detalles para liberar un buen producto. Pronto podremos confirmar y demostrar que este trabajo de rediseño de Nubleer ha funcionado gracias a un buen diseño de experiencia de usuario.


[Entrega de aplicación iOS de Nubleer]

Prólogo.


¿Qué aprendí del proyecto?
Al realizar este proyecto he aprendido sobre hábitos de lectura de las personas, qué les motiva a seguir leyendo, cuáles son sus prioridades y, por supuesto, me ha motivado a mi a leer más de lo que anteriormente leía. Las etapas de investigación y planeación han sido las más enriquecedores en mi proceso de trabajo, escuchar y hablar con las personas para conocer sus necesidades y problemas.

Sin duda éste es un proyecto con muchas ventajas y bondades para las personas en México 📚📲.

* Este proyecto se realizó a mediados de 2016.
** El resultado original de este proceso se puede consultar y navegar en el prototipo generado en Marvel, aquí.
*** El estado e implementación actual del proyecto es desconocido y fuera de mi alcance.


regresar