Diseño
Antes de leer: Estas misiones se centran en que pueda ponerse en marcha con Jutro. No están pensadas para poner a prueba sus habilidades como diseñador.
Uso
Pantallas de baja fidelidad de Sketch
Según su flujo de usuario y las especificidades del modelo de producto (fase de diseño anterior), bosqueje 3 o 4 pantallas de baja fidelidad utilizando bolígrafo y papel, o una herramienta de pizarra digital como Miro wireframing o Balsamiq.
-
Concéntrese en tres o cuatro pantallas considerando un paso específico o un conjunto de pasos de su flujo de usuario creado previamente.
-
Supongamos que Olivia (usuario final) está iniciando la experiencia de cotización y compra sin una página de aterrizaje ni inicio de sesión.
El siguiente es un ejemplo de diagramas reticulares (wireframes) móviles creados con Balsamiq.
Análisis de flujo generado automáticamente por Jutro
Imagine que el equipo de implementación de productos que trabaja en este proyecto se acerca a usted con algunas pantallas Jutro generadas automáticamente basadas en el modelo de producto de Advanced Product Designer (APD).
El código de front-end de las pantallas generadas automáticamente se basó en Advanced Product Designer de InsuranceSuite. Ofrece a los desarrolladores un flujo de cotización y compra funcional junto con aspectos de diseño de UX o UI.
Descargue el siguiente archivo Figma y revise las pantallas generadas automáticamente:
Iteración del diseño
Actualización del flujo de usuario y bocetos
Revise el flujo de usuario y los bocetos de diseño aproximados según la información del modelo de producto y las pantallas generadas automáticamente que revisó.
Cosas que se deben considerar:
- ¿Qué cambiaría en su flujo de usuario y sus bosquejos de pantallas?
- Considere escenarios de usuario basados en el modelo de producto y pantallas generadas automáticamente.
- Concéntrese solo en 3 o 4 pantallas (o una parte de su flujo de usuario).
- Lea la leyenda del modelo de producto y piense en cómo se podrían hacer coincidir los marcadores en la interfaz de usuario y cómo aparecerían en su experiencia de cotización y compra.
- Piense en diferentes posibilidades de interfaz de usuario.
- Considere cómo las pantallas generadas automáticamente por Jutro informan los tipos de componentes y patrones necesarios en su diseño.
- Haga una lluvia de ideas sobre cómo puede mejorar la experiencia que vemos en las pantallas generadas automáticamente.
-
Una perspectiva de rendimiento. Le pide que tenga en cuenta aspectos como los tiempos de procesamiento, que pueden variar en función de la longitud de la página. Por ejemplo, un posible asegurado que tiene un servicio de Internet más lento probablemente optará por una aseguradora que utilice páginas ligeras (unos pocos segundos de carga pueden favorecer o perjudicar su experiencia de usuario).
-
Una perspectiva de modelo de producto. Define cómo se podría organizar la experiencia en función del diagrama de ideas del modelo de producto y el tipo de usuario en cuestión.
- Reflexionar sobre el modelo de producto podría inspirarlo a cambiar el formato del flujo capturado en una de las pantallas generadas automáticamente. Podría decidir, por ejemplo, que la página de bienes asegurados necesita una página (o paso) independiente para cada categoría de bienes asegurados (edificios, vehículos, cultivos, ganado).
- Del mismo modo, puede comenzar a pensar en cómo cambiará el precio según el tipo de usuario (cliente que regresa) o la cobertura elegida.
En un proyecto de diseño de la vida real, tales consideraciones de diseño deben discutirse con el gerente de productos, los arquitectos/analistas de negocios, los desarrolladores y otras partes interesadas involucradas en el proyecto.
Diseño de una pantalla de alta fidelidad con Jutro en Figma
En esta sección, lo guiaremos a través del proceso de diseño de pantallas de alta fidelidad en Jutro usando Figma.
En un paso anterior de esta misión de aprendizaje, creó bocetos de baja fidelidad para su flujo de pantalla. Con Figma, elija una a tres de estas pantallas y tradúzcalas a la interfaz de usuario de Jutro Design System.
El equipo de Guidewire UX diseñó esta página de seguro agrícola para que Olivia (nuestra usuaria) comenzara con el proceso de cotización y compra.
En primer lugar, acceda a los recursos de diseño y marca.
Tendrá acceso a:
- Pautas sobre la marca de la compañía de seguros imaginaria FutureState tomadas como ejemplo en esta misión de aprendizaje.
- Íconos e imágenes utilizados para diseñar la página “Comencemos” en esta misión.
Encontrará los recursos de diseño y de la marca aquí.
Nota: Puede duplicar el archivo Figma para editarlo.
Antes de comenzar, hay algunos conceptos y aspectos básicos de Jutro que se deben tener en cuenta.
Anatomía de la aplicación Jutro
Una aplicación Jutro estándar tiene una anatomía jerárquica. Cada parte se construye sobre la anterior.
- Los planos de planta también se pueden configurar página por página.
- Los widgets son la forma en que creamos bloques de contenido rápidamente de manera responsive. Todos los widgets son responsive con anchos mínimos, pero el ancho máximo se establece con colspans en la cuadrícula.
- Los patrones de negocio comunes de seguros (por ejemplo, actualización de cuenta y lista de pólizas) se pueden agregar rápidamente a la página dentro de los widgets.
Paso 1: Comenzar con el plano de planta y la composición y disposición
A los efectos de esta misión de aprendizaje, enfóquese en de uno a tres bosquejos de pantallas que desee convertir a la interfaz de usuario de Jutro Design System.
Los planos de planta de Jutro son plantillas de página completa listas para usar que organizan el encabezado, el pie de página, la navegación y el contenido. Incluyen la forma, la composición y disposición, además de los componentes que mejor se ajustan a las necesidades de su aplicación. Los planos de planta favorecen una composición de interfaz de usuario coherente.
Jutro actualmente cuenta con cuatro planos de planta diferentes, que abordan casos de uso comunes:
Las composiciones y disposiciones de contenido determinan las proporciones de las columnas para los componentes en el área de contenido principal. Hay cinco opciones de composición y disposición:
- Abra Figma y cree un nuevo archivo de diseño.
- Inserte un nuevo marco en el lienzo en blanco.
- Arrastre y suelte un plano de planta de Jutro desde la biblioteca Figma de Jutro. A continuación, se muestra un video que ilustra el proceso de creación de una interfaz de usuario con Jutro en Figma.
- Elija el plano de planta que crea que coincidirá con la composición y disposición de sus bocetos anteriores.
La página de muestra de cotización y compra incluye un plano en forma de I. A continuación, se muestra una imagen del marco de Figma después de haber eliminado el plano de planta en forma de I predeterminado para el escritorio.
- Ajuste el contenido de la navegación del pie de página, del encabezado y del subtítulo.
Dependiendo de las páginas seleccionadas, realice los ajustes necesarios para que el plano de planta coincida con la composición y disposición y la estructura generales de la página de la aplicación que eligió.
Utilice las pautas de la marca (por ejemplo, colores y tipografía) disponibles con los recursos descargables de diseño y marca.
Nota: Puede duplicar el archivo Figma para editarlo.
La navegación de la configuración base del encabezado y subtítulo del plano de planta en forma de I incluye contenido que no es necesario para la página de muestra.
Paso 2: Activar la cuadrícula de capas de Jutro
- Active la cuadrícula de capas de Jutro para facilitar la alineación de los componentes que soltará para rellenar su(s) página(s). Utilice este atajo de Mac:
Control + G
Después de activar la cuadrícula de capas, su página puede verse como una de las pantallas que se muestran a continuación, según el plano de planta y la composición y disposición que haya elegido.
Consulte a continuación la cuadrícula activada en el plano de planta en forma de I de la página de muestra.
Paso 3: Arrastrar y soltar los componentes y patrones en su página
En este paso, rellenará el cuerpo de su(s) página(s) con componentes de Jutro.
-
En función de las pantallas que haya elegido, explore los componentes disponibles de la biblioteca Figma de Jutro y suéltelos en el marco de página en Figma.
-
La cuadrícula de capas permite mantener los componentes bien alineados.
-
Utilice la tematización global de sus componentes y el estilo al nivel del componente para que su página cumpla con las pautas de marca de la compañía de seguros imaginaria FutureState disponibles aquí.
El siguiente video es una demostración con los pasos clave para rellenar y tematizar la página de muestra.
Es bueno saberlo
¿Qué son los componentes de Jutro?
- Los componentes fundamentales más granulares de las aplicaciones basadas en Jutro.
- Se pueden combinar con otros componentes para crear bloques más grandes (como un formulario).
- Tienen la mayor flexibilidad.
Ejemplos: selectores numéricos (steppers), conmutadores, campos de formulario, botones, tarjetas.
¿Qué son los patrones de Jutro?
- La intención de los patrones es reducir el esfuerzo de diseño y desarrollo en general, maximizar la coherencia del producto y aumentar la velocidad a la que se pueden ensamblar los productos.
- Son más prescriptivos, lo que crea una mayor consistencia.
- Son un conjunto de componentes de Jutro que resuelven una necesidad recurrente del usuario, como enviar el Primer aviso de pérdida (FNOL) o actualizar los detalles de la cuenta.
- Incluyen todos los componentes interactivos que los usuarios necesitan para realizar una tarea determinada.
Ejemplos: agregar un vehículo, lista de facturación, detalles de siniestros, siniestros.
Encontrará los componentes y patrones de Jutro aquí.