The Art of Creating Great Digital User Experiences

Summary

In this video, Andrea Anderson and Dimitri Reminuk from Guidewire Software discuss the importance of creating exceptional user experiences with Guidewire's UX platform, Utro. They highlight the impact of poor user experiences on customer support and sales, and how a design-led development approach can enhance customer satisfaction and reduce development time. They showcase the benefits of a design system, like Utro, which includes a library of pre-built components and design assets to ensure consistency across applications. The video also includes a demo on how to customize a user experience for a new farm product, emphasizing the role of personas, user journey mapping, and the integration of branding and metadata-driven design to create a seamless and intuitive digital experience.

Takeaways

• 🌟 The importance of good user experience (UX) is emphasized, as it can significantly impact customer satisfaction and retention.
• 📈 Poor UX can lead to lost sales and increased customer support costs, while good UX can increase sales and customer loyalty.
• 🛠️ Investing in UX before the software development cycle can lead to quicker time to market and higher customer satisfaction.
• 👩‍💻 A design-led development approach is recommended, which involves close collaboration between designers, subject matter experts, and developers throughout the lifecycle.
• 🎨 The use of a design system, like Guidewire's Jutro, can streamline the design and development process, ensuring consistency and reducing effort.
• 🏭 Jutro includes a library of UX/UI design assets and pre-built components, which can be easily configured using metadata, facilitating maintenance and upgrades.
• 🌐 The need for an omni-channel, consumer-like experience is highlighted, reflecting the increasing IT challenges and user expectations.
• 👩‍👩‍👧‍👦 Understanding the user, often through personas like 'Olivia', is crucial for creating a UX that meets their needs and motivations.
• 📱 The user journey should be mapped out, considering key moments and the devices and channels the user is likely to use.
• 🎨 Visual design, including colors, fonts, and images, plays a significant role in creating an engaging and brand-consistent UX.
• 🌐 The final UX should be responsive and adaptable to different devices, ensuring a seamless experience across all platforms.

Q & A

Who are Andrea Anderson and Dimitri Reminuk?

Andrea Anderson is the Head of User Experience at Guidewire, and Dimitri Reminuk is the Global Practice Leader for Digital Innovations at Guidewire.

What is the significance of good user experience in the digital age?

Good user experience is significant because it increases customer satisfaction, reduces customer support issues, and can lead to higher sales and customer retention, especially in industries like insurance where renewals and cross-selling are important.

What are the consequences of a poor user experience?

Poor user experience can lead to lost sales, increased customer support costs, and a higher likelihood of customers abandoning the purchase process if they find registration or navigation difficult.

What does the term 'design-led development approach' refer to?

A 'design-led development approach' refers to a method where user experience design is prioritized and invested in before the actual software development starts, which can reduce development effort and increase user satisfaction.

Why is investing in user experience before the software development cycle beneficial?

Investing in user experience before the software development cycle is beneficial because it leads to a quicker time to market, increased customer satisfaction, and ensures that the final product meets user needs and expectations.

What is a design system and how does it help in creating user experiences?

A design system is a library of reusable design assets and components that help to standardize the user interface, reduce design and development effort, and ensure consistency and cohesiveness across different applications.

What is UTRA and how does it assist in the development process?

UTRA is Guidewire's own design system that includes a vetted library of UX/UI design assets and reusable pre-built components. It is designed to speed up design and development while promoting consistency in user experience across applications.

How does Guidewire's UTRA system help with the maintenance and upgrade of user interfaces?

Guidewire's UTRA system assists with maintenance and upgrades by using metadata-driven, codeless approaches that allow for easy configuration of UI components, making it simpler to create, maintain, and upgrade interfaces in the future.

What is the role of visual design in creating a great user experience?

Visual design plays a crucial role in creating a great user experience by reflecting a company's brand and appealing to users through the use of colors, fonts, and images, which can make the interface more engaging and intuitive.

How does Guidewire's platform facilitate the integration of new features into the user experience?

Guidewire's platform facilitates the integration of new features into the user experience by providing tools like auto-generated code, configurable components, and metadata-driven design, which allow for rapid development and iteration of digital experiences.

What is the importance of understanding the user's context and motivations in designing user experiences?

Understanding the user's context and motivations is important in designing user experiences because it helps create solutions that address real user needs, making the experience more intuitive, relevant, and satisfying.

Outlines

00:00

🎨 The Art of Crafting Great User Experiences

Andrea Anderson, Head of User Experience at Guidewire, and Dimitri Reminuk, Global Practice Leader for Digital Innovations at Geithner, introduce the concept of creating exceptional user experiences using Guidewire's Utru. They discuss the importance of user experience in the digital age, where poor experiences can lead to customer attrition and increased support costs. Conversely, good user experiences can boost sales and customer retention, especially in industries like insurance. The discussion emphasizes the benefits of investing in user experience early in the software development cycle, which can lead to quicker time to market and higher customer satisfaction. The video also touches on the challenges of meeting customer expectations for omni-channel experiences and the increasing IT challenges in staffing and technology.

05:00

🛠️ Design-Led Development and the Role of Design Systems

The video script outlines the recipe for successful user experience design, starting with a design-led development approach that prioritizes user experience thinking before software development. This approach is shown to reduce development effort and increase user satisfaction. The script introduces the concept of a design system, comparing it to known systems like Material Design and Salesforce Lightning. Guidewire's own design system, Utru, is highlighted as a tool to speed up design and development while promoting consistency in user experience across applications. Utru includes a library of UX/UI design assets and pre-built components, aiming to make the design and development process more efficient.

10:01

🌱 Creating a Compelling Web Experience for Farmers

The script walks through a hypothetical scenario where a team is tasked with creating a web experience for a new farm product in Australia. It details the process of understanding the user's needs, creating a user persona (Olivia), and mapping out her ideal journey through the insurance purchase process. The conversation between team members explores how to customize the user experience, including adjusting the interface to be more intuitive and farm-oriented. The importance of reflecting the company's brand and appealing to the user is discussed, along with the practical steps of modifying the design to better suit the target audience.

15:03

🖌️ Enhancing User Experience with Visual Design and Interactivity

This section delves into the specifics of visual design, emphasizing the role of colors, fonts, and images in creating an engaging user experience. It showcases how Guidewire's design system allows for easy customization of these elements to match a company's branding and user preferences. The script describes the process of updating the user interface to include a progress indicator, improved visuals for coverable items, and other design elements that make the application more user-friendly and reflective of the product's agricultural focus.

20:04

🌐 Responsive Design and Future Opportunities in Insurance

The final paragraph discusses the importance of responsive design, ensuring the application is usable across different devices. It also touches on the integration of Google Places and map-based tools to streamline the user experience by automating data entry. The script highlights the potential for these features to not only improve the customer experience but also to provide valuable data for insurance carriers, which can be used for underwriting and claims processing. The presentation concludes by summarizing the benefits of Guidewire's tools and approach in creating and iterating digital experiences quickly and effectively.

Keywords

💡User Experience (UX)

User Experience (UX) refers to the overall experience a user has while interacting with a product or service. It encompasses all aspects of the end-user's interaction with the company, its services, and its products. In the video, UX is a central theme, with the discussion revolving around creating great UX with Guidewire's software. The video emphasizes the importance of investing in UX before the software development cycle begins, which not only reduces development effort but also increases user satisfaction.

💡Design-Led Development

Design-Led Development is an approach where the design process and user experience are prioritized from the outset of a project, guiding the development process. The video advocates for this approach, suggesting that it can lead to quicker time to market and increased customer satisfaction. It is highlighted as a key strategy for creating intuitive and effective digital experiences.

💡Guidewire

Guidewire is a software company that specializes in providing solutions for the insurance industry. In the context of the video, Guidewire is the platform that is used to create and enhance user experiences. The video discusses how Guidewire's tools, such as Guidewire's Insurance Suite and Guidewire Digital, can be utilized to improve UX.

💡Digital Innovations

Digital Innovations refer to the creation of new digital technologies or the application of existing digital technologies in new ways. The video features a speaker from E2, a global practice leader in digital innovations at Guidewire, indicating a focus on how digital technologies can be innovatively applied to enhance user experiences.

💡Cost of Bad User Experience

The 'Cost of Bad User Experience' refers to the negative impact on a business when users have a poor interaction with a product or service. The video mentions that 45% of users give up if registration is hard or perceived as a hurdle, illustrating the significant consequences of poor UX on customer retention and support costs.

💡Design System

A Design System is a collection of reusable design elements, components, and guidelines that can be used to create a consistent user experience across different applications and platforms. The video introduces Guidewire's own design system, Jutro, which includes a library of UX/UI design assets and pre-built components to speed up design and development while promoting consistency.

💡Metadata-Driven

Metadata-driven refers to the use of metadata to manage and configure the properties of a system or application. In the video, Guidewire's Jutro design system is described as metadata-driven, allowing for easy configuration of UI components without hardcoding, which simplifies maintenance and future upgrades.

💡Omni-Channel Experiences

Omni-Channel Experiences are those that provide a seamless and consistent experience to customers across all channels, whether online, in-store, or via mobile devices. The video touches on the increasing user expectations for omni-channel experiences, which are consumer-like and require a significant investment in design and development resources.

💡Persona

A Persona is a fictional character created to represent the ideal user of a product or service. In the video, the persona 'Olivia' is used to illustrate the needs and motivations of a typical user interested in purchasing a certain type of insurance. Personas help in designing user experiences that cater to the target audience's specific requirements.

💡Responsive Design

Responsive Design is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes. The video mentions that the user experience is built with responsive design, ensuring that it can be easily reused on devices of different form factors, which is crucial for a seamless user experience across platforms.

Highlights

Introduction to the importance of user experience in digital products by Andrea Anderson from Guidewire.

Dimitri Reminuk discusses the impact of digital experiences on customer expectations and business success.

Statistics on the cost of bad user experience, including lost sales and increased customer support.

Benefits of good user experience highlighted, such as increased sales and customer retention.

The value of investing in user experience before the software development cycle.

The concept of a design-led development approach and its benefits in reducing development effort and increasing user satisfaction.

Key phases in the design-led development process, including identifying user problems and testing with end users.

Introduction to the concept of a design system and its role in streamlining design and development efforts.

Overview of Guidewire's own design system, UTRA, and its benefits for designers and developers.

The importance of understanding the user, such as Olivia, in the context of purchasing insurance.

Laying out the ideal user journey for purchasing insurance, focusing on key moments and user confidence.

Discussion on user experience flow, starting from the company's storefront and moving through the quote process.

The use of Guidewire's auto-generated code in the buy flow and its role in the user experience design.

Details on creating a detailed user experience design, including wizard relocation and user-friendly language.

Reflection on company branding in the user experience, including the use of colors, fonts, and images.

The process of adjusting the standard user experience to make it more farm-oriented for a new product.

Final thoughts on the presentation, summarizing the steps and tools used to create a great user experience.

Transcripts

[Music]

hello and welcome my name is andrea

anderson

and i'm the head of user experience here

at guidewire and really excited

to talk to you today about the art of

making great user experiences with

guidewire utro

hello and welcome from e2 my name is

dimitri reminuk i'm global practice

leader digital innovations at geithner

[Music]

most of us use digital experiences all

day long

now more than ever the zoom meeting

you're on right now is actually a

digital experience

your online banking app the websites you

host for your customers

the applications we use for shopping

making a reservation

buying tickets and so much more that

has made us less tolerant of poor user

experience

and we gravitate towards businesses that

offer great user experiences

we will cover the why the how the what

and

then dimitri will show us a really great

demo

there are some stunning numbers around

the cost of bad user experience

lost sales is just one of them did you

know that

45 of users give up if registration is

hard

or perceived a hurdle customer and it

support go up dramatically when you have

poor user experiences

people get stuck they might call they

might or might not get help

and another customer might be lost on

the other hand studies from

for example mckinsey or abm have shown

that there is a huge upside to good user

experience

and good design not only does it

increase sales

but it makes customers want to come back

which of course is key in insurance

where we want our customers to renew

their policy hopefully effortlessly

and perhaps even cross-sell them other

products that might be useful to them

i have seen over and over that spending

time on user experience before the

software development cycle

makes not only for quicker time to

market

but also will increase customer

satisfaction

i have been in the it and ux ui space

for a long time now

and i've learned a few things along the

way while

customer user experiences certainly can

be amazing

they also entail a significant

investment in both design

and development resources combine that

with

your users expectations omni-channel

consumer-like experiences

increasing i.t challenges such as

staffing for

designers or front-end developers or

even new software development life cycle

realities such as new ui technologies

making good application user experiences

can be daunting so then

what is the recipe for success number

one a design-led development approach

there's various names for it but

basically remember what i said earlier

that investing in user experience

thinking before the actual software

development starts

not only reduces development effort but

also increases user satisfaction

let me walk you through some of the key

phases

first you identify the user and the

problem space

what pain points and motivations and

needs are we actually going to address

with a solution then you might imagine

how might that user experience

look and feel in the ideal world you

also would test

any first user experience thinking with

intended end users

and also of course work closely with

development

and subject matter experts to make sure

what you're

designing is both feasible and viable

and then you begin working closely with

development to bring the user experience

to life

design-led development is a team sport

between designers subject matter experts

and developers

working closely together through the

entire lifecycle the second

part of the recipe for success is a

design system

you might have heard about material

design or salesforce lightning and some

other design systems out there

in short the intent behind the design

system is to lower both

the design and development effort and

increase consistency and cohesiveness

in the ui which in turn results in

better user experience

dimitri will talk about our new jutra

design system

and explain in more detail

so what is utro utra is guide file's own

design

system which includes a vetted library

of ux ui design

assets on one side and reusable library

of pre-built components on the other

all to speed up design and development

but also to promote the consistency

in user experience across different

consumer applications

in other words utra provides tools for

both

designers and developers that they later

can benefit from the metadata-driven

codeless approach

since each of the ui component in utro

library

is easily configured their so-called

presentation metadata

making it easy not only to create but

also to maintain in what

is more important to upgrade it in the

future and of course

it provides a set of foundation

capabilities across

all assets including built-in

functionality for the

responsiveness analytics

internationalization

and accessibility support for the end

users

so let's talk about great user

experience and

what really goes into it we will do this

along an example

imagine your business comes to you and

asks you to create a compelling web

experience

for new product they intend to launch to

farmers in australia

they give you the product model and your

marketing folks give you

the branding colors they want you to use

so that's really great but now what do

you do next

hi andre we are building quote

application for the brand new farm

product

and would love to adjust the standard

user experience

hope you could help us with it hi dmitry

yes

i've heard from product management about

the new farm product

um let me show first what we've got

working so far with the out of the box

user experience we have

automatically generated from our product

there are no custom styles

they are applied yet at all so we are

now on the landing page

where as usual i can start with quote

for the firm all in one product by

providing the zip code

and we have our standard wizard

including all the mandatory steps like

information about the customer require

application

questions and of course recoverables

and because it is on one product we have

a few of them

as you see there are from buildings

vehicles crops livestocks and also

possibility to cover

business interruptions and liabilities

we can add individual coverages in a

pop-up window

after providing minimum mandatory

information i can also select

corresponding coverages

right now is nothing automatically

pre-selected on this list but we are

going to change it later

in the product so the user experience

will be automatically updated

and that's how coverables and buildings

are shown after adding them

let's move on to the quad screen

not much details here so far but the

premium is calculated and shown

on the next screen they can provide some

missing contact details

and change the billing address if needed

then over to the payment screens which

we are reusing from

other lobs

[Music]

and that's it on final stat we have

policy created and all the basic details

are available

it's a standard bare bone user

experience and of course we would like

to adjust it and make it

more farm oriented i hope you can help

us with it

that is very helpful it helps me

understand the overall information

architecture

of this new product and the screens so

next we will work on both the

interaction design

and visual design to make sure the

product experience is going to be very

intuitive

let's check in regularly i'll set up a

call for us once a week

one of the key aspects of great user

experience is to no big surprise the

user

one of the first questions you should

clarify who is the solution for

and what are their needs and motivations

what context are they working in

or in what context are they going to buy

the insurance in let's take a look at

our user

often called persona olivia in our case

this persona was created based on the

needs and motivations of real users

that are interested in buying this kind

of insurance

what does olivia need when seeking out

insurance

for example she wants to understand what

courage she might need

she wants also to feel that she can

trust the insurer the next step is to

start laying out the journey

olivia would ideally take when

purchasing the insurance product

that might be suitable for her what are

those key moments

where is she at the moment what device

types is she using her experience should

make her feel confident and successful

and

you might also want to think through

devices and channels

olivia would be using since they will be

an important consideration

when building the solution next let's

start thinking about user experience

flow

the first experience olivia might

encounter is your company's storefront

or website

so at this point we might need to

account for two use cases

one get a new quote or the second one

continue

with an existing quote why is this

important well depending

on what action olivia chooses the next

screen

will show up for her for example an

account details page

next let's take a look at what we need

olivia to do next

to make her experience with our

application as simple

and fluid as possible at this point

you may want to start leveraging

guidewire's auto-generated code in buy

flow

the generated micro app makes an

excellent starting point for your user

experience

it also provides you the specifications

of the fields

olivia would need to complete in her

steps throughout getting a quote

now begins the work of creating the

detailed user experience design

for example we may want to keep olivia

informed how many steps she needs to

complete

and where is she in the quote process so

we

decided to relocate the auto-generated

wizard

to the top where it is easier to

discover for the user

we also want to define some

user-friendly human language

that speaks to olivia instead of reusing

system generated field labels

we clearly want to call out which fields

are required

and in what format so olivia doesn't

have to guess

where she has to provide information and

lastly to make olivia's life easy we

want to get as much

information auto completed so olivia can

get a quote

as quickly as possible with guidewire's

design system youtube

mocking up new experiences is easy

we provide you with configurable

components where you can set

properties such as text labels

formatting or tool tips

so you can not only create a design

mock-up but

actually use these same properties in

our code component library

designers work with generic design tools

such as sketch view or exure

for your convenience all our ui

components and patterns

are not available as code but also as

what's called a sketch

symbols library

our consultants or your designers can

easily mock up the ux

using components and properties that are

included as part of the ui library

part of a great user experience is

reflecting your company's brand which

also appeals to your user at the same

time

often colors fonts and images are seen a

little bit like eye candy but don't

underestimate the design effort that

goes into what we call

visual design your company might have

its own group

that owns branding or might even have

hired an outside agency

to help with web design unless their

help we also provide a few examples what

can be achieved

by modifying our out-of-the-box styling

often

a few simple changes to iconography

colors

or other company-specific information

can go far

in making a more engaging user

experience

so here's the splash page we kind of

took into consideration

brand of the customer here and then if

we continue along here then we have

the next screen which is the screen

where

all the coverages come up so the

buildings and the vehicles etc

and you notice we used to get this more

farm type

iconography here but we respected all

the fields that came from the product

model

so take a look and then let us know what

else you might need

really nice i love this talent colors

here visit on the top instead of the

left hand side is

also more streamlined for this kind of

the product

and thanks for providing all the visuals

we should be able to pick up those

together with all the styling attributes

in the inspection mode here so i can

quickly take both

assets and paste into the quote and by

code base and since it is a uter app as

well instead of doing inline changes

i can just create new form theme

there we set just a few properties for

themed colors backgrounds just to start

with

then we need to reference it from our

launcher

the main entry point in quote and buy

which starts the utro app

and voila we have an adjusted experience

you see the main colors background image

and the basic wizard is set as well

but i was wondering whether they could

have more details on the

colorable screen and make it really

shine

also more specifics for the wizard so

one can clearly differentiate

visited versus non-visited clickable

visit

non-clickable steps that would be

awesome

dimitri that already looks amazing so

let's start with the progress indicator

we could simply highlight on hover

where the user is at right now so for

example if they click on

questions we use a highlight color if

they move the cursor to carpetables and

that's a step they haven't touched yet

um we don't have the background color

but we highlight

where the user is at right now so that

should help i'll send those specs over

regarding the coverable screen so we

created some images

and i wonder if we could add

a white background behind each of the

kerbables

and then basically add an icon to the

right hand side

i can send you the image files and if

that will be possible i think it'll look

great

[Music]

foreign great

let me take a look first i'm going to

design

coverable screen and copy the image

assets from the

envision app

and by the way v13 we have decided to

refactor the screen itself

and to make it easier to maintain in

future by

creating new component for every card

there

we have similar design and functionality

so it will be quite useful in our

opinion

here they are new coverable card user

component with the metadata describing

the layout

this approach of using metadata by the

way instead of putting everything

in code they'll save us a lot of efforts

and hassle during the future upgrades

and as you see they are trying to use

main theming variables

the relative is possible and feasible

but of course

to make a pixel perfect design they can

always go

down to this specific page or component

the lizard steps styling they're

adjusted by the team in parallel

so let's see what we have after this

adjustment

i'm going quickly through the initial

steps to the coverable screen

which now looks exactly as in your

mockups

and of course the functionality is still

the same

also now user can much clearly see the

steps on the top

that they can directly jump back or

forward

make an overall user experience much

much friendly

but that's not all great user experience

is not only colors fonts or images user

experience starts with an insurance

product

and its content making it easier to

understand easier to make choice by

profiling the information which can be

fulfilled automatically

this can be done either using the

existing data in the system

or through guide via platform

integration capabilities

in both cases it would make ux much

smoother

and more streamlined allowing carers to

concentrate on the growth and innovation

aspects of their business

so let me show you our final design of

the quote experience with some

new neat features we have already seen

this capability of using google places

integration to fulfill customer details

but we went even further and after

discussing the product with a carrier

they have introduced function which

allows users

to define the ground area of the

buildings and the crop fields they want

to ensure

directly on the map as you see here

just by using the drawing tools on the

map component embedded

in our core journey and by doing this

they can automatically pre-fill some

fields on the screen

like the ground area and square meters

for the building here for example

also you see that coverages are

pre-selected

based on the updated design of the

product

same functionality is available for the

crop fields

the only difference will be that the

ground area

is calculated in hectares as

more suitable entity

but in both cases we are first of all

saving time for the user as they don't

need to enter the information manually

which we potentially need to search for

second information will be more precise

and up to date and third and maybe even

more important

since it will be saved together with a

submission and future policy

it could open whole bunch of new

opportunities for the insurance carriers

in terms of how they can process and

analyze it

either for the underwriting purposes or

even for the proactive claim handling

going through the rest of the flow we

have made some

other final touches to the different

screens including quote

policy information here with a reminder

of all selected coverages and ability

for users to amend directly from here if

needed

and of course the whole experience was

built in responsive design

as all of our digital applications so

you can

easily reuse it on devices of different

form factors not only desktops

we hope you enjoyed this presentation as

much as we enjoyed making it

let me summarize we showed how a

design-led development approach

leads to great user experience designs

we showed you

how you can accelerate the development

of digital experiences

and how you can launch and iterate

products fast

all this is possible with guidewire's

insurance suite guidewire digital

advanced product designer

and juju

you