ux scotland - ux patterns case study

How we got to do UX in a large client-side organisation

UX PATTERNS – A CASE STUDY

PattyBright Grey

LorraineScottish Life

MikeScottish Life

Who are

We had some ups and downs!

OUR STORY

SETTING THE SCENE

1979 1995 2005

Architecture Software UI

1988 1992

Usability

DESIGN PATTERNSA brief history

WHAT IS A UX DESIGN PATTERN

?

WHAT IS A UX DESIGN PATTERN

?NOT

A UX design pattern is not a…

STYLE GUIDE

Style guide

A primary button should be more prominent than secondary button in order to capture the user’s attention.

Design patternPrimary button

Primary button Secondary button

Secondary button

The Elements of User Experience

Jessie James Garrett

Design patterns are implemented using code but cannot be reduced to code

A UX design pattern is not a…

WIDGET

Rationale• System should indicate that a process is in progress to avoid the user

inferring that something has gone wrong

• System should indicate how long the process will take to manage user expectations and enable planning

SolutionsProgress can be determined

Progress cannot be determined

Name• System activity indicator

DESIGN PATTERN ELEMENTS

Context

SO, WHY USE THEM?

Design patterns benefit….

…. the bottom line: Efficiency

…. the user: Consistency

…. the organisation: Collaboration, alignment

…. the UX team: Visibility, authority

Design patterns allow the UX team to do UX

IN THE BEGINNING

And sliding down into the darkness…

LET’S DO THE PATTERNS!

Positive outcomes reinforced the value of the work.

IDEALISED VIEW

REALITY OF THE WORK

Strategy for success

3 MONTH MARKER

How we created and sold the business case

PROVE YOUR POINT TO THE BIZ

GOOD HOUSEKEEPING

Usability evaluation and Report of the current system (one of them!) The ‘Holy s**t’ list of inconsistencies and

the basic patterns needed

GETTING SOME MOMENTUM

1 day/ week to work explicitly on the patterns• But was this enough?

GETTING SOME MOMENTUM

1 day/ week to work explicitly on the patterns• But was this enough?

THE BIZ CASE1. Show the rough estimate how you go faster2. Quantify the benefits3. Make sure it’s a 1-pager!

THE BIZ CASEMore information in case it was needed:- Convey the benefits (‘bacteria’ diagram)- Address pain points of the organisation- Don’t speak UX!:

- Success definition- Key benefits- Key objective- Resourcing (internal & external)

• Managing external resource• Making sure the business can see the benefits

DAVID’S ONBOARD!

DAVID IS PART OF THE TEAM

1. Full time, in our office2. Had access to everyone he needed3. We had access to him every day throughout the 3 months

He organises the pattern meetings

Creates the content for review

Does the research

Gathers feedback

Writes up the pattern

Reports on the progress

‘Show & Tell’ to the biz at the end

...

1. 36 patterns published on the company internal Website2. Axure library for consistent UI design across all UX resources3. Brands across the business develop consistent style guides

ROLLING…

OUTCOMES IN 3 MONTHS

1. Contracted external designer2. 1 month

Style Guide for Bright Grey

PATTERNS AS A SPRINGBOARD

Prove by doing!

3. Highlighted the need for other businesses to invest in that type of content

NEXT CHALLENGES

PATTERNS ALONE WILL NOT SOLVE YOUR PROBLEMS

Promote the patterns but also explain their purpose.

COMMUNICATE!

Avoid preoccupation with consistency

EDUCATE

What we have learned in the process

TIPS

Evangelise & get buy-in sooner to get resource

BUSINESS BUY-IN

Re-cap with the biz to show progress

Get a dedicated resource (internal or external) to get it done!

Get senior stakeholders in your corner – identify a UX champion

Quantify and communicate the benefits

BIZ CASE

Don’t bore them – one page is enough

Make it stick – use your creative UX skills to communicate the problem differently

Try not to get hung up on points of disagreement – strive to find common ground

COLLABORATION

Engage others across disciplines to gain buy-in and create more robust solutions

Make use of patterns that are out there

CREATING PATTERNS

Get the right level of detail and don’t be a slave to the pattern

UX design patterns are for you (the UX team) as well as others

Get them full time in house

WORKING WITH EXTERNAL

Agree the scope up-front

Ensure engagement with the whole pattern group

WORKING WITH A LARGE CLIENT – AS AN EXTERNAL

Have a clear picture of what you’re there to do&

Make it clear what you’re going to deliver

Remain true to it despite politics and agendas. It’s easy to be swayed to keep people happy!

• http://developer.yahoo.com/ypatterns/about/libraries.html

• http://ui-patterns.com/patterns• http://osdpl.fluidproject.org/• http://www.bbc.co.uk/gel• https://www.gov.uk/designprinciples• http://wiki.fluidproject.org/display/fluid/How+to+Write+a

+Good+Design+Pattern• http://patternry.com/patterns/

RESOURCES

THANK YOUPatty (Kazmierczak) FroncRoyal LondonPatty.kazmierczak@royallondongroup.co.uk @Pattyka

Lorraine PatersonScottish Lifelpaterson@scottishlife.co.uk@lorraine_p

Mike JeffersonScottish Lifemjefferson@scottishlife.co.uk@mikeyj_uk