Skip to main content

Patterns overview

What are Jutro patterns?

Jutro patterns are best practice solutions to recurring design problems (flows, behaviors, and/or interactions) within the same product, product families, or distinct products.

They are:

  • Reusable: The same pattern, with little or no modifications, can be applied to multiple scenarios, achieving consistency across usage areas.
  • Extendable: Patterns are designed for a common use case, are easy to test, and are adaptable/extendable for other use cases.
  • Well documented: Patterns include well-documented usage scenarios, do's and don'ts, and precise guidelines on how to use and create patterns.
  • Easy-to-create best practices: Use existing patterns as templates to create new ones, removing the need to create from scratch. Existing patterns serve as a template for how to design and build for best practices in accessibility, responsiveness, localization, and analytics.

Jutro patterns consist of the following two types:

  • P&C insurance industry-focused patterns: Patterns that solve recurring problems specific to the P&C industry. For example, adding a driver and payment flows.

  • Agnostic UX patterns to solve common usability problems: Patterns that solve problems that are universal to any UI element or flow. For example, validation and messaging, and timelines.

Patterns vs. components

If you're new to patterns, here are some criteria to help distinguish between patterns and components:

COMPONENTSPATTERNS
What is itDistinct individual elements or the most basic building blocks of a UICombinations of atomic components into a 'job to be done'
TypesAtomic: simplest building blocks. For example, buttons. Molecular: combination of atoms. For example, calendars.Process flows: for example, the add a driver flow. Behaviors: for example, disabled states. Interactions: for example, search flows, Timeline
UsageAssemble different components to create a flow or pageReady to use as is (or customized) as a flow or part of a page
Use CasesAll Jutro approved use cases. We don't provide designs for edge cases.Designed and developed for common use cases, and adapted for other use cases
OOTB FeaturesResponsive, Accessible, Upgradable, Security, Localization, 118n, AnalyticsResponsive, accessible, upgradable, security, localization, i18n, analytics
Touch PointsFigma component library, documentation, component library packagesFigma pattern library, documentation, GitHub code repo (available to Guidewire employees only)
PrescriptivenessCan be used only as defined by the system and needs to strictly conform to Jutro designs and guidelinesApply as is or use documentation for guidance to extend the pattern for use cases, rather than strict conformance
CustomizationDesign or implementation modifications are not allowedPatterns are available as starter packages, and should be customized to suit the use case.
EvolutionSlower due to complexity and inter dependence involved in testingPatterns evolve at a much faster pace as they can be tested as individual blocks and changed accordingly
AccountabilityJutro UX, Jutro Dev, Jutro Documentation teamsJutro UX, products customizing and consuming patterns (OOTB features will be compromised on customization)
ContributorsJutro UX, Product UXJutro UX provides a starter set. Product UX, BA, product managers, digital services