Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bromley MyLife Training

348 views

Published on

Presentation to support the internal training session I ran today with my team (including a work experience placement) on our Bromley MyLife website.

Created by www.iammichaelwatts.com.

  • Be the first to comment

  • Be the first to like this

Bromley MyLife Training

  1. 1. Towards simplicity – a training programme for our Bromley MyLife website Visit http://bromley.mylifeportal.co.uk Created by – Michael Watts, Product Owner michael.watts@bromley.gov.uk January 2016
  2. 2. We are going to achieve – 1. To remember why we are here - but not in a deep philosophical way 2. To understand what makes the website the website - like Terms & Conditions, but more interesting 3. To have a chance to play with the actual website - with real life examples Introduction ____ Visit http://bromley.mylifeportal.co.uk
  3. 3. ____ Visit http://bromley.mylifeportal.co.uk What do you want to get out of this? http://www.bethanyvillageathome.org/wp-content/uploads/2014/11/bigstock-Set-Goals-Hand-Red-Marker- 40622692.jpg
  4. 4. ____ Visit http://bromley.mylifeportal.co.uk
  5. 5. ----- …and to do that, we need to start with why ----- So, to go forward, we need to go back... ____ Visit http://bromley.mylifeportal.co.uk Taken from…
  6. 6. So, why do we have our Bromley MyLife website? ____ Visit http://bromley.mylifeportal.co.uk Shout out what you think
  7. 7. To help people make informed choices about their lives ____ Visit http://bromley.mylifeportal.co.uk
  8. 8. Our website - a lifetime of development & change ____ Visit http://bromley.mylifeportal.co.uk Image : http://aprilkirkwood.com/wp-content/uploads/2015/05/life-stages.jpg
  9. 9. ____ Visit http://bromley.mylifeportal.co.uk The life of our website - in a single timeline
  10. 10. To help people make informed choices about their lives ____ Visit http://bromley.mylifeportal.co.uk
  11. 11. 1. Our driving principle 2. Our standards 3. Our style The important stuff - before we get to the fun bits! ____ Visit http://bromley.mylifeportal.co.uk
  12. 12. Time for some chanting… - “user experience, user experience, user experien The user* experience needs to be at the heart of everything we do. -- No exceptions -- * and by the user we mean members of the public and professionals ____ Visit http://bromley.mylifeportal.co.uk
  13. 13. ____ Visit http://bromley.mylifeportal.co.uk 1. A popular example of user experience - why, just why?
  14. 14. 2. My user experience - in Maidstone! ____ Visit http://bromley.mylifeportal.co.uk
  15. 15. 3. A user experience - in the office! ____ Visit http://bromley.mylifeportal.co.uk
  16. 16. 4. A user experience - by the Council! ____ Visit http://bromley.mylifeportal.co.uk Step 1 Step 2 Step 3 Step 4
  17. 17. Time for some chanting… - “user experience, user experience, user experien The user* experience needs to be at the heart of everything we do. -- No exceptions -- * and by the user we mean members of the public and professionals ____ Visit http://bromley.mylifeportal.co.uk
  18. 18. ____ Visit http://bromley.mylifeportal.co.uk http://img.cdandlp.com/2012/09/imgL/115565672.jpg
  19. 19. The old skool way - how we used to do things ____ Visit http://bromley.mylifeportal.co.uk
  20. 20. Our design-led approach - the 5 stages of development Plus: Retire the old stuff ____ Visit http://bromley.mylifeportal.co.uk
  21. 21. ____ Visit http://bromley.mylifeportal.co.uk http://www.thedigitalprojectmanager.com/wp-content/uploads/2015/01/terms-and-conditions- apply.jpg
  22. 22. Standard 1: The user experience is paramount & is at the heart of the website Standard 2: Information is provided in ‘public friendly’ wording with no jargon – or very minimal, well explained, jargon when the user needs it Standard 3: The pages are designed & built from a landscaped smartphone viewpoint Standard 4: Information is provided using learning from behavioural insights to ‘nudge’ the user towards self-directed & self-managed support as a method of demand management Standard 5: The pages are regularly reviewed & revised based on user experience Our five core standards ____ Visit http://bromley.mylifeportal.co.uk
  23. 23. Users like the images & brightness of the website – so, we need to keep & build on that Users expect a consistent experience – so, we need to have a similar style & format across all the pages Users want honest & open advice – so, we need to be transparent about services, eligibility criteria, costs, etc. ---- The key takeaway – We need to make sure that all our pages are similar – not identical – across all the sections Our style is our strength - let’s build on our authentic voice ____ Visit http://bromley.mylifeportal.co.uk
  24. 24. Part of the purpose of the website is to manage demand on the Council’s services - so, if users need to go through other services that are available in their local community first, then we need to say that • Being honest manages expectations, reduces the number of ‘negative first contacts’, & gives people a better user experience • Signposting to the correct services in a clear way can make sure that all local services are fully used ---- The key takeaway – When we write content & build pages, we need to point people to the correct places in the order that they will need to use them – users want honesty Helping manage demand - helping people find the right support ____ Visit http://bromley.mylifeportal.co.uk
  25. 25. Users want to find information easily & quickly – & then be able to understand it! - so, we need to make sure the information is written in simple, easy to understand terminology (we do have a tool that can test it!) Users read less than 20% of the text content on an average web page - so, we need to be focused on what we write & make sure the key points are clear • Use boxes, bullet points, rework paragraphs & highlight important bits ---- The key takeaway – When we write content, stop & re-read it. Would a member of your family (or a mate in the pub/coffee shop/restaurant/spa*) understand it? No? Then change it! Do you understand it? - keep information simple ____ Visit http://bromley.mylifeportal.co.uk * delete as appropriate!
  26. 26. Users often look past images – & can often get frustrated by them – but we also know that users like the images & brightness of our website - so, we need to make sure that the images that we use are relevant, add to the page & are not obviously “fake people stock photos” Users get annoyed by poor quality images that are not properly produced - so, we need to make sure that our images are not stretched, fuzzy or look ‘cheap’ ---- The key takeaway – When we build pages, only use images that add to the user experience & which are high quality A picture is worth a 1,000 words - except when it isn’t! ____ Visit http://bromley.mylifeportal.co.uk
  27. 27. Users are increasingly visiting the website on a mobile or tablet device* - so, we need to make sure that they have a good experience of each & every page that they visit Users visit pages about an actual service on a mobile more than pages about processes, eligibility criteria & ‘waffle’ - so, we need to understand that users want to find & use information in different ways ---- The key takeaway – We need to make sure we build all pages from a landscaped smartphone viewpoint – focusing on pages about an actual service Mobile (& tablets) are the future - let’s give them a good experience now ____ Visit http://bromley.mylifeportal.co.uk * 1 in 100 visits in May 2011 compared to 1 in 2 visits in May 2015
  28. 28. ____ Visit http://bromley.mylifeportal.co.uk http://wallpaperstock.net/time-to-play-poker_twitter_cover_16911_1600x1200_1.html Almost
  29. 29. What’s the brief? We have been commissioned by Bromley CCG to build a new set of pages to help promote the self-management (patients) courses that they have commissioned What’s the timescale? Bromley CCG have an event to launch the courses – and to train new patients – in 3 weeks time What’s happened so far? This is the first we have heard about the event or the need to have this on the website. The lead officer has sent a word document with what they want the pages to say & a supporting image. These are attached. The exercise ____ Visit http://bromley.mylifeportal.co.uk
  30. 30. ____ Visit http://bromley.mylifeportal.co.uk http://pre09.deviantart.net/1b83/th/pre/i/2011/275/9/9/but___where_to_start__by_thesilentnight-d4bo6dc.jpg
  31. 31. ____ Visit http://bromley.mylifeportal.co.uk
  32. 32. Let’s pick apart the brief - • Why are these pages being developed? - What do you think? So, to go forward, we need to go back... ____ Visit http://bromley.mylifeportal.co.uk
  33. 33. Let’s pick apart the brief - • Why are these pages being developed? - What do you think? -- Now we know why they are being developed -- move on to the next stage So, to go forward, we need to go back... ____ Visit http://bromley.mylifeportal.co.uk
  34. 34. Let’s pick apart the brief - • Why are these pages being developed? - What do you think? -- Now we know why they are being developed -- move on to the next stage • Does that fit with the purpose of the website? - Hands up who thinks it does – why? So, to go forward, we need to go back... ____ Visit http://bromley.mylifeportal.co.uk
  35. 35. Let’s pick apart the brief - • Why are these pages being developed? - What do you think? -- Now we know why they are being developed -- move on to the next stage • Does that fit with the purpose of the website? - Hands up who thinks it does – why? -- Now we know it does fit -- move on to the next stage So, to go forward, we need to go back... ____ Visit http://bromley.mylifeportal.co.uk
  36. 36. Let’s pick apart the brief - • Why are these pages being developed? - What do you think? -- Now we know why they are being developed -- move on to the next stage • Does that fit with the purpose of the website? - Hands up who thinks it does – why? -- Now we know it does fit -- move on to the next stage • What need will this meet? Who will it benefit? Who is it aimed at? - Time for you to create a Persona So, to go forward, we need to go back... ____ Visit http://bromley.mylifeportal.co.uk
  37. 37. ____ Visit http://bromley.mylifeportal.co.uk http://www.romanpichler.com/wp-content/uploads/2013/12/RomansPersonaTemplateApplied.jpg
  38. 38. Let’s pick apart the brief - • Why are these pages being developed? - What do you think? -- Now we know why they are being developed -- move on to the next stage • Does that fit with the purpose of the website? - Hands up who thinks it does – why? -- Now we know it does fit -- move on to the next stage • What need will this meet? Who will it benefit? Who is it aimed at? - Time for you to create a Persona -- Now we know who are aiming at -- move on to the next stage So, to go forward, we need to go back... ____ Visit http://bromley.mylifeportal.co.uk
  39. 39. ____ Visit http://bromley.mylifeportal.co.uk http://wallpaperstock.net/time-to-play-poker_twitter_cover_16911_1600x1200_1.html Stay with me, it’s almost
  40. 40. ____ Visit http://bromley.mylifeportal.co.uk http://www.wearemobedia.com/blog/wp-content/uploads/2015/05/consistency-in-web-design.png
  41. 41. To help ensure consistency across the site, we use this template: Let’s build on our authentic voice - “trust is built with consistency”* ____ Visit http://bromley.mylifeportal.co.uk * so said Lincoln Chafee
  42. 42. ____ Visit http://bromley.mylifeportal.co.uk http://v6b0gvfpa9-flywheel.netdna-ssl.com/wp-content/uploads/2014/05/Clear-As-Mud.png - let’s break the page down…
  43. 43. ____ Visit http://bromley.mylifeportal.co.uk Content page (1) Content page (3) Content page (2) Existing Content page (4) Existing Content page (5) Menu panel page Quick Links box (2) Quick Links box (1) The separate sections of a single page… - “the whole is greater than the sum of its parts”* * so said Aristotle
  44. 44. All writing must be public friendly We need to test all our content using a Readability test – please use https://readability-score.com We want the best levels we can get – • a Readability Formula above 50 • an Average Grade Level below 12 How we write ____ Visit http://bromley.mylifeportal.co.uk
  45. 45. 1. The title must be in Heading 1, centre aligned 2. The subtitle must be in Heading 3, centre aligned 3. The paragraph must be in normal 4. Subheadings should be in Heading 3, followed by Heading 4 5. Bullet points should be in standard format Our writing format ____ Visit http://bromley.mylifeportal.co.uk 1 2 3 4 5
  46. 46. All links within the website are important and need to be done consistently & clearly • We should never say “click here” – instead we should tell the user what is happening, such as… All links to internal pages should be in the existing window All links to external websites & document should be in a new window with a description – see… How we link ____ Visit http://bromley.mylifeportal.co.uk
  47. 47. The pages are 1200 pixels wide 1. Full page wide images must be 1200 pixels wide, and no more than 500 pixels in height 2. Carousel images are 1200 x 500 pixels 3. Menu images are 400 x 266 pixels 4. Images must never be stretched, squashed or squeezed! • They must always, always be resized and cropped to fit Image size ____ Visit http://bromley.mylifeportal.co.uk 1 2 3 4
  48. 48. 2. Ektron 3. PortalStudio1. MyLife The MyLife product - & so our website – is made up of three parts How MyLife works ____ Visit http://bromley.mylifeportal.co.uk
  49. 49. What the user sees & experiences
  50. 50. How Ektron works ____ Visit http://bromley.mylifeportal.co.uk Step 1 Login screen Step 2 The home screen
  51. 51. ____ Visit http://bromley.mylifeportal.co.uk Home Where the pages are stored – and the useful links boxes too Where documents & images are stored
  52. 52. Now, let’s play… ____ Visit http://bromley.mylifeportal.co.uk www.kumiyamashita.com/dev/wp-content/uploads/13-BUILDING-BLOCKS.jpg?1451952000038
  53. 53. Contact me – Michael Watts, Product Owner michael.watts@bromley.gov.uk October 2015

×