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:

	COMPONENTS	PATTERNS
What is it	Distinct individual elements or the most basic building blocks of a UI	Combinations of atomic components into a 'job to be done'
Types	Atomic: 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
Usage	Assemble different components to create a flow or page	Ready to use as is (or customized) as a flow or part of a page
Use Cases	All 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 Features	Responsive, Accessible, Upgradable, Security, Localization, 118n, Analytics	Responsive, accessible, upgradable, security, localization, i18n, analytics
Touch Points	Figma component library, documentation, component library packages	Figma pattern library, documentation, code repo (Bitbucket)
Prescriptiveness	Can be used only as defined by the system and needs to strictly conform to Jutro designs and guidelines	Apply as is or use documentation for guidance to extend the pattern for use cases, rather than strict conformance
Customization	Design or implementation modifications are not allowed	Patterns are available as starter packages, and should be customized to suit the use case.
Evolution	Slower due to complexity and inter dependence involved in testing	Patterns evolve at a much faster pace as they can be tested as individual blocks and changed accordingly
Accountability	Jutro UX, Jutro Dev, Jutro Documentation teams	Jutro UX, products customizing and consuming patterns (OOTB features will be compromised on customization)
Contributors	Jutro UX, Product UX	Jutro UX provides a starter set. Product UX, BA, product managers, digital services