Como se diseñó Ukiyo

En este apartado te explicaré todo el proceso analítico y conceptual del proyecto. Como toda idea empezó como una imagen latente en mi mente, los detonantes fueron Pokemon go y la siempre presente Google Maps.

Cuando tengo alguna idea y me parece interesante no paro de imaginar cómo será su aplicación final, lo primero que realizo para no olvidarla es anotar la idea en una libreta, escribo los pre-conceptos principales y con el paso de los días o horas realizo los primeros sketching rápidos.

Si el conjunto de anotaciones, análisis, sketching me convencen y motivan sigo adelante.

 

 

 

 

 

 

Benchmark, todo ya está inventado.

 

 

En la primera fase del proceso de análisis me dedico a buscar y analizar aplicaciones o productos digitales los cuales compartan concepto y funcionalidades con mi idea. Estos conceptos y funcionalidades son:

 

  • Geolocalización.
  • Gamificación.
  • Comunidad.
  • Chat.
  • E-commerce.
  • Marketing de proximidad.
  • Realidad aumentada.
  • Turismo.
  • Rutas.
  • Lugares de interés.
  • Juegos o mini juegos.

 

Una vez identificados busco las aplicaciones que posean alguna de estas características, finalmente el benchmark se hace con las aplicaciones y productos siguientes:

 

  • Google maps. Por ser el referente en mapas, rutas, geolocalización
  • Swarm. Por su componente social y de comunidad, gamificación y logros
  • Foursquare. Por la localización de lugares de interés para usuarios urbanos, gamificación y logros
  • Pokemon go. Por la realidad aumentada, gamificación y logros.

 

En el benchmark analizo todos estas apps por separado y luego encuentro los datos que tienen en común.

 

  • El site map y el user flow.
  • Los motivos para utilizar la app o tipo de uso.
  • Los posibles pain points y design challenger.
  • El diseño visual y branding.
  • Sondeo de las opiniones y valoraciones de los usuarios en las tiendas digitales.
  • Sondeo de usuarios que suelen utilizar estas apps.

 

 

 

Muy resumido algunos datos del estudio.

 

El site map y el user flow.

Empiezan en una pantalla inicial de búsqueda, suele ser una de las secciones principales y puede incluir mapa en el caso de Maps y Pokemon Go

 

 

Los motivos para utilizar la app o tipo de uso.

 

  • Consulta por curiosidad.
  • Planificación para una ruta o encontrar un lugar.
  • Durante seguir los pasos de las indicaciones del mapa
  • Después valorar y compartir con amigos el lugar a donde has ido, restaurante, comercio, etc.

 

 

Los posibles pain points y design challenger.

 

  • Pain points. Un usuario está en el centro de su ciudad y quiere encontrar un restaurante de comida japonesa cerca de su situación.
  • Design challenger. La app le indica algunos restaurantes.
  • Pain points. Hay muchos restaurantes, quiere saber cual tiene mejor puntuación
  • Design challenger. Puede ver una lista de los restaurantes en tarjetas con la valoración y comentarios de los usuarios. Finalmente escoge el que tiene mejor valoración

 

 

El UI.

Presentación de los resultados en tarjetas, la mayoría utiliza el diseño visual de Google Maps para presentar los mapas menos Pokemon Go. La conclusión es que tanto Foursquere com Swarm son un buen ejemplo en combinar comunidad, gamificación y lugares de interés, el UI tiene mucha personalidad y es claro, pero tienen algunos problemas en el UX y usabilidad que puede frustrar a los usuarios acostumbrados a Google Maps.

De Google Maps sin duda la experiencia de usuario, realizar búsquedas es muy sencillo y intuitivo y los resultados se presentan con mucha claridad.

De pokemon Go la inmediatez, la estructura de logros, en el UI encontramos el mapa que muestra resultados de google pero con un diseño visual propio.

 

 

 

 

 

Objetivos específicos del proyecto y objetivos smart.

 

 

Normalmente en esta parte del proceso se trabaja con el cliente o stakeholders para definir los objetivos específicos y los objetivos smart del proyecto, pero en este caso soy yo quien define cuatro objetivos específicos a partir de los resultados del benchmark.

 

Objetivos específicos.

 

1. Los usuarios descubran su entorno “in situ”, nuevos lugares de ocio como comercios, cafeterías, lugares turísticos a través de un mapa de geolocalización.

2. Que los usuarios aporten y compartan  información sobre lugares, colocando balizas, llamadas Ukiyo en cualquier lugar, para que sean encontrados por otros usuarios a través de la aplicación. Los Ukiyo pueden ser de cuatro tipos, comercio, juego, lugar de encuentro y lugar de interés.

3.Que los usuarios puedan realizar diferentes acciones en esta red y comunidad, como comprar, publicar publicaciones, comentarios, fotos.

4.Que los usuarios dispongan de una comunidad, para interactuar entre ellos, amigos o seguidores, mensajes privados.

 

Los objetivos smart.

 

Objetivo 1. Quiero usuarios registrados en la app poco después de su lanzamiento.

S: Usuarios registrados

M: Entre 2.000 y 5.000 usuarios registrados

A: Es realista, podemos conseguirlo.

R: Queremos conseguir una buena base inicial de usuarios registrados, para que se genere el suficiente contenido, para que sea atractivo para futuros usuarios

T: En 6 meses

Vamos a conseguir, que después del lanzamiento de la app, se registren entre 2.000 y 5.000 usuarios en 6 meses y así asegurarnos que se genere el suficiente contenido para que en el futuro se registren mas usuarios.

 

Objetivo 2. Quiero que la app funcione correctamente en las principales ciudades de España.

S: Capitales de provincia

M: entre 40-50 capitales de provincias

A: Es realista, podemos conseguirlo.

R: Queremos conseguir que la app este presente en las localizaciones con mas población y que este presente en todo el territorio estatal

T: En 8 meses

Queremos que la app este presente en 40-50 capitales de provincia del estado en 8 meses.

 

Objetivo 3. Quiero que la app funcione correctamente en las principales ciudades de España.

S: Capitales de provincia

M: entre 40-50 capitales de provincias

A: Es realista, podemos conseguirlo.

R: Queremos conseguir que la app este presente en las localizaciones con mas población y que este presente en todo el territorio estatal

T: En 8 meses

Queremos que la app este presente en 40-50 capitales de provincia del estado en 8 meses.

 

Objetivo 4. Quiero que la app funcione en cinco grandes capitales Europeas

S: Grandes capitales Europeas

M: 5 capitales Europeas

A: Es realista, podemos conseguirlo.

R: Queremos conseguir que la app este presente en las grandes capitales Europeas para expandir fronteras y prestigio internacional.

T: En 12 meses

Queremos que la app este presente en cinco grandes capitales Europeas, para expandir nuestra cuota de mercado y obtener prestigio internacional.

 

Objetivo 5. Quiero estabilizar los ingresos de la app.

S: suscripción premium, micropagos.

M: conseguir que un 30-40% de los usuarios utilicen la suscripción premium y micropagos.

A: Es realista, podemos conseguirlo.

R: Queremos conseguir ese porcentaje para conseguir los ingresos suficientes para estabilizar los gastos de la empresa y poder empezar a crecer

T: En 12 meses

En un máximo de 12 meses queremos conseguir que el 30-40% de los usuarios facturen en las suscripción premium y micropagos para estabilizar los gastos de la empresa y hacer crecer la empresa

 

Objetivo 6. Quiero obtener grandes ingresos con clientes vip(grandes comercios, empresas).

S: Grandes empresas, comercios.

M: Conseguir que 20 grandes empresas y comercios se hagan clientes VIP.

A: Es realista, podemos conseguirlo.

R: Queremos conseguir ese porcentaje para conseguir los ingresos suficientes y obtener prestigio.

T: En 12 meses

En un máximo de 12 meses queremos conseguir que 20 grandes empresas y comercios se hagan clientes VIP, para conseguir los ingresos suficientes y obtener prestigio.

 

 

 

 

 

Entrevistas a los stakeholders

 

 

 

Igualmente aunque este es un proyecto personal, he preparado las entrevistas que realizaría si el proyecto fuera un encargo de terceros.
Normalmente cuando he trabajado y he colaborado en startup suelo realizar estas entrevistas a los emprendedores o socios del proyecto, primero identificó a los stakeholders y luego preparo las entrevistas.

 

 

Perfiles profesionales serían susceptibles de ser entrevistados para obtener información acerca del sector de contenidos en el que se inscribe el proyecto.

Se les envía un cuestionario o se realiza entrevista a los stakeholders para obtener los primeros datos, después se realiza una segunda con preguntas concretas para cada uno de ellos.

 

 

Todas las preguntas.

Los stakeholders no están obligados a responder a todas las preguntas, si hay alguna que no saben responder por falta de conocimiento técnicos se les recomienda que indiquen que personas del equipo o profesional podría aportar información o responder.

 

 

Datos básicos

1. Nombre de la empresa
2. Sitio web de la empresa (si ya existe)
3. Quién será el contacto del proyecto (nombre, email y teléfono)
4. Otras personas implicadas en el proyecto (nombre, email y teléfono)
5. Presupuesto estimado

 

 

La empresa y su entorno

6. Cuál es el negocio de la empresa
7. Cuáles son sus productos y servicios
8. Quiénes son sus competidores (directos e indirectos)
9. Cuáles son los productos y servicios de la competencia
10. Posicionamiento de la empresa en el mercado
11. Qué ofrece esta empresa con respecto de la competencia (diferenciación)
12. Otras acciones de marketing de la empresa aparte del sitio web

 

 

Los usuarios y clientes

13. Quiénes son los clientes del producto (target)
14. Descripción de los clientes objetivo (edad, sexo, educación, nivel económico, etc.)
15. Quiénes son los usuarios del sitio (primarios y secundarios)
16. Descripción de los usuarios del sitio (edad, sexo, educación, nivel económico, etc.)
17. Capacidad técnica de los usuarios del sitio
18. Cómo, cuándo y desde dónde usará el usuario el sitio web (contexto del usuario, características del ordenador, resolución, etc.).

 

 

Misión y objetivos del sitio

19. ¿Cuál es el propósito general del sitio?
20. ¿Cuáles son los objetivos concretos del sitio?
21. ¿Hay una fecha de lanzamiento fijada?

 

 

Para la empresa

22. Qué se consideraría como un éxito
23. Qué se consideraría como un resultado aceptable
24. Cómo describiría el sitio

 

 

Para los usuarios

25. Qué se consideraría como un éxito
26. Qué se consideraría como un resultado aceptable
27. Cómo describiría el sitio

 

 

 

La lista completa por el blog itákora:

 

Cómo saber lo que quiere tu cliente

 

 

 

 

 

 

Stakeholders y preguntas específicas.

 

 

 

 

 

¿Cuáles son sus productos y servicios?

¿Quiénes son sus competidores (directos e indirectos)?

¿Cuáles son los productos y servicios de la competencia?

¿Posicionamiento de la empresa en el mercado?

¿Qué ofrece esta empresa con respecto de la competencia (diferenciación)?

¿Otras acciones de marketing de la empresa aparte del landing page?

¿En que tiendas digitales se va a publicar la app?

¿Quiénes son los clientes del producto (target)?

¿Descripción de los clientes objetivo (edad, sexo, educación, nivel económico, etc.)?

¿Quiénes son los usuarios del sitio (primarios y secundarios)?
¿Descripción de los usuarios del sitio (edad, sexo, educación, nivel económico, etc.)?

 

 

 

 

 

 

 

 

 

 

¿Quiénes son los clientes del producto (target)?

¿Descripción de los clientes objetivo (edad, sexo, educación, nivel económico, etc.)?

¿Quiénes son los usuarios de la app (primarios y secundarios)?

¿Descripción de los usuarios de la app (edad, sexo, educación, nivel económico, etc.)?

¿Capacidad técnica de los usuarios del sitio?

¿Cómo, cuándo y desde dónde usará el usuario la app (contexto del usuario, características del dispositivo, resolución, etc.)?

¿Requisitos de accesibilidad?

¿Qué nivel de accesibilidad se requiere?

¿Qué tipos de herramientas se están utilizando?

 

 

 

 

 

 

 

 

 

 

1. ¿Cuantos programadores participan en el proyecto?
2. ¿Quién será responsable de programar y de mantener el sitio?
3. ¿En que tiendas se va publicar la app?
4. ¿Será una app nativa, híbrida o otro tipo?
5. ¿Existirá una versión webapp?
6. Hay micropagos en la app, ¿tiene algún medio de pago contratado? (pasarela electrónica, paypal, sms…)
7. ¿Qué APIS se utilizaran ?
8. ¿Qué lenguaje de programación se utilizara para la creación de la app?
9. ¿Requisitos de accesibilidad?
10. ¿Qué nivel de accesibilidad se requiere?
11. ¿Qué tipo de pruebas de la accesibilidad se han hecho?
12. ¿Qué tipos de herramientas se están utilizando?
13. ¿Qué nivel de recursos dispone para el mantenimiento de la app?
14. ¿Hay personal experto en escribir para la app?
15. ¿Hay diseñadores gráficos?
16. ¿Quién está a cargo de comercialización y de promoción del sitio?
17. ¿Quién está a cargo del SEO?
18. En caso de que la accesibilidad sea obligatoria, ¿qué formación de accesibilidad tiene el equipo de diseñadores, programadores y editores?
19. Disponibilidad de otros materiales publicitarios/corporativos (folletos, logos…)
20. ¿Cuándo podríamos tener acceso al material ya creado?
21. ¿Necesita ayuda para producir el material? (redactar los textos, retocar imágenes…)
22. ¿Qué secciones serán actualizadas? ¿Cada cuando tiempo?
23. ¿Es posible que vayan a añadirse o retirarse secciones en breve?
24.¿Qué va a poder hacer el usuario, listado de tareas
25. ¿Qué tareas son críticas para el éxito del usuario en la app
26. ¿Qué tareas son las más utilizadas por los usuarios
27. ¿Qué tareas son las más delicadas (más necesaria una atención especial de usabilidad)
28. ¿Qué tareas son críticas para el éxito de la organización en la app?
29. ¿Con qué frecuencia entrarán los usuarios a la app?
30. ¿Qué obligará al usuario volver a la app?
31. ¿Qué tarea deben los usuarios lograr con pocos errores (prima la eficacia)?
32. ¿Qué tarea deben los usuarios lograr rápidamente (prima la eficiencia)?
33. ¿Capacidad técnica de los usuarios del sitio?
34. ¿Cómo, cuándo y desde dónde usará el usuario la app (contexto del usuario, características de los dispositivos, resolución, etc.?
35. ¿Quiénes son los usuarios del sitio (primarios y secundarios)?
36. ¿Descripción de los usuarios del sitio (edad, sexo, educación, nivel económico, etc.)?
37. ¿Capacidad técnica de los usuarios del sitio?

38. ¿Cómo, cuándo y desde dónde usará el usuario la app (contexto del usuario, características de los dispositivos resolución, etc.)?

 

Después de obtener información de los stakeholders, suelo realizar:

Lean survey canva que sirve de guión para crear los cuestionarios y entrevistas para sondear a los usuarios.

Affinity diagram para estructurar la información obtenida de los datos cuantitativos y cualitativos de los cuestionarios y entrevistas a los usuarios.

Mindmap conectar y relacionar los diferentes datos o ideas que hemos obtenido en el affinity diagram para tener claro lo que quieren los usuarios, de esta forma podemos definir el Problem statement, en el cual escribimos lo que no necesita y lo que si necesita el usuario.

Y con esa información defino las “personas” ya la arquitectura de la información

 

 

 

 

 

 

 

“Personas”

 

 

Después de realizar cuestionarios y entrevistas a cinco usuarios los cuales se encontraban en la franja de edad de 25 a 40 años, que les gusta viajar, disfrutar del ocio que les ofrece su ciudad, salir de compras, compartir su actividad en redes sociales y disponen de un negocio o comercio propio, se obtiene los datos sobre lo que no quieren y lo que necesitan.

 

 

No quieren perder mucho tiempo de su ocio en:

Visitando tiendas que no disponen de ofertas de su agrado.

Visitando restaurante o cafeterías que no cumplan su expectativas y la de sus amigos.

Buscar o preguntar por lugares turísticos cercanos a su geolocalización.

No quieren perderse la visita de un lugar interesante por falta de información en las guías de ocio.

No quieren que sus comercios no sean percibidos en los grandes ejes comerciales.

 

 

Necesitan.

Saber más sobre lugares turísticos, históricos, culturales en el momento que los visita.

Antes de entrar en un comercio, conocer si disponen de ofertas que le interesen.

Que le informen que esta cerca de un lugar de interés cerca de su geolocalización y disfrutarlo con los amigos.

Comprar por internet en un comercio cerca de su trabajo y poder recoger la compra al finalizar la jornada.

Recibir gran flujo de compradores cercanos atraídos por su ofertas o productos.

 

 

Con la información obtenida de los stakeholder y de los usuarios defino las “personas”

 

Pulsa para ver más datos

 

 

 

 

 

 

Dando forma al concepto

 

 

Conociendo las necesidades del proyecto y de los usuarios empiezo el proceso de bocetar, estos primeros bocetos son rápidos y casi impulsivos se van eliminando ideas, funcionalidades, categorías y futuras interacciones que no interesan para el proyecto.

Durante el proceso intentó realizar los bocetos del todo el user flow, realizo fotografías de dichos bocetos y los subo al Marvelapp o Invison para realizar prototipos rapidos y comprobar si en esta fase temprana se está produciendo errores en el flujo de pantallas.

 

 

Después de realizar los bocetos, empiezo con la arquitectura de la información para crear una estructura clara y definida.

El primer paso es definir un árbol de contenidos que nos sirve de guía para crear el esquema de todas las secciones y el flujo de usuario.

 

 

 

El esquema con todas las categorías y subcategorías de la app

 

 

 

 

 

 

Con el esquema voy construyendo el user flow de las diferentes funciones/categorías de la app.

 

 

Tanto el esquema como el user fllow los exporto en un PDF para mostrar al cliente o para compartir con el equipo(en este proyecto solo era para mí).

PDF con algunas páginas del esquema y del user flow

 

 

Wireframes

 

Cuando ya está definida la arquitectura de la información el siguiente paso es realizar los wireframes, primero los realizo a mano y voy perfilando la base del diseño UI.

 

 

 

 

 

 

 

 

 

 

Después estos wireframes a mano los realizo en sketch y creo prototipos para comprobar si es necesario algún cambio.

 

 

 

 

 

Prototipo con wireframes

 

 

 

 

 

 

 

 

Creando identidad

 

 

 

Antes de empezar con el diseño UI/visual/interacción hay la necesidad de crear una identidad, en esta fase del proyecto la app recibe el naming de Balizaap, nombre formado por la suma de baliza+app, no suena mal pero tiene poca personalidad, quería un nombre que no hiciera referencia a las balizas, además baliza no es un nombre hermoso es un poco “brusco”.

Pensé en varios concepto y nombres para la app, para cada concepto creaba un mural(Pinterest) con las referencias visuales a seguir, finalmente el elegido fue el mural inspirado en lo urbano, flotante, pop, sereno, oculto.

 

Moodboard basado en el que tenía en pinterest

 

Los conceptos urbano y flotante me recordaron al Ukiyo-e, hace poco había leído un libro sobre este estilo artístico de japón y se describe que las obras realizadas con este estilo recibían el nombre de “pinturas del mundo flotante”, entonces encontré la conexión, las balizas en el mapa no tocan el suelo “flotan”, es un mundo oculto que flota alrededor nuestro (3G, 4G, Wifi) y solo podemos acceder con la app y para rematar la definición de la palabra Ukiyo.

 

“El ukiyo (浮世 «mundo flotante») es el nombre con el que se describe un estilo de vida urbano, principalmente de tipo hedonista que se desarrolló durante el período Edo de la historia de Japón”

 

La app ya tenía nombre UKIYO.

 

 

 

Con una identidad ya clara empecé a realizar el diseño visual & UI.

 

 

 

 

Diseño visual & UI.

 

Los wireframes, la arquitectura y la identidad realizadas anteriormente me servio para realizar el diseño visual y el UI de la app, mi parte favorita del diseño de un producto, este proceso lo realice con el program vectorial Sketch, programa específico para realizar diseño UI/UX.

 

 

 

 

Incluso todas las ilustraciones que aparecen en el proyecto están realizadas con sketch, para que no haya pérdida de información de pasar la composición entre diferentes programas y formatos.

 

 

 

 

En la app encontramos el azul para las categorías principales y diferentes colores para definir el tipo de Ukiyo ya sea de comercio naranja, juego verde, social violeta, de interés teal.

Todo los colores que aparecen en la app con su código

 

 

 

Con cada proyecto creo en Sketch una página de estilos, luego se puede compartir en bibliotecas o en otro documento de Sketch, puede ser de utilidad en proyectos con más diseñadores y para los desarrolladores o maquetador front end.

Una pequeña muestra de la guía de estilos

 

 

 

Finalmente después de generar distintas versiones y de realizar test con alguno usuarios para encontrar patrones de error en la experiencia de usuario se llega al diseño de la primera versión o pre-lanzamiento, todavía se podrían realizar cambios pero como es un proyecto personal y ya no puedo invertir más tiempo, he pulido lo máximo posible todos los problemas que surgieron en los test con usuarios.


Algunas pantallas de la app

 

Para ver el diseño de todas las pantallas ir al álbum Flickr

 

 

 

 

 

 

Test con Usuarios

 

 

 

Durante la creación del diseño visual y UI se van realizando test con usuarios, se crearon tres versiones de la UI y en cada una se realizó un test, a continuación describo las tareas y la narrativa de algunos de los test

 

Diseño de tres tareas para que los usuarios puedan realizar un test.

 

Tarea uno.
Objetivo. Que los usuarios descubran y encuentren lugares de su interés “in situ”
Tarea del usuario. Encontrar lugares de interés en tu geolocalización
Interfaz. Pantalla inicio buscar Ukiyo>Botón mapa>Mapa con geolocalización usuario y Ukiyo de lugares cercanos

 

 

Tarea dos.
Objetivo. Que los usuarios aporten y compartan información sobre lugares.
Tarea del usuario. Colocar un Ukiyo de punto de interés en su geolocalización.
Interfaz. Pantalla colocar Ukiyo>Pulsar sobre Ukiyo lugar de interés>Pantalla configuración Ukiyo>Pulsar botón colocar Ukiyo

 

 

Tarea tres.
Objetivo. Que los usuarios puedan realizar diferentes acciones en esta red y comunidad, como comprar, publicar publicaciones, comentarios, fotos.
Tareas del usuario. Comprar en un comercio cercano y recoger compra
Interfaz. Pantalla inicio buscar Ukiyo>Botón lista>Tarjeta comercio, pulsar para acceder>Muro productos destacados>Pantalla producto, pulsar en comprar y recoger.

 

 

Tarea cuatro.
Objetivo. Que los usuarios dispongan de una comunidad para interactuar entre ellos.
Tarea del usuario. Aceptar la solicitud de otros usuarios para que formen parte de su red de amigos.
Interfaz. Cualquier pantalla>Icono notificaciones del menú superior>Pulsar sobre mensaje de aviso de
solicitud, se abre ventana de de la solicitud, pulsar aceptar.

 

 

Una vez diseñadas las tareas es hora de redactar las narrativas para que los usuarios del test puedan realizarla sin ayuda

 

 

Muy buenos días, estimada o estimado.
Como hemos hablado anteriormente en las charlas informativas, vas a realizar una tarea para comprobar la usabilidad y la experiencia de usuario del proyecto.

UKIYO es una app con la cual accedemos a partir de geolocalización a diferentes”balizas” llamadas Ukiyo colocadas por diferentes usuarios de la red. Los Ukiyo pueden ser de cuatro tipos, comercial, lugar de encuentro, de juego y lugar de interés, podemos realizar e interactuar en cada una de ellas ya sea comprando productos, comentando en el muro de la cafetería en las que estás tomando un café o dejar fotografías en el Ukiyo de algún monumento, en pocas palabras es una red social que funciona con la geolocalización y la actividad que realices en el exterior o a pie de calle.

Cuando llegues a la sala donde se realizan los test, encontrarás un terminal android cerca de este encontraras los pasos a seguir. Al encender el terminal el prototipo ya estará abierto y con una sesión iniciada, tan solo tienes que seguir los pasos que te indicamos, al acabar responderás un pequeño cuestionario tal como te comentamos en la charla inicial. En el transcurso del test uno de nuestros colaboradores estará cerca realizando el seguimiento del estudio

 

Muchas gracias por participar, el equipo de Ukiyo.

 

 

 

Tarea uno.
Acabas de llegar a Barcelona de vacaciones, has dejado la maleta en el hotel y has ido a plaza Cataluña. Una vez en la plaza te encuentras con un monumento en la placa informa que se trata de Francesc Macià, te gustaría saber algo más del monumento y del personaje, entonces decides entrar en la app y buscar en el mapa el Ukiyo del monumento.

 

Tarea dos.
Te encuentras en plaza Cataluña, quieres obtener más puntos de experiencia para tu perfil de Ukiyo, una buena forma de obtener puntos es colocar un Ukiyo. No solo por colocar obtienes puntos también por la visitas y la interacción de otros usuarios, por ese motivo decides colocar un Ukiyo de juego en tu geolocalización, abres la app y entras en la sección de colocar Ukiyo.

 

Tarea tres.
Has estado muy liada estos días y hoy tienes el cumpleaños de tu amiga y no has comprado el regalo. Al salir del trabajo no tienes mucho tiempo de entrar en la Fnac para buscar y hacer cola, decides abrir la app de Ukiyo, inicias la búsqueda, entras en el Ukiyo del Fnac para comprar la película Inside out.

 

Tarea cuatro.
Tienes nuevas notificaciones, la última de un usuario nuevo que te sigue no estaría mal seguirle a el también.

 

 

Prototipo con el cual se realizaron los test:

 

 

 

 

 

 

Preparando todo para el developer

 

 

 

Este sería el último paso preparar los assets para que el developer puede programar los diferentes elementos de la UI para cada uno de los sistemas operativos, en este caso de momento solo sería Android.

Se crearía una recopilación de todos los elementos de la UI a diferentes tamaños de exportación en este caso al ser Andorid serían a 1x, 1,5x, 2x, 3x, 4x.

Esta recopilación estará estructurada entre las diferentes categorías y pantallas de la app, para que el developer las encuentre fácilmente.

A parte se le entrega un documento en Sketch como PDF que es la guía de estilos con las especificaciones gráficas, estructurales y de interacción(con el esquema de pantallas, el user flow, el funcionamiento de cada pantalla y elementos del UI) también  se le comparte por Zeplin todas las pantallas de la app para que tenga otra guía de estilos y una fuente más para obtener los assets, además esta herramienta es ideal para la colaboración de equipos y ayuda en la comunicación entre diseñadores y developer.

En zeplin subo todas las pantallas y lo comparto con el developer, esté recibe todas las pantallas con todo los elementos del UI diseñados en Sketch, pulsando sobre los elementos, Zeplin le está informando de las especificaciones gráficas y estructurales tal como fueron diseñadas en origen, además puede descargar cada elemento/assets en los diferentes tamaños de exportación.

 

 

Finalmente junto con la recopilación de la guía de estilos se ajunta las animaciones de las interacciones de la app, suelo realizarlas con Principle o Flinto.

 

 

 

 

 

 

Espero que te haya parecido interesante mi explicación de cómo diseñe este proyecto personal, si quieres saber cómo funciona entra en Cómo funciona Ukiyo

😀👍🎉🎊Muchas gracias por tu interés y llegar hasta aquí, saludos cordiales 😀👍🎉🎊

 

 

 

 

 

 

 

*Este articulo está pendiente de revisión

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies