Top Banner
Towards simplicity – a training programme for our Bromley MyLife website sit http://bromley.mylifeportal.co.uk Created by – Michael Watts, Product Owner [email protected] January 2016
53

Bromley MyLife Training

Apr 12, 2017

Download

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Bromley MyLife Training

Towards simplicity– a training programme for our Bromley MyLife website

Visit http://bromley.mylifeportal.co.uk

Created by –

Michael Watts, Product Owner [email protected] January 2016

Page 2: Bromley MyLife Training

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

Page 3: Bromley MyLife Training

____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

Page 4: Bromley MyLife Training

____Visit http://bromley.mylifeportal.co.uk

Page 5: Bromley MyLife Training

-----…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…

Page 6: Bromley MyLife Training

So, why do we have our Bromley MyLife website?

____Visit http://bromley.mylifeportal.co.uk

Shout out what you think

Page 7: Bromley MyLife Training

To help people make informed choices about their lives

____Visit http://bromley.mylifeportal.co.uk

Page 8: Bromley MyLife Training

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

Page 9: Bromley MyLife Training

____Visit http://bromley.mylifeportal.co.uk

The life of our website- in a single timeline

Page 10: Bromley MyLife Training

To help people make informed choices about their lives

____Visit http://bromley.mylifeportal.co.uk

Page 11: Bromley MyLife Training

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

Page 12: Bromley MyLife Training

Time for some chanting… - “user experience, user experience, user experience”

The user* experience needs to be at the heart of everything we do.

-- No exceptions --

* and by the user we meanmembers of the public and professionals

____Visit http://bromley.mylifeportal.co.uk

Page 13: Bromley MyLife Training

____Visit http://bromley.mylifeportal.co.uk

1. A popular example of user experience- why, just why?

Page 14: Bromley MyLife Training

2. My user experience - in Maidstone!

____Visit http://bromley.mylifeportal.co.uk

Page 15: Bromley MyLife Training

3. A user experience - in the office!

____Visit http://bromley.mylifeportal.co.uk

Page 16: Bromley MyLife Training

4. A user experience - by the Council!

____Visit http://bromley.mylifeportal.co.uk

Step 1 Step 2 Step 3

Step 4

Page 17: Bromley MyLife Training

Time for some chanting… - “user experience, user experience, user experience”

The user* experience needs to be at the heart of everything we do.

-- No exceptions --

* and by the user we meanmembers of the public and professionals

____Visit http://bromley.mylifeportal.co.uk

Page 18: Bromley MyLife Training

____Visit http://bromley.mylifeportal.co.uk http://img.cdandlp.com/2012/09/imgL/115565672.jpg

Page 19: Bromley MyLife Training

The old skool way - how we used to do things

____Visit http://bromley.mylifeportal.co.uk

Page 20: Bromley MyLife Training

Our design-led approach - the 5 stages of development

Plus:

Retire the

old stuff

____Visit http://bromley.mylifeportal.co.uk

Page 21: Bromley MyLife Training

____Visit http://bromley.mylifeportal.co.uk http://www.thedigitalprojectmanager.com/wp-content/uploads/2015/01/terms-and-

conditions-apply.jpg

Page 22: Bromley MyLife Training

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

Page 23: Bromley MyLife Training

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

Page 24: Bromley MyLife Training

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

Page 25: Bromley MyLife Training

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!

Page 26: Bromley MyLife Training

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

Page 27: Bromley MyLife Training

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

Page 28: Bromley MyLife Training

____Visit http://bromley.mylifeportal.co.uk http://wallpaperstock.net/time-to-play-poker_twitter_cover_16911_1600x1200_1.html

Almost

Page 29: Bromley MyLife Training

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

Page 30: Bromley MyLife Training

____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

Page 31: Bromley MyLife Training

____Visit http://bromley.mylifeportal.co.uk

Page 32: Bromley MyLife Training

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

Page 33: Bromley MyLife Training

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

Page 34: Bromley MyLife Training

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

Page 35: Bromley MyLife Training

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

Page 36: Bromley MyLife Training

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

Page 37: Bromley MyLife Training

____Visit http://bromley.mylifeportal.co.uk http://www.romanpichler.com/wp-content/uploads/2013/12/

RomansPersonaTemplateApplied.jpg

Page 38: Bromley MyLife Training

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

Page 39: Bromley MyLife Training

____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

Page 40: Bromley MyLife Training

____Visit http://bromley.mylifeportal.co.uk http://www.wearemobedia.com/blog/wp-content/uploads/2015/05/consistency-in-web-

design.png

Page 41: Bromley MyLife Training

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

Page 42: Bromley MyLife Training

____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…

Page 43: Bromley MyLife Training

____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

Page 44: Bromley MyLife Training

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

Page 45: Bromley MyLife Training

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

23

4

5

Page 46: Bromley MyLife Training

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

Page 47: Bromley MyLife Training

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

Page 48: Bromley MyLife Training

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

Page 49: Bromley MyLife Training

What the user sees & experiences

Page 50: Bromley MyLife Training

How Ektron works

____Visit http://bromley.mylifeportal.co.uk

Step 1

Login screen

Step 2

The home screen

Page 51: Bromley MyLife Training

____Visit http://bromley.mylifeportal.co.uk

Home Where the pages are stored – and the useful links boxes too

Where documents & images are stored

Page 52: Bromley MyLife Training

Now, let’s play…

____Visit http://bromley.mylifeportal.co.uk www.kumiyamashita.com/dev/wp-content/uploads/13-BUILDING-BLOCKS.jpg?

1451952000038

Page 53: Bromley MyLife Training

Contact me –

Michael Watts, Product Owner [email protected] October 2015