Jutro is Guidewire’s design system and UI framework that empowers designers and developers in P&C insurance to build usable, engaging, and configurable insurance applications. This blog post covers these topics:
- What’s in the Jutro Box?
- Get Started with React
- Jutro Developer Basics
- Learn Jutro by Doing
- Jutro Sandbox App: Play and Learn
- How Do Designers Work with Jutro?
- Jutro Training Courses and Certification
The Jutro documentation site (login required) gives you the foundational knowledge to develop and design with Jutro. This includes resources such as:
- Comprehensive developer docs
- Sample app code
- Component guidelines
- Business patterns for recurring user needs
- Blueprints that showcase design possibilities
What’s in the Jutro Box?
Component library: Jutro offers developers a library of prebuilt components that speed up the design process while also promoting consistency across consumer applications. Developers use these components to accelerate the building of their applications, leveraging component level capabilities such as analytics, localization, theming, and accessibility.
Codeless UI composition: Each of the UI components is easily configured via presentation metadata such as labels or pages, thus building a metadata-driven application that can be easily modified without writing code.
Design guidelines and patterns: We offer a set of UI assets designed around a consistent paradigm. These assets include predesigned, highly repeatable UI components, standardized application layouts, and themes.
By using Jutro to build digital products for the insurance industry, designers, developers, and product owners can streamline the effort it takes to create compelling products.
Get Started with React
If you are new to front-end development, or if your experience is limited, familiarizing yourself with React is a good place to start before jumping into a Jutro project.
Jutro builds on React concepts like functional components, providers/context, hooks, data binding, routing, i18n, and composition (vs. inheritance). Knowing these React basics will help you get the most out of Jutro.
Learn how to get started with React here.
Jutro Developer Basics
Here are the basics you need to know to start developing with Jutro:
- The Jutro Design System and web application framework uses React for implementation.
- Your Jutro app wraps your code in all the helpers that are necessary to develop with Jutro.
- Your app structure is based on a Jutro floorplan.
- The layout of each page is achieved using one of five content layout options.
- Use the Jutro internationalization mechanism even if you don’t have to translate your app (yet!).
Learn Jutro by Doing
Our guided Learning Missions are designed to introduce you to the basics of developing with Jutro. Presented as short, digestible coding instructions, each mission helps you explore specific features of Jutro using a sandbox app.
Check out the Jutro Developer Learning Missions here (login to view).
After completing the Learning Missions, you should be able to:
- Use Jutro presentation metadata
- Configure Jutro floorplans
- Generate new pages using Jutro CLI
- Leverage Jutro components and business patterns
- Integrate the Claim API
- Apply Jutro theming
- Integrate third-party APIs
Jutro Sandbox App: Play and Learn
The Jutro sandbox app is a react-app wrapper that surrounds Jutro. It enables you to start developing with all the Jutro features that are available out of the box.
Download the Jutro sandbox app on the Jutro documentation site here (login to access).
How Do Designers Work with Jutro?
Jutro user experience (UX) designers leverage the Jutro Design System library on Figma to design performant, accessible, and compelling digital user experiences. The Jutro documentation site provides designers with all the resources they need to create UIs according to industry best practices and in line with the Jutro design principles.
Check out the Getting started page for designers on the Jutro documentation site.
Jutro Training Courses and Certifications
You can learn more about Jutro and how it helps you create compelling digital user experiences on the Guidewire Education site (login required).
About the Author
Nada El Maliki
Instructional Designer
Uniting the pillars of pedagogy with the multimedia technology to create powerful learning experiences