UX Scotland - UX Patterns case study

9,762 views

Published on

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

3 Comments
26 Likes
Statistics
Notes
No Downloads
Views
Total views
9,762
On SlideShare
0
From Embeds
0
Number of Embeds
330
Actions
Shares
0
Downloads
85
Comments
3
Likes
26
Embeds 0
No embeds

No notes for slide
  • 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
  • 2nd - but this almost certainly isn’t enough
  • LP
  • LP
  • UX Scotland - UX Patterns case study

    1. How we got to do UX in a large client-side organisationUX PATTERNS – A CASE STUDYPattyBright GreyLorraineScottish LifeMikeScottish Life
    2. Who are
    3. We had some ups and downs!OUR STORY
    4. SETTING THE SCENE
    5. 1979 1995 2005Architecture Software UI1988 1992UsabilityDESIGN PATTERNSA brief history
    6. WHAT IS A UX DESIGN PATTERN?
    7. WHAT IS A UX DESIGN PATTERN?NOT
    8. A UX design pattern is not a…STYLE GUIDEStyle guideA primary button should bemore prominent thansecondary button in order tocapture the user’s attention.Design patternPrimary buttonPrimary button Secondary buttonSecondary buttonThe Elements of User ExperienceJessie James Garrett
    9. Design patterns are implemented using code but cannot be reduced to codeA UX design pattern is not a…WIDGET
    10. Rationale• System should indicate that a process is in progress to avoid the userinferring that something has gone wrong• System should indicate how long the process will take to manageuser expectations and enable planningSolutionsProgress can be determinedProgress cannot be determinedName• System activity indicatorDESIGN PATTERN ELEMENTSContext
    11. SO, WHY USE THEM?Design patterns benefit….…. the bottom line: Efficiency…. the user: Consistency…. the organisation: Collaboration, alignment…. the UX team: Visibility, authorityDesign patterns allow the UX team to do UX
    12. IN THE BEGINNING
    13. And sliding down into the darkness…LET’S DO THE PATTERNS!
    14. Positive outcomes reinforced the value of thework.IDEALISED VIEW
    15. REALITY OF THE WORK
    16. Strategy for success3 MONTH MARKER
    17. How we created and sold the business casePROVE YOUR POINT TO THE BIZ
    18. GOOD HOUSEKEEPINGUsability evaluation and Reportof the current system (one of them!)The ‘Holy s**t’ list of inconsistencies andthe basic patterns needed
    19. GETTING SOMEMOMENTUM1 day/ week to work explicitly on the patterns• But was this enough?
    20. GETTING SOMEMOMENTUM1 day/ week to work explicitly on the patterns• But was this enough?
    21. THE BIZ CASE1. Show the rough estimate how you go faster2. Quantify the benefits3. Make sure it’s a 1-pager!
    22. 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)
    23. • Managing external resource• Making sure the business can see the benefitsDAVID’S ONBOARD!
    24. DAVID IS PART OF THETEAM1. Full time, in our office2. Had access to everyone he needed3. We had access to him every day throughout the 3 monthsHe organises the pattern meetingsCreates the content for reviewDoes the researchGathers feedbackWrites up the patternReports on the progress‘Show & Tell’ to the biz at the end...
    25. 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 guidesROLLING…OUTCOMES IN 3 MONTHS
    26. 1. Contracted external designer2. 1 monthStyle Guide for Bright GreyPATTERNS AS A SPRINGBOARDProve by doing!3. Highlighted the need for otherbusinesses to invest in thattype of content
    27. NEXT CHALLENGES
    28. PATTERNS ALONE WILL NOT SOLVEYOUR PROBLEMS
    29. Promote the patterns but also explain their purpose.COMMUNICATE!
    30. Avoid preoccupation with consistencyEDUCATE
    31. What we have learned in the processTIPS
    32. Evangelise & get buy-in sooner to get resourceBUSINESS BUY-INRe-cap with the biz to show progressGet a dedicated resource (internal or external)to get it done!Get senior stakeholders in your corner – identify aUX champion
    33. Quantify and communicate the benefitsBIZ CASEDon’t bore them – one page is enoughMake it stick – use your creative UX skills tocommunicate the problem differently
    34. Try not to get hung up on points of disagreement– strive to find common groundCOLLABORATIONEngage others across disciplines to gain buy-in and create more robust solutions
    35. Make use of patterns that are out thereCREATING PATTERNSGet the right level of detail and don’t be a slaveto the patternUX design patterns are for you (the UX team) aswell as others
    36. Get them full time in houseWORKING WITH EXTERNALAgree the scope up-frontEnsure engagement with the whole patterngroup
    37. WORKING WITH A LARGECLIENT – AS AN EXTERNALHave a clear picture of what you’re there to do&Make it clear what you’re going to deliverRemain true to it despite politics andagendas. It’s easy to be swayed to keep peoplehappy!
    38. • 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
    39. THANK YOUPatty (Kazmierczak) FroncRoyal LondonPatty.kazmierczak@royallondongroup.co.uk@PattykaLorraine PatersonScottish Lifelpaterson@scottishlife.co.uk@lorraine_pMike JeffersonScottish Lifemjefferson@scottishlife.co.uk@mikeyj_uk

    ×