ux scotland - ux patterns case study
DESCRIPTION
We (Patty, Lorraine and Mike) have presented at UX Scotland on UX patterns library we have established at Royal London. Presentation was held on 21.06.2013 at Dynamic Earth, Edinburgh; http://uxscotland.net/sessions/index.php?session=19TRANSCRIPT
![Page 1: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/1.jpg)
How we got to do UX in a large client-side organisation
UX PATTERNS – A CASE STUDY
PattyBright Grey
LorraineScottish Life
MikeScottish Life
![Page 2: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/2.jpg)
Who are
![Page 3: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/3.jpg)
We had some ups and downs!
OUR STORY
![Page 4: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/4.jpg)
SETTING THE SCENE
![Page 5: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/5.jpg)
1979 1995 2005
Architecture Software UI
1988 1992
Usability
DESIGN PATTERNSA brief history
![Page 6: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/6.jpg)
WHAT IS A UX DESIGN PATTERN
?
![Page 7: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/7.jpg)
WHAT IS A UX DESIGN PATTERN
?NOT
![Page 8: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/8.jpg)
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
![Page 9: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/9.jpg)
Design patterns are implemented using code but cannot be reduced to code
A UX design pattern is not a…
WIDGET
![Page 10: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/10.jpg)
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
![Page 11: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/11.jpg)
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
![Page 12: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/12.jpg)
IN THE BEGINNING
![Page 13: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/13.jpg)
And sliding down into the darkness…
LET’S DO THE PATTERNS!
![Page 14: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/14.jpg)
Positive outcomes reinforced the value of the work.
IDEALISED VIEW
![Page 15: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/15.jpg)
REALITY OF THE WORK
![Page 16: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/16.jpg)
![Page 17: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/17.jpg)
Strategy for success
3 MONTH MARKER
![Page 18: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/18.jpg)
How we created and sold the business case
PROVE YOUR POINT TO THE BIZ
![Page 19: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/19.jpg)
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
![Page 20: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/20.jpg)
GETTING SOME MOMENTUM
1 day/ week to work explicitly on the patterns• But was this enough?
![Page 21: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/21.jpg)
GETTING SOME MOMENTUM
1 day/ week to work explicitly on the patterns• But was this enough?
![Page 22: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/22.jpg)
THE BIZ CASE1. Show the rough estimate how you go faster2. Quantify the benefits3. Make sure it’s a 1-pager!
![Page 23: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/23.jpg)
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)
![Page 24: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/24.jpg)
• Managing external resource• Making sure the business can see the benefits
DAVID’S ONBOARD!
![Page 25: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/25.jpg)
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
...
![Page 26: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/26.jpg)
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
![Page 27: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/27.jpg)
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
![Page 28: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/28.jpg)
NEXT CHALLENGES
![Page 29: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/29.jpg)
PATTERNS ALONE WILL NOT SOLVE YOUR PROBLEMS
![Page 30: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/30.jpg)
Promote the patterns but also explain their purpose.
COMMUNICATE!
![Page 31: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/31.jpg)
Avoid preoccupation with consistency
EDUCATE
![Page 32: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/32.jpg)
What we have learned in the process
TIPS
![Page 33: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/33.jpg)
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
![Page 34: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/34.jpg)
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
![Page 35: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/35.jpg)
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
![Page 36: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/36.jpg)
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
![Page 37: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/37.jpg)
Get them full time in house
WORKING WITH EXTERNAL
Agree the scope up-front
Ensure engagement with the whole pattern group
![Page 38: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/38.jpg)
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!
![Page 39: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/39.jpg)
• 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
![Page 40: UX Scotland - UX Patterns case study](https://reader033.vdocuments.net/reader033/viewer/2022061114/5457c176b1af9fb66e8b5406/html5/thumbnails/40.jpg)
THANK YOUPatty (Kazmierczak) FroncRoyal [email protected] @Pattyka
Lorraine PatersonScottish [email protected]@lorraine_p
Mike JeffersonScottish [email protected]@mikeyj_uk