Bromley MyLife Training for Self-Management Courses

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

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
____

____
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

____

-----
…and to do that,
we need to
start with why
-----
So, to go forward,
we need to go
back...
____
Taken from…

So, why do we
have our Bromley
MyLife website?
____
Shout out what you think

To help people make
informed choices about their lives
____

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

____
The life of our website
- in a single timeline

1. Our driving principle
2. Our standards
3. Our style
The important stuff
- before we get to the fun bits!
____

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
____

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

2. My user
experience
- in Maidstone!
____

3. A user
experience
- in the office!
____

4. A user experience
- by the Council!
____
Step 1 Step 2 Step 3
Step 4

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

The old skool way
- how we used to do things
____

Our design-led approach
- the 5 stages of development
Plus:
Retire the
old stuff
____

____
Visit http://bromley.mylifeportal.co.uk http://www.thedigitalprojectmanager.com/wp-content/uploads/2015/01/terms-and-conditions-
apply.jpg

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
____

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
____

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

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

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’
----
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!
____

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
----
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
____
* 1 in 100 visits in May 2011 compared to
1 in 2 visits in May 2015

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

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 http://pre09.deviantart.net/1b83/th/pre/i/2011/275/9/9/but___where_to_start__by_thesilentnight-d4bo6dc.jpg

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

-- Now we know why they are being developed -- move on to the next stage
So, to go forward,
____

• Does that fit with the purpose of the website?
- Hands up who thinks it does – why?
So, to go forward,
____

-- Now we know it does fit -- move on to the next stage
So, to go forward,
____

• 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,
____

____
Visit http://bromley.mylifeportal.co.uk http://www.romanpichler.com/wp-content/uploads/2013/12/RomansPersonaTemplateApplied.jpg

• 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,
____

____
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

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

To help ensure consistency across
the site, we use this template:
Let’s build on
our authentic
voice
- “trust is built with
consistency”*
____
* so said Lincoln Chafee

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

____
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

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
____

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
____
1
2
3
4
5

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
____

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
____
1
2
3
4

2. Ektron 3. PortalStudio1. MyLife
The MyLife product - & so our website – is made up of three parts
How MyLife works
____

What the user sees & experiences

How Ektron works
____
Step 1
Login screen
Step 2
The home screen

____
Home Where the pages are stored –
and the useful links boxes too
Where documents &
images are stored

Now, let’s play…
____
Visit http://bromley.mylifeportal.co.uk www.kumiyamashita.com/dev/wp-content/uploads/13-BUILDING-BLOCKS.jpg?1451952000038

Contact me –
Michael Watts, Product Owner
michael.watts@bromley.gov.uk
October 2015

Bromley MyLife Training for Self-Management Courses

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (17)

Similar a Bromley MyLife Training for Self-Management Courses

Similar a Bromley MyLife Training for Self-Management Courses (20)

Más de Burning Leaf Creatives

Más de Burning Leaf Creatives (13)

Último

Último (20)

Bromley MyLife Training for Self-Management Courses