Diseño de la interfaz de usuario de Kin Wallet

Requerimientos del proyecto

Nuestro proceso de diseño comienza por determinar los requisitos del producto. En este caso, nuestro producto necesita presentar a los usuarios de Kik el proceso de ganar y gastar Kin. Esto significa que vamos a incorporar usuarios a una experiencia completamente nueva dentro de Kik.

Durante la iteración anterior de este producto (la versión disponible para los usuarios que participaron en el evento de distribución de tokens), se decidió que la billetera tendrá el aspecto y la sensación de la marca Kin.

Esto significa que los nuevos usuarios de Kik que vean este producto experimentarán nuevas características y una nueva apariencia que es muy diferente de lo que están acostumbrados de Kik hasta ahora.

Por esta razón, nos dimos cuenta desde el principio de que sería importante mantener esta versión lo más sencilla posible.

Planificación de viajes de usuario Estructura IA

Incorporación

Los usuarios serán introducidos en la billetera a través del bot @KikTeam. Esto nos permite aprovechar lo que los usuarios de Kik están familiarizados (chatear) para presentar esta nueva experiencia.

Arquitectura de información de billetera (IA): examinar diferentes estructuras

Analizamos dos posibles estructuras de IA durante dos iteraciones de este proyecto.

  1. Un conjunto robusto de características que incluye el historial de transacciones y una gran sección de formas de ganar Kin.
  2. Un conjunto más ágil que incluye solo saldo y opciones de ganar / gastar.

La primera iteración

Durante la iteración temprana, comenzamos con la página principal que se usó para la billetera de un participante de TDE y agregamos navegación de menú para el historial de ingresos y transacciones. El gasto y el equilibrio permanecerían en la página principal para minimizar el alcance del proyecto y construir sobre lo que ya estaba disponible para los usuarios. La estructura del menú ayudaría a agrupar los conjuntos de características robustas planificadas para esta versión en áreas separadas para ayudar con la orientación y reducir la carga cognitiva.

Para las dos páginas nuevas (historial de ingresos y transacciones), analizamos dos patrones de diseño convencionales:

  1. Una línea de tiempo para el historial de transacciones: este patrón nos permitirá presentar información en orden cronológico, que se ajusta al propósito de esta página: mostrar las transacciones Kin entrantes y salientes a lo largo del tiempo. Esto es común para las aplicaciones bancarias.
  2. Tarjetas de contenido para ganar: este patrón se usa comúnmente en el consumo de contenido y los productos de comercio electrónico, que se ajusta al espacio en el que operará Kin.

También exploramos usando diseños de lista y tarjetas grandes:

Al diseñar esta versión, hemos ampliado el kit de interfaz de usuario para la marca Kin y hemos podido experimentar con nuevos estilos y patrones de interfaz de usuario.

La segunda iteración

Pasando a la segunda iteración de este proyecto (IPLv2), comenzamos con un conjunto más pequeño de características. Buscamos una solución de diseño simple que exponga a los usuarios de Kik a una nueva experiencia de una manera clara y que sea fácil de implementar.

Esta versión de la billetera será simple, con solo una página y diseño, con un encabezado y pestañas para diferenciar entre dos tipos de información:

  1. Balance de Kin e información del usuario.
  2. Las ofertas económicas de dos lados: oportunidades para ganar y gastar.

El uso de esta estructura nos permitió crear dos niveles de jerarquía.

El encabezado azul llamaría la atención de los usuarios sobre su saldo de Kin, con su nombre y foto como garantía de que esta es su cuenta.

El área de pestañas se puede desplazar con un encabezado adhesivo, para cambiar el enfoque del equilibrio a la economía. Asumimos que una vez que los usuarios cambian su atención de su saldo a estas pestañas, ya no necesitan la información del saldo. Sin embargo, el cambio entre las dos pestañas siempre debe estar disponible, ya que le damos a ambas pestañas el mismo nivel de jerarquía.

Diseño de interfaz de usuario

Mira y siente

El estilo de UI de la billetera se basa en la guía de estilo de la marca Kin. Nuestro objetivo es crear una apariencia que sea confiable y amigable mediante el uso de tonos azules, iconos de líneas e ilustraciones de líneas mínimas, haciendo referencia a la ciencia y la tecnología.

De la guía de estilo Kin: ilustración de héroe y punto, usos de logotipo, colores y tipografíaIU de billetera

Animaciones y transiciones de pantalla.

Utilizamos dos tipos de animación.

  1. Transiciones que darán retroalimentación sobre las acciones de los usuarios y crearán expectativas sobre lo que vendrá.
  2. Cometer errores y fallas en el sistema es amigable, de acuerdo con nuestro objetivo de crear una sensación confiable y amigable.

Transiciones

Una vez que los usuarios aceptan los términos, se tarda unos segundos en configurar la billetera. Esto significa que tuvimos que crear un estado de carga de algún tipo. Decidimos aprovechar esta oportunidad para enfatizar las ideas detrás de Kin: descentralización y comunidad.

Mediante el uso de elementos del logotipo (esferas hechas de formas redondas), creamos una metáfora para que las personas se muevan en su propio ritmo y dirección, pero aún se unan.

Micro interacciones

Intentamos mantener las micro interacciones al mínimo y solo usarlas como comentarios para las acciones de los usuarios.

Casos de borde

Los casos de borde y los estados de error no son una gran experiencia, pero también debemos tenerlos en cuenta en el diseño. Intentamos encontrar una manera de hacer que un estado de error parezca más amigable.

Que sigue

Obteniendo comentarios de los usuarios!

Mientras trabajábamos en este proyecto, teníamos muchas preguntas sobre usabilidad, el diseño adecuado para nuestros usuarios y respuestas generales a una nueva apariencia dentro de Kik.
Actualmente estamos en el proceso de configurar talleres de usuarios, realizar pruebas de usabilidad y obtener datos para esta versión una vez que se lance.