ama workshop - optimising websites for mobile

Introductions

Shakespeare’s Globe

Once upon a time

Shakespeare’s Globe

Who I’ve worked with

My favourite mobile website is...

Now, you guys…

Process

• Discovery• Management• Content

Session 1

• Overview of mobile• Approach to mobile• Process• Strategic thinking

Session 2

• Strategic review• Setting objectives• Briefing an agency

Session 3

• Project management• How we did it• Thinking about design

Session 4

• Site map and user journeys• Content and preparing for your new site• Launching your website

Mobile usage

‘Is 2014 Finally The Year Of Mobile?’Forbes, 6 February 2014

Mobile usage

51% of the UK’s population own a smartphone

(approx 31.5m)

34% of the UK’s population own a tablet

(approx 20m)

Source: iab, 2014

Source: iab, 2014

Mobile usage

1 in 2 claim their smartphone is their most personal device

1 in 3 say their smartphone is a lifesaver

Mobile usage

40% use their smartphone calendar for all appointments and to dos

Source: iab, 2014

Mobile usage

Mobile usage

Downtime = screentime

On average

16 times a day

for 2mins 13secs

Source: iab, 2014

Mobile usage

86% use mobile to help ticket purchasing decisions

Source: iab, 2014

Mobile and the Arts

• 19 of the 100 arts organisations have a mobile-friendly website.– 10 have a website with responsive design– 9 have a dedicated mobile website

Source: chrisunitt.co.uk, January 2013

Mobile and Retail

• Top 50 UK retailers still struggle to be mobile and tablet ready– 74% have mobile optimised websites– Only 8% have tablet optimised websites

Transactions• 81% have transactional functionality• 62% have an app, just 48% of those are

transactionalSource: iab, June 2013

Source: Metro, 25 February 2014

Trends for 2014

Trends for 2014

• Mobile trends for 2014:– A ‘mobile-first’ approach– ‘Age of impatience’ demands speed– Quality over quantity in mobile app market– Mobile payments– Mobile as part of in-store

Beyond the web

• Mobile isn’t just your website, consider email as well

And don’t forget

ticketing,

mailing list,

blog...

Beyond the web

• Traffic referrals can help define content – what are you linking to from Twitter, Facebook, email?

Approach

• Stand alone mobile site• Responsive design (desktop/tablet/mobile)• App

Approach

Approach

• Responsive examples:– http://www.oldspitalfieldsmarket.com– http://www.southbankcentre.co.uk– http://www.sohotheatre.com– http://beta.tfl.gov.uk– http://www.visitlondon.com

http://www.oldspitalfieldsmarket.com/

http://www.southbankcentre.co.uk/

http://www.sohotheatre.com/

http://beta.tfl.gov.uk/

http://www.visitlondon.com/

Approach

Approach

shakespearesglobe.com/m

• Main website optimised• A mobile responsive site• Built in the same CMS as the

desktop website• Separate sitemap• Part database driven

Session 2

Strategic thinking

Strategic thinking

Rule #1 – know your current website

• Use a SWOT analysis• Ask colleagues what they think of

your current website• Ask your audience what they think

of your current website

Strategic thinking

What approach should you take?

Desktop

Tablet

Mobile

Strategic thinking

• What is your organisation’s mission?• What are your organisation’s objectives?

Shakespeare’s Globe…Promote, maintain, improve and advance education of the dramatic art in all its

forms but principally in relation to the performance of the works of Shakespeare.

Strategic thinking

Strategic thinking

Who is involved internally in the project?

Strategic thinking

Who is involved internally in the project?CEO

Exec team

Marketing / Communications

Box OfficeDevelopment /

FriendsShop

FinanceLearning / Education

Strategic review

Strategic review

What your desktop site can tell you

• Who uses it?• How do users navigate it?• Where do they access it from?• Popular content

Strategic review

Purpose, doesn’t have to just be mobile

• What is your website’s primary purpose?• What is its secondary purpose?• And its tertiary purpose?

Strategic review

How does it need to deliver that purpose?

• What is essential to the website?• What is desirable to the website?

Strategic review

Benchmarking

• Informal meet up groups with similar organisations• Action research projects, e.g. Culture 24 Let’s Get Real• Websites and blogs, e.g. Econsultancy, The Collections Trust,

chrisunitt.co.uk, Department for Culture, Media and Sport• Research papers by organisations, e.g. NHM’s Mobile report -

http://bit.ly/1hEvQcZ



Setting objectives

Setting objectives

Beyond its purpose, what do you want from the new website?

• Easy to navigate• Combine several sites into one website• Flexible structure

Setting objectives

Key Performance Indicators (KPIs)

What is important to your organisation and how does the website reflect this?• Event/Product sales• Workshop sign-ups• User generated content

Setting objectives

Key Performance Indicators (KPIs)

How do you track this with your website?• Online sales vs in person / by phone• Brochure downloads vs printed brochures• Number of user accounts created/sign-ups• Referrals from 3rd party listings/ad websites

Talk these through with your agency, they will help to track and define them more.

Session 3

What went wrong before?

Briefing an agency

Briefing an agency

Current

Pros• Know and understand your

organisation• Integrate CMS with desktop

website

vs. New

• Could be more competitive on budget

• First step towards changing agencies

Briefing an agency

Writing a brief

Summarise:• Strategic thinking• Strategic review• Objectives• What you like (design and trends)

Briefing an agency

Writing a brief

Sections to include:• Introduction to your

organisation• Review of the current website• Objectives for the new website• What you like

• Content for the new website• Technical requirements• Budget• On-going development• Conclusion

Briefing an agency

Writing a brief

Budget• Have you been allocated a budget already?• Speak to existing suppliers, e.g. ticketing, mailing list,

for quotes on integrating with a new website• Speak to potential agencies for quote ranges• Set a maintenance budget for once the website is live

Briefing an agency

Tender process• Do you have an agency roster?• Does your tender need to be public?• Discover agencies through other websites that you like• Be realistic on timings

Then…• Read tenders• Shortlist agencies• Meet shortlisted agencies for pitching• Select an agency

Briefing an agency

Immerse your agency.

Briefing an agency

Tell them what you like• What other websites do you like?• What is it that you like about them? Design? Functionality?• Don’t just say ‘Google’, know why you like Google

Project management

Project management

Who is involved in the project?CEO

Exec team



FriendsShop


Account Manager

Project Manager

Designer

Developer (Tech)

User experience

Managing / Creative Director

Project management

• Create a project folder on your computer, team or shared drive with all documents, designs and content in it.

• Label by yymmdd and have a ‘signed off’ folder.

Project management

What documents to expect from an agency:• Terms and conditions• Project scope• Technical specifications• Project schedule• Invoices• Site map• Wireframes• Designs• Sign off forms• Service level agreement (SLA)

Project management

What documents to expect from an agency:• Project scope

– Aims and objectives– Design and tech spec references– Notes on features/challenges– Sitemap– Budget– Timelines (briefly)– Additional phases/what’s not included

Project management

What documents to expect from an agency:• Project scope

Project management

What documents to expect from an agency:• Project schedule

– Key dates for when your time is needed and for sign-off

– Your organisation’s key dates (season launches, events etc)

• Approach– Waterfall: traditional project process. Clear

start and end point with agreed objectives and scope.

– Scrum: agile methodology. Most commonly used for software development, projects progress via several ‘sprints’, enabling you to develop – release – feedback – develop – release – feedback on loop.

Project management

What documents to expect from an agency:• Wireframes

Project management

Consider using

online project

management

software to keep

everything in one

place.

How we did it

How we did it

• Four staged releases– Release 1: January 2013

• 3rd party CMS• 1st and 2nd level content, including all What’s On

events• Mobile optimised ticketing pages

• Pros: Up and running on time for Priority Booking• Cons: Limited ability to create new content, events

were manually entered, two CMSs to edit

How we did it

• Four staged releases– Release 2: April 2013

• Desktop CMS upgrade to support mobile pages• Discovery Space content• What’s On date search

• Pros: Single CMS structure for desktop and mobile, events automatically pulled from Calendar

• Cons: Managing a staging server for the CMS upgrade

How we did it

• Four staged releases– Release 3: February 2014

• Deeper content optimised• Ticketing integration created for productions and

events to view performances availability before entering the ticketing site

• Pros: Increased content• Cons: Not all deeper content templates were

designed for the mobile site

How we did it

• Four staged releases– Release 4: TBC…

• Online shop

• Pros: Online transactions• Cons: Dropped to the bottom of the to-do list

How we did it

• Globe to Globe Hamlet– Fully responsive website

• Desktop• Tablet• Mobile

– All content ready at go-live

– Cons: Possible display errors with new ‘phablet’ screen sizes

Thinking about design


Look & feel • Typically the homepage and a generic text page

• Logo position• Fonts• Site navigation• Colour palette• Key call to action

points• Ease of selecting

links• What can be

edited?


• Design across devices


• Aligned with brand guidelines


Templates

• Templates for event pages, archive resources, mailing list sign ups, product pages

• What content is displayed – desktop vs. mobile

• Image crops


Mobile friendly design• Clear breadcrumb and

page titles• Expandable content• Large buttons with

clear click space around

• ‘Top of page’ links back to main menu

• Cross sell links• Social media links• Contact number on all

pages

Making it current

Website trends:

thedrum.commashable.comsiteinspire.co

mthenextweb.co

m

Session 4

Site map and user journeys


Start with what you know

• Remember your organisation’s mission• Use your current analytics to find popular page titles

and user journeys• What do you link to from email and social media


Mobile only content

• What mobile only content do you have?• How do sections/pages on the mobile

sitemap differ from the desktop website sitemap?– What implications does this have?

• Increased editing time in the CMS?

– Are you using the mobile site as a test for changing the desktop sitemap?

– Are you helping the user to understand where content sits on the mobile site?

Site map

Planning:• Post it notes• Text document or

spreadsheet• Site map software,

e.g. FreeMind

Site map

Terminology can change how your audience is involved• Job vacancies, Work with us, Opportunities• Visit us, Planning a visit, Visitor information• Education, Take part, Get involved• Eating & Drinking, Catering

‘Standard’ options, use what your audience already know• What’s On

Site map

User journeys• Think about tasks on your website and how they are completed

• Think about how pages are linked

Homepage

What’s On

Event

Buy a ticket

What’s On

Event

About Press

What’s On

Event

Task…

Working in groups to make a sitemap

• Work out what content you’re linking to• What content is key for your mobile site• Does it differ to your desktop site?• Which pages need to link to each other?

Content and preparing for your site

Preparing for your website

How to write content for your mobile website• Keep it simple• Don’t necessarily copy all the content from the desktop

version of a page• Make it easy to read

– Use clear headings– Short, simple paragraphs– Space to select a link via text or button– Call to actions – contact information, link to next page, booking button

• Manage your mobile SEO (particularly if a separate site)– Ensure you use correct redirects, and not just link to the homepage


Content:• Have a checklist of what each page needs• Assign pages to colleagues – and chase when it’s needed• Edit all content to use one tone of voice• Collate documents and save in a sensible structure• Save full size images and cropped versions (if needed)


Training• Who needs training on managing the new website?



FriendsShop



Testing:• Complete a ticket or product

transaction• Sign-up to your mailing list• Report issues and snags to

your developers


Get ready• Arrange any changes

needed for your domain names

• Be aware of any changes needed for other systems, e.g. email, ticketing, mailing list, e-commerce

Ticketing

Mailing list Website Email

E-commerce

Launching your website


3, 2, 1…

• Don’t launch on a Friday• Allow 72 hours for the

website to become accessible by everyone


Tell your audience:• Internal email• E-newsletter• Facebook• Twitter

And expect feedback

…and adjust.


What next?• Go back to your original objectives• Fill in missing areas and content• Keep up the good work - refresh your content, update

functionality

Q&A

Ask away…

TA!

[email protected]: @jacquesharris

SlideShare link: http://bit.ly/amaMobile