Shallet
Shallet tiene como objetivo revolucionar la gestión financiera digital combinando una interfaz única y fácil de usar con elementos de diseño alegres y atractivos.
Tipo de proyecto
Diseño de producto, Caso de estudio
Año
2023
Problema
En el mercado contemporáneo, muchas aplicaciones de monederos digitales ofrecen soluciones funcionales, pero carecen de buena experiencia de usuario y de una interfaz distintiva que sea a la vez agradable e intuitiva.
Objetivo
El objetivo principal es diseñar una aplicación de monedero digital compartido que destaque a través de su interfaz de usuario, que debe ser original, alegre y atractiva, manteniendo al mismo tiempo la facilidad de uso para todas las demografías.
Solución
La aplicación se diseñará con una interfaz que integre colores vibrantes, elementos interactivos sencillos y gráficos divertidos.
La aplicación contará con una navegación simplificada con representaciones icónicas claras para las diferentes funcionalidades, haciéndola accesible para usuarios de todas las edades y niveles de habilidad tecnológica.
Línea de tiempo
10
semanas
El desarrollo de la aplicación siguió un desarrollo iterativo, mejorándola constantemente durante el proceso.
Discovery
2 weeks
Descubrimiento
2 semanas
Definición
2 semanas
Diseño
4 semanas
Testeo y entrega
2 semanas
Discovery
2 weeks
Descubrimiento
Desarrollar una aplicación de billetera compartida, enfocándose en un diseño fácil de usar para permitir transacciones monetarias fáciles, seguras e instantáneas entre usuarios.
_Mejorar la experiencia del usuario mientras se conserva la creatividad.
_Construir una aplicación escalable.
_Fomentar la participación del usuario.
_Mantener el cumplimiento y la adaptabilidad.
Definición
Se ha empleado el enfoque de utilizar User personas, junto con el método de Jobs to be done, para asegurar que las características de la aplicación aborden los problemas comunes que enfrentan la mayoría de los usuarios, manteniendo un enfoque empático hacia ellos, reconociendo la importancia de que la experiencia sea tanto emocionalmente satisfactoria como práctica.
Se destaca un segmento del viaje emocional y práctico del usuario al usar la aplicación. El viaje del usuario proporciona una visión integral desde su punto de vista, crucial para identificar áreas de mejora.
Una arquitectura de la información simplificada que dicta cómo se agrupan, estructuran e interconectan los contenidos y sus características.
Se muestra parte del flujo de usuario de la aplicación, ilustrando el camino que un usuario toma durante sus primeros pasos a través de esta.
Juega un papel clave en la identificación de posibles puntos de fricción y asegura una progresión lógica y fluida a través de las diversas funciones y características.
Diseño
Crucial en las primeras etapas del diseño, los wireframes proporcionan un plano claro de la estructura dela página, el diseño y la funcionalidad, sin la distracción de elementos de diseño detallados como colores y gráficos.
Los wireframes se centran en lo que debe hacer la pantalla en lugar de como debe verse, permitiendo a diseñadores, desarrolladores y partes interesadas acordar la estructura básica antes de pasar a etapas de diseño más complejas.
Conjunto de directrices, estándares y principios que guían la creación y mantenimiento del diseño del producto. Incluye una variedad de elementos como colores, tipografía, iconografía, ilustraciones, guías y componentes de la interfaz de usuario, todos los cuales trabajan juntos para asegurar la consistencia y coherencia en todo el producto.
1.0
Colores
Definición de colores primarios, secundarios y complementarios. Especifica cómo se deben usar los colores para diferentes elementos como fondos, texto y botones para asegurar la armonía visual y la accesibilidad.
2.0
Tipografía
La tipografía se centra en la legibilidad y consistencia de la marca. Incluye directrices sobre tamaños de fuente, grosor y espaciado para asegurar la legibilidad del texto en diversos dispositivos y casos de uso.
3.0
Iconografía
Estos iconos cubren acciones comunes y elementos en la aplicación. El estilo es consistente con e diseño general, buscando la simplicidad y la intuición para ayudar en la navegación del usuario.
4.0
Ilustraciones
Algunas de las ilustraciones utilizadas en la aplicación. Se emplean para mejorar la participación del usuario, transmitiendo una apariencia amigable y accesible. Las ilustraciones se utilizarán en pantallas de onboarding, estados vacíos y como parte del contenido educativo.
5.0
Componentes y símbolos
La sección más extensa, contiene elementos reutilizables de la interfaz de usuario como botones, inputs, barras de navegación, etc. Cada componente está documentado con especificaciones de tamaño, comportamiento e interactividad.
Esta lista de verificación desglosa el complejo concepto de accesibilidad en elementos manejables y específicos. Esto permite a diseñadores y desarrolladores abordar metódicamente cada aspecto de la accesibilidad, como las discapacidades visuales, auditivas, cognitivas y motoras.
Al proporcionar un conjunto claro de criterios, una lista de verificación asegura que ningún elemento crítico se pase por alto durante todo el proceso de diseño.
Este paso da forma a cómo los usuarios interactúan con el producto final, enfatizando la usabilidad y el como se involucra el usuario, es esencial para que la experiencia con el producto sea exitosa.
Crea tu Shallet!
(sólo disponible en pantallas grandes)
Sigue las pistas azules para completar la presentación, asegúrate que los 3 amigos estén seleccionados (Amelia, Jieun y Oliver)!
Testeo
Durante el proceso de diseño, una vez diseñadas ciertas funcionalidades, se realizaron pruebas de usabilidad con diferentes usuarios representativos. Esto fue para asegurar que las funcionalidades y sus características cumplieran con los objetivos previstos y que la aplicación se alineara con los estándares de experiencia del usuario.
Las pruebas se llevaron a cabo en persona y a través de llamadas, permitiendo observar a los usuarios mientras completaban tareas establecidas por el diseñador.
Para facilitar la identificación fácil de áreas de mejora en la experiencia de la aplicación, el diseñador mantuvo una tabla como la siguiente:
Después de incorporar las opiniones en el diseño y desarrollo, se realizó una prueba A/B, enfocándose específicamente en los temas más controvertidos. Esta prueba se llevó a cabo utilizando Crazy Egg.
Otros proyectos
Zenscape VR
Jello Café
