Designing with Intent - Camden website redesign project

660 views

Published on

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
660
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • To change the title slide image
    You can delete the “bridge” image by clicking on it and pressing delete.
    To insert a new photograph go to Insert and choose Picture > From File …, select your picture from the file where it is saved.
    …or leave the title slide blank if you prefer.
  • Spoke to approximately 50 residents
  • Tips for inserting photographs
    To insert a photograph go to Insert and choose Picture > From File …, select your picture from the file where it is saved.
    Resize your picture by dragging with your mouse, hold down the shift key and drag diagonally from a corner to make sure that you maintain the original proportions and ratio of the image.
    Photographs do not need to be high resolution in PowerPoint as this leads to overly large file sizes. If possible, make sure that your photographs are saved at the best resolution for electronic display, ie compressed Jpeg files at 72 dpi, before you insert them into your PowerPoint presentation.
  • Designing with Intent - Camden website redesign project

    1. 1. Designing with Intent Camden website redesign project Alasdair Mangham Head of Information systems and development
    2. 2. A bit about Camden
    3. 3. The Challenge Insert picture of city of London
    4. 4. The Internet is a disruptive technology
    5. 5. But governments are only disrupted by revolution Insert picture of Marx in Highgate cemetery
    6. 6. E-government breaks all the rules of E- Business E-Government • Monopoly with regulatory protection • Controls all of the supply chain • Can regulate demand • Is based upon a permanence of bureaucratic process E-Business • Seeks to gain competitive advantage • Disrupts established supply chains • Opens up previously untapped demand • Is agile and responsive to change
    7. 7. You become the business you measure • Picture of chernobyl
    8. 8. Meetings with Hippos
    9. 9. Reading recommendation
    10. 10. Service Design Principals • Good service design depends on a good understanding of your customer are • Good service design depends on understanding how your customers currently use your product and comparative products in the market • Good service design is evidence based • Good service design is based upon iterative improvements • Good service design will enable the business to meet its objectives
    11. 11. Design process - Outcomes v Intent • Outcome orientated design is better suited for making specific changes to a website • The process identifies key KPI’s that require changing and sets parameters for success • Through utilising usability studies and in some cases A/B testing it identifies specific elements of a site that need changing • The changes are implemented and measured against the KPIs that have been determined as part of the process.
    12. 12. Outcome orientated design – Payments pages rebuild Usability review • Cluttered design • Unclear instructions and field labelling • Too many “ejector seat levers” – user could leave the transaction process without being aware • Lack of clear focus on the payment process • Unnecessary steps and features • Unclear error handling and messages
    13. 13. Homepage
    14. 14. Homepage •New uncluttered design throughout: left and right hand navigation columns have been removed allowing customers to focus on payments process •Payment links on homepage now sorted into logical groups •Security information clearer and listed in one place
    15. 15. Account confirmation & amount to pay
    16. 16. Account summary and amount to pay •Brown boxes removed throughout system as they focussed users attention away from other important items •System now automatically strips out other symbols from the amount to enter box •Increased accessibility by removing JavaScript function that automatically focused and selected the contents of the “pounds” field
    17. 17. Enter payment details
    18. 18. Payment details •Card details layout changed and made clearer •Select card type drop down added and accepted cards shown •Start date/issue number” advice moved next to relevant field •Address information separated into separate fields and clearly labelled
    19. 19. Payment success
    20. 20. Payment success •Main heading changed from “Pay” (which gave impression user still had something to pay) •Transaction reference number clearly displayed •Transaction summary presented in a table •Downloadable receipt provided •New information on how to correct a mistake •Clear call to actions on what to do next
    21. 21. Designing with Intent – Camden website Informational Transactional
    22. 22. Approach Capt ur i ng Camden’ s r esi dent s r equi r ement s • Street surveys Reach unengaged • Focus groups Gener at e i deas • Home interviews Under st and exper i ences • Usability testing ‘in situ’ Obser ve behavi our & i dent i f y i ssues • Create a research report & supporting documentation
    23. 23. Research What di d we l ear n? • Key improvements in website usability & visual design will significantly assist user engagement & productivity • Digital service delivery innovation should target leisure and library services first • Transparency of decision-making and conflict resolution improves understanding and positive sentiment • Digital channels can improve on the ability to resolve tasks
    24. 24. Resolution Immediacy What ’ s happeni ng now? web in person phone email letter
    25. 25. Resolution Immediacy web in person phone email letter web email What shoul d be happeni ng
    26. 26. Research How do we cont i nue t o l ear n? • Interviews pr ovi de deep under st andi ng of compl ex exper i ences • Create and evolve personas t o under st and goal s and behavi our s acr oss common gr oups of r esi dent s • Create user journeys t o under st and sent i ment and mi ndset dur i ng ser vi ce use
    27. 27. Design What ar e t he 3 gui di ng pr i nci pal s of t he user exper i ence? 1. Crystal clear: Luci d and t r anspar ent 2. Don’t call on the phone to action: Enabl i ng easy t ask r esol ut i on onl i ne. No unnecessar y di ver t i ng t o ot her channel s 3. Keep in touch: Feel i ng connect ed and i nf or med
    28. 28. Nobody knows anything… • 73% of the test group rated the general look and feel of the new design as Excellent • But when asked to perform tasks relating to planning the majority of participants expressed uncertainty as to which area of the website they should be going to. • “Business”, “Community & living”, “Council & democracy”, “Education”, “Environment”, “Housing”, “Leisure”, “Policing & public safety”, “Social care & health” and “Transport & streets”—might house the Planning area. • It took them 57 seconds (on average)to find out.
    29. 29. FC mood boards
    30. 30. until you go live • The headings in the main navigation dropdown menus were missed by participants • Analysis of the eye-tracking data that we captured during the • testing reveals that most participants did not read the • headings that appear at the top of the main navigation • dropdown menus, namely “Popular” and “In this section”.
    31. 31. Further steps
    32. 32. IMPROVE CONVERSION… Disconnect between action navigation and transactions ?
    33. 33. IMPROVE CONVERSION… Inconsistent and confusing transaction user journeys
    34. 34. IMPROVE CONVERSION… Streamline transaction process Challenge parking fine STEP 1 STEP 2 STEP 3 STEPS 4 - 17 STEP 18
    35. 35. IMPROVE CONVERSION… Reduce content, and improve separation of FAQs, screening steps & transactions
    36. 36. IMPROVE CONVERSION… Improve form design and and create screening tools
    37. 37. IMPROVE CONVERSION… Improve calls to action ?
    38. 38. IMPROVE CONVERSION… ...on this page the user is unsure of the best next step:
    39. 39. Next steps
    40. 40. Contact: Alasdair Mangham Head of Information Systems and Development Alasdair.mangham@camden.gov.uk

    ×