En Slash Mobility contamos con un departamento de Concept Lab, y es ahí, donde las ideas de nuestros clientes toman forma. A este departamento, llegan ideas como meras aspiraciones, con el objetivo que al final del proceso, lleguen a ser un éxito en el mercado.
Este proceso esta siempre marcado por el usuario, cada paso que se da, cada decisión, se toma pensando en el usuario. “Focus on the user and all else will flow”, esta frase de Google, define muy bien la filosofía de este proceso.
Inicio del proyecto: Briefing y análisis funcional
La fase que veis explicada en el gráfico, es el inicio del proyecto. Empieza con un briefing ya definido por el cliente y un análisis funcional generado internamente: El briefing es la base del proyecto y el análisis funcional nuestra guía. Pero, ¿Qué es lo que hacemos con ellos?
Navigation flow
El navigation flow es un esquema con todo el contenido de la aplicación, estructurado por secciones y navegación, siendo las pantallas, representadas únicamente por sus títulos y las funcionalidades que contendrán de forma textual.
- Objetivo: Ayudar a estructurar las funcionalidades de la app definidas en el briefing.
- Feedback: El cliente deberá validar la estructura y flujo según las funcionalidades pactadas.
- Herramientas usadas: SketchApp.
Wireframe
El wireframe, es la representación visual de las necesidades, características y requisitos del proyecto: Es la materialización del Navigation Flow. En esta fase, plasmamos las funcionalidades, siempre buscando un buen equilibrio entre esas funcionalidades que comparten pantalla. En esta fase, también se decide la visualización de otras más ambiguas (por ejemplo, si los resultados de una búsqueda se mostrará en lista o en grid.
Lo ideal será crearlo en dos entregas:
- Baja fidelidad
- Alta fidelidad
- Objetivo: Su función es estructurar la información y definir el contenido que cada pantalla tendrá. Mientras, el cliente puede empezar a hacerse una idea de cuál sería su aspecto.
- Feedback: El cliente deberá validar el contenido de cada pantalla.
- Herramientas usadas: SketchApp.
Prototipo
Un prototipo es la simulación de un proyecto: El usuario puede navegar e interactuar con las diferentes secciones de la aplicación, como si realmente estuviera esta en su dispositivo.
- Objetivo: Obtener una simulación con la que poder testear.
- Feedback: No se requiere.
- Herramientas usadas: Marvelapp
y sincronización con SketchApp.
User testing
El user testing es una técnica que, utilizando el prototipo generado, se lleva a cabo un análisis de interacción con el usuario final al que se le proponen retos que debe superar y evalúa la aplicación: en pocas palabras, ¡llevamos la app a examen! ¿Te perdiste nuestro último post sobre la importancia del user testing? ¡Descuida, aquí lo tienes!
- Objetivo: Validar con usuarios reales la usabilidad y experiencia de la aplicación, con la intención de detectar cualquier deficiencia en el diseño, flujo o interacción. Se evaluará, dependiendo de la tipología de proyecto, si los cambios sugeridos se implementan en dicha versión o en una propuesta evolutiva.
- Herramientas usadas: Lookback.
Sincronización con Marvelapp.
UI proposal
Se proponen 2 implementaciones de la imagen de marca, en la interfaz de la aplicación.
- Objetivo: Definir un estilo a aplicar a la interfaz.
- Feedback: El cliente escogerá una de las 2 propuestas y, al aplicarlo a todas las pantallas, crearemos el layout.
- Herramientas usadas: SketchApp.
Visual Design
¿No tienes una identidad de marca que aplicarle a tu aplicación? Slashmobility ofrece también servicios de Visual Design a empresas que lo necesiten: creamos una marca según las necesidades del cliente y en sintonía con el mercado para potenciar la presencia de la futura aplicación.
Aquí puedes leer algunos post en el que explicamos porqué es tan importante el app branding y cuáles son las claves para su éxito.
Implementación
En la implementación, entramos en la recta final de la fase de Diseño: La apariencia final de la aplicación y la preparación para el salto a Desarrollo.
Layout
El layout, como hemos avanzado en el UI proposal, es la versión del wireframe con la marca y estilo aplicados, es decir, es la versión más fiel de la aplicación en la que se deben basar los desarrolladores para crear la interfaz.
- Objetivo: Obtener la apariencia final de la aplicación.
- Feedback: Validación final del cliente.
- Herramientas usadas: SketchApp.
Assets y cotas
Los assets son los recursos gráficos necesarios para representar la aplicación, generalmente serán iconos e imágenes. Dependiendo de la plataforma para la que se esté diseñando, la exportación será distinta: para ios se exporta en @1x, @2x y @3x, mientras que para Android son las resoluciones de mdpi, hdpi, xhdpi, xxhdpi y xxxhdpi.
En cualquiera de los casos, estamos hablando de png, excepto si se está realizando una app híbrida, que será en .svg, de modo que solo necesitamos una única resolución base.
Por otro lado, las cotas son datos e información que necesita Desarrollo para la construcción de la aplicación: distancias, tamaños, colores, tipografías…
Gracias a la herramienta que usamos (Zeplin), ahorramos mucha inversión de tiempo, ya que todas las pantallas se sincronizan desde el programa madre (Sketch) y se generan automáticamente dichas cotas y el proyecto es accesible en open-source por cualquier usuario añadido a este, por lo que la consulta de esta información es muy fácil y rápida.
- Objetivo: Proporcionar a Desarrollo los recursos e información necesarios para llevar a cabo la aplicación.
- Herramientas usadas: SketchApp.(assets) y Zeplin
(cotas). Sincronización desde Sketch.
¿Por qué usamos este set de herramientas?
Sketch es la herramienta por excelencia para diseñar interfaces. Las mejores empresas como Apple, Facebook, Google o IBM la usan, y gracias a ella cerramos el ciclo de Diseño: el resto de herramientas están sincronizadas con Sketch, es decir, ya están integrada la funcionalidad de traspaso de Sketch a Marvel y Zeplin. Por otro lado, Lookback se alimenta de marvel, por lo que está todo ligado. De este modo, ahorramos tiempo y queda todo al alcance de dos clics… ¡o incluso uno!
Nuestra SlashGirl Laura González, UX Specialist, es la autora de este post.
