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=19
8. 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 pattern
Primary button
Primary button Secondary button
Secondary button
The Elements of User Experience
Jessie James Garrett
9. Design patterns are implemented using code but cannot be reduced to code
A UX design pattern is not a…
WIDGET
10. 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
Solutions
Progress can be determined
Progress cannot be determined
Name
• System activity indicator
DESIGN PATTERN ELEMENTS
Context
11. 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
18. How we created and sold the business case
PROVE YOUR POINT TO THE BIZ
19. 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
22. THE BIZ CASE
1. Show the rough estimate how you go faster
2. Quantify the benefits
3. Make sure it’s a 1-pager!
23. THE BIZ CASE
More 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)
24. • Managing external resource
• Making sure the business can see the benefits
DAVID’S ONBOARD!
25. DAVID IS PART OF THE
TEAM
1. Full time, in our office
2. Had access to everyone he needed
3. 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
...
26. 1. 36 patterns published on the company internal Website
2. Axure library for consistent UI design across all UX resources
3. Brands across the business develop consistent style guides
ROLLING…
OUTCOMES IN 3 MONTHS
27. 1. Contracted external designer
2. 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
33. 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
34. 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
35. 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
36. 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
37. Get them full time in house
WORKING WITH EXTERNAL
Agree the scope up-front
Ensure engagement with the whole pattern
group
38. 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!
40. THANK YOU
Patty (Kazmierczak) Fronc
Royal London
Patty.kazmierczak@royallondongroup.co.uk
@Pattyka
Lorraine Paterson
Scottish Life
lpaterson@scottishlife.co.uk
@lorraine_p
Mike Jefferson
Scottish Life
mjefferson@scottishlife.co.uk
@mikeyj_uk
Editor's Notes
So after agreeing to set up regular cross-discipline meetings around 6 of us began to meet regularly for a couple of hours a week. The group consisted of 3UX, 3UI developers and 2 digital marketing. We started with the obvious or the most critical to projects we were working on at the time. After some time we eventually came up with a list of everything we thought we would eventually need to cover.Each session we tried to cover a single pattern (or a couple if the pattern was deemed fairly straightforward). We would discuss the current implementation of the pattern, what other patterns have advised and how we want to ultimately solve this design problem if different. Often the business needs meant we had to tailor certain aspects to take that into account. After the meeting the aim was for one person to volunteer to write up what was agreed to documentation.
We had an idealistic standard of how we would achieve it and hailed as hero's for saving the company from bad standards.We also held a high standard for ourselves and probably couldn’t appreciate at the time the positive changes we were making because it often felt like pushing a boulder up a hill.Feedback after 3 months from the team revealed what we thought was going well so far…The group was finding that good collaboration was beginning to build consensus and better working relationships.Everyone felt that had been able to learn from other perspectives they might not otherwise have had working alone/ in sub-groups.We’d managed to break down barriers often evident in large organisations – silos and ‘us and them’ mentality.Managed to document more robust solutions which we all bought in to – less opportunity for inconsistency and irrelevant change requests.
We quickly realised that it was difficult to get everyone together to discuss and agree patterns [herding cats] Had to chase people to review patternsTwo main issues – lack of prioritisation by the businesslack of dedicated owner to drive the worker (it’s a full time job!)We needed help so turned to the business stakeholders after 3 months to discuss the situation….Not everyone was engaged and others were fixated on the worst case scenario when we just couldn’t agree – the reality was that this didn’t happen often.Working together is always a challenge when you have lots of different personalities in the room! (Apprentice analogy)Baggage from previous ways of working meant that the ‘them & us’ mentality had to be overcome (from both sides)
Time was a symptom of the fact the UX standards were not a priority in the business and there were just too many other things happening to give it the time it needed.Everyone’s time was stretched due to large legislative projects meaning limited ability to spend writing up minutes/documentationNot everyone was engaged and others were fixated on the worst case scenario when we just couldn’t agree – the reality was that this didn’t happen often.Had to chase people to review patternsSpent longer than expected discussing various details of patterns, puzzle around level of detail to go to which we regularly struggled with. Also different project and brand perspectives [example?] [goldilocks images]Two main issues – lack of time, lack of dedicated owner to drive the worker (it’s a full time job)We needed help so turned to the business stakeholders after 3 months to discuss the situation….They agreed that the way to solve our problems was to seek some dedicated resource (probably external) to help get the job done.
UX patterns alone will not fix all the issues we were having before we began this process.
Over 80 items on the list
Business recognised a problem that had to be tackled.We no longer had to try to marry the pattern work with the workloads of the project related work. In reality, the research for patterns, writing up, organising meetings, rewriting was taking more time. It became clear we needed a dedicated resource.
90% as coverage of the list of patterns we laid out earlier
Success definitionTo have a fully functioning design pattern library by Q2 2013 and it being actively used by project teams across the group. What is a design pattern?Design patterns are reusable web-based resource that enables developers to identify agreed UX/UI solutions to common design problems. Each pattern will include a description of the problem to be solved, guidelines for use, with wireframes and/or coded interactive examples to illustrate the solution. Key benefitsEfficiency Alignment The design pattern process involves reaching agreement across different functions (UX, UI, and visual design) and departments (ITPC and digital marketing). Consistency Consistency is an important aspect of the user experience, and one of Nielsen's ten heuristics for user interface design (http://www.useit.com/papers/heuristic/heuristic_list.html). Key objectiveTo research, discuss, agree and document design patterns to provide re-usable solutions to recurring problems. Resourcing INTERNAL UX RESOURCES EXTERNAL UX RESOURCE1 day/ week per each UXD resource - to undertake a number of activities including: Identifying & researching design patternsDiscussing & agreeing design patternsDocumenting design patterns 5 days/ week to: Document patterns first and foremostDetail the requirements for the pattern library platform and support the digital marketing and UI teams to deliver it.Undertake any overflow of UX project work where required
Having the dedicated resource really provided some traction, we were making a sound progress
Published patterns gave our work visibilityA wide audience could access patterns, which meant more people started asking about themIt was a great springboard for us to work across the departments, projects and across silos.Engagement with senior stakeholders became easier. When we were finishing the work on patterns with David, I agreed with Marketing at Bright Grey to develop the Style Guide for Extranet application.
This document became a motivation for SLP to develop their own, as it clearly highlighted the need for other brands to have it.
UX patterns alone will not fix all the issues we were having before we began this processBUT the style guide for BG and the presence of the patterns provided the right momentum to agree that the missing piece of the puzzle was the style guide.So set out to start doing this – we are working on it in house as opposed to BG who used contractor. This is the quicker option.
UX patterns alone will not fix all the issues we were having before we began this processBUT the style guide for BG and the presence of the patterns provided the right momentum to agree that the missing piece of the puzzle was the style guide.So set out to start doing this – we are working on it in house as opposed to BG who used contractor which is often the quicker option.
Risk of preoccupation with consistency at the expense of evolving a design and improving on it. Challenge of making sure they are used in new projects and not ignored.
Relationship take time to develop – can’t be forced