User interface design guide

Purpose

This guide serves as a design resource by:
  • Describing and showing common usage for components, design patterns, and visual elements within InsuranceSuite.
  • Identifying and promoting best design practices.

Audience

This design guide is intended for the following groups:
  • User experience designers who collaborate with development, product management, and all stakeholders involved with design alternatives, wireframes, mockups, design specification, and modifying Guidewire InsuranceSuite. Designers make decisions that drive the product's flow, interaction, and overall user experience.
  • Product Managers who collaborate with user experience designers on InsuranceSuite UI design.
  • Application developers who follow designs provided by the UX team but who also work independently. They will use these guidelines to inform their design decisions. This is not meant to be a developer’s guide. Instead, it is a reference for UI design that developers might find useful.
  • Configurators who design and implement UI changes in customer configurations (Guidewire Professional Services, Partners, Customers).

Goals and Design Principles

Goals for this design guide include:
  • Clearly articulating best practices for UI design in an effort to reduce the time spent identifying the standard for various design elements.
  • Facilitating the creation of consistent web applications. Even seemingly minor design practices, such as whether to capitalize all the important words in a heading, should be applied consistently throughout all InsuranceSuite applications. Consistency and attention to detail increase the user's confidence in Guidewire products.
  • Providing a list of UI design best practices for Guidewire customers who intend to extend and modify InsuranceSuite applications.
These goals are reflected in the following design principles that serve as the foundation for this guide and InsuranceSuite design:
Usefulness
Focus on user needs and solve their problems with simplicity and ease.
Configurability and Customizability
Provide flexibility to modify the design and the underlying flows to meet widely varying needs. Do not assume that one size fits all.
Consistency
Improve usability and build trust with familiarity. Reduce, reuse, don’t redesign.
Modularity
Where possible, approach design by building independent parts to allow for configurability and scalability.
Scalability
Predict and accommodate for a growing amount of elements and options.

Using this Guide

This guide is organized into components, patterns, and visual elements. Each topic within the guide:
  • Explains the purpose of a pattern such as search or a component such as a button.
  • Uses images and instructions to explain when to use a pattern or component.
  • Lists related PCF elements that are intended to provide information to UI designers to work with and discuss UIs with developers. This PCF information is not meant to be exhaustive.
  • Lists standards with visual examples to show how to use a pattern or component.
Adhering to these design standards will contribute to a consistent UI throughout all InsuranceSuite applications. While much of the InsuranceSuite UI adheres to the standards in this design guide, there are instances where it does not. The reason is that InsuranceSuite has evolved over a number of years. As part of Guidewire's effort to achieve excellence on all fronts, we are working to modify the InsuranceSuite UIs to comply with industry best practices for design.

What this Guide Does not Include

This design guide does not address style issues that are integrated into the Pebbles framework and therefore cannot be changed by applications developers such as:
  • Basic navigation
  • Button size and shape
  • Spacing between buttons
  • Whether or not there are colons after labels
In addition, the guide does not include detailed instructions or best practices for coding UIs; the best practices focus on UI design.