Introductions
Shakespeare’s Globe
Once upon a time
Shakespeare’s Globe
Shakespeare’s Globe
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 20...
Mobile usage
1 in 2 claim their smartphone is their most
personal device
1 in 3 say their smartphone is a lifesaver
Source...
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...
Mobile and Retail
• Top 50 UK retailers still struggle to be
mobile and tablet ready
– 74% have mobile optimised websites
...
Trends for 2014
Source: Metro, 25 February 2014
Trends for 2014
• Mobile trends for 2014:
– A ‘mobile-first’ approach
– ‘Age of impatience’ demands speed
– Quality over q...
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
Approach
• Responsive examples:
– http://www.oldspitalfieldsmarket.com
– http://www.southbankcentre.co.uk
– http://www.soh...
Approach
Approach
shakespearesglobe.com/m
• Main website optimised
• A mobile responsive site
• Built in the same CMS as the
deskto...
Session 2
Strategic thinking
Strategic thinking
Rule #1 – know your current website
• Use a SWOT analysis
• Ask colleagues what they think of
your curr...
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…
...
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 Office
Developm...
Strategic review
Strategic review
What your desktop site can tell you
• Who uses it?
• How do users navigate it?
• Where do they access it ...
Strategic review
Purpose, doesn’t have to just be mobile
• What is your website’s primary purpose?
• What is its secondary...
Strategic review
How does it need to deliver that purpose?
• What is essential to the website?
• What is desirable to the ...
Strategic review
Benchmarking
• Informal meet up groups with similar organisations
• Action research projects, e.g. Cultur...
Setting objectives
Setting objectives
Beyond its purpose, what do you want from the new website?
• Easy to navigate
• Combine several sites i...
Setting objectives
Key Performance Indicators (KPIs)
What is important to your organisation and how does the website
refle...
Setting objectives
Key Performance Indicators (KPIs)
How do you track this with your website?
• Online sales vs in person ...
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
• Cou...
Briefing an agency
Writing a brief
Summarise:
• Strategic thinking
• Strategic review
• Objectives
• What you like (design...
Briefing an agency
Writing a brief
Sections to include:
• Introduction to your
organisation
• Review of the current websit...
Briefing an agency
Writing a brief
Budget
• Have you been allocated a budget already?
• Speak to existing suppliers, e.g. ...
Briefing an agency
Tender process
• Do you have an agency roster?
• Does your tender need to be public?
• Discover agencie...
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? Desig...
Project management
Project management
Who is involved in the project? CEO
Exec
team
Marketing /
Communications
Box Office
Development /
Frien...
Project management
• Create a project
folder on your
computer, team or
shared drive with all
documents, designs
and conten...
Project management
What documents to expect from an agency:
• Terms and conditions
• Project scope
• Technical specificati...
Project management
What documents to expect from an agency:
• Project scope
– Aims and objectives
– Design and tech spec r...
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 an...
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 ...
How we did it
• Four staged releases
– Release 2: April 2013
• Desktop CMS upgrade to support mobile pages
• Discovery Spa...
How we did it
• Four staged releases
– Release 3: February 2014
• Deeper content optimised
• Ticketing integration created...
How we did it
• Four staged releases
– Release 4: TBC…
• Online shop
• Pros: Online transactions
• Cons: Dropped to the bo...
How we did it
• Globe to Globe Hamlet
– Fully responsive website
• Desktop
• Tablet
• Mobile
– All content ready at go-liv...
Thinking about design
Thinking about design
Look & feel • Typically the
homepage and a
generic text page
• Logo position
• Fonts
• Site navigati...
Thinking about design
• Design across devices
Thinking about design
• Aligned with brand guidelines
Thinking about design
Templates
• Templates for event
pages, archive
resources, mailing
list sign ups, product
pages
• Wha...
Thinking about design
Mobile friendly design
• Clear breadcrumb and
page titles
• Expandable content
• Large buttons with
...
Making it current
Website trends:
thedrum.com
mashable.com
siteinspire.com
thenextweb.com
Session 4
Site map and user journeys
Site map and user journeys
Start with what you know
• Remember your organisation’s mission
• Use your current analytics to...
Site map and user journeys
Mobile only content
• What mobile only content do you have?
• How do sections/pages on the mobi...
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, Pla...
Site map
User journeys
• Think about tasks on your website and how they are completed
• Think about how pages are linked
H...
Task…
Working in groups to make a sitemap
• Work out what content you’re linking to
• What content is key for your mobile ...
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 ...
Preparing for your website
Content:
• Have a checklist of what each page needs
• Assign pages to colleagues – and chase wh...
Preparing for your website
Training
• Who needs training on managing the new website?
Marketing /
Communications
Box Offic...
Preparing for your website
Testing:
• Complete a ticket or product
transaction
• Sign-up to your mailing list
• Report iss...
Preparing for your website
Get ready
• Arrange any changes
needed for your domain
names
• Be aware of any changes
needed f...
Launching your website
Launching your website
3, 2, 1…
• Don’t launch on a Friday
• Allow 72 hours for the
website to become
accessible by everyo...
Launching your website
Tell your audience:
• Internal email
• E-newsletter
• Facebook
• Twitter
And expect feedback
…and a...
Launching your website
What next?
• Go back to your original objectives
• Fill in missing areas and content
• Keep up the ...
Q&A
Ask away…
TA!
jack.h@shakespearesglobe.com
Twitter: @jacquesharris
SlideShare link: http://bit.ly/amaMobile
AMA workshop - Optimising Websites for Mobile
Upcoming SlideShare
Loading in …5
×

AMA workshop - Optimising Websites for Mobile

188 views
151 views

Published on

Published in: Marketing
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
188
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

AMA workshop - Optimising Websites for Mobile

  1. 1. Introductions
  2. 2. Shakespeare’s Globe Once upon a time
  3. 3. Shakespeare’s Globe
  4. 4. Shakespeare’s Globe
  5. 5. Shakespeare’s Globe
  6. 6. Who I’ve worked with
  7. 7. My favourite mobile website is...
  8. 8. Now, you guys…
  9. 9. Process • Discovery • Management • Content
  10. 10. Session 1 • Overview of mobile • Approach to mobile • Process • Strategic thinking
  11. 11. Session 2 • Strategic review • Setting objectives • Briefing an agency
  12. 12. Session 3 • Project management • How we did it • Thinking about design
  13. 13. Session 4 • Site map and user journeys • Content and preparing for your new site • Launching your website
  14. 14. Mobile usage ‘Is 2014 Finally The Year Of Mobile?’ Forbes, 6 February 2014
  15. 15. 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
  16. 16. Mobile usage 1 in 2 claim their smartphone is their most personal device 1 in 3 say their smartphone is a lifesaver Source: iab, 2014
  17. 17. Mobile usage 40% use their smartphone calendar for all appointments and to dos Source: iab, 2014
  18. 18. Mobile usage
  19. 19. Mobile usage Downtime = screentime On average 16 times a day for 2mins 13secs Source: iab, 2014
  20. 20. Mobile usage 86% use mobile to help ticket purchasing decisions Source: iab, 2014
  21. 21. 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
  22. 22. 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 transactional Source: iab, June 2013
  23. 23. Trends for 2014 Source: Metro, 25 February 2014
  24. 24. 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
  25. 25. Beyond the web • Mobile isn’t just your website, consider email as well And don’t forget ticketing, mailing list, blog...
  26. 26. Beyond the web • Traffic referrals can help define content – what are you linking to from Twitter, Facebook, email?
  27. 27. Approach • Stand alone mobile site • Responsive design (desktop/tablet/mobile) • App
  28. 28. Approach
  29. 29. Approach
  30. 30. 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
  31. 31. Approach
  32. 32. 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
  33. 33. Session 2
  34. 34. Strategic thinking
  35. 35. 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
  36. 36. Strategic thinking What approach should you take? Desktop Tablet Mobile
  37. 37. 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.
  38. 38. Strategic thinking
  39. 39. Strategic thinking Who is involved internally in the project?
  40. 40. Strategic thinking Who is involved internally in the project? CEO Exec team Marketing / Communications Box Office Development / Friends Shop Finance Learning / Education
  41. 41. Strategic review
  42. 42. 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
  43. 43. 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?
  44. 44. Strategic review How does it need to deliver that purpose? • What is essential to the website? • What is desirable to the website?
  45. 45. 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
  46. 46. Setting objectives
  47. 47. Setting objectives Beyond its purpose, what do you want from the new website? • Easy to navigate • Combine several sites into one website • Flexible structure
  48. 48. 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
  49. 49. 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.
  50. 50. Session 3
  51. 51. What went wrong before?
  52. 52. Briefing an agency
  53. 53. 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
  54. 54. Briefing an agency Writing a brief Summarise: • Strategic thinking • Strategic review • Objectives • What you like (design and trends)
  55. 55. 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
  56. 56. 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
  57. 57. 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
  58. 58. Briefing an agency Immerse your agency.
  59. 59. 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
  60. 60. Project management
  61. 61. Project management Who is involved in the project? CEO Exec team Marketing / Communications Box Office Development / Friends Shop Finance Learning / Education Account Manager Project Manager Designer Developer (Tech) User experience Managing / Creative Director
  62. 62. 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.
  63. 63. 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)
  64. 64. 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
  65. 65. Project management What documents to expect from an agency: • Project scope
  66. 66. 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.
  67. 67. Project management What documents to expect from an agency: • Wireframes
  68. 68. Project management Consider using online project management software to keep everything in one place.
  69. 69. How we did it
  70. 70. 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
  71. 71. 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
  72. 72. 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
  73. 73. 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
  74. 74. 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
  75. 75. Thinking about design
  76. 76. 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?
  77. 77. Thinking about design • Design across devices
  78. 78. Thinking about design • Aligned with brand guidelines
  79. 79. Thinking about design Templates • Templates for event pages, archive resources, mailing list sign ups, product pages • What content is displayed – desktop vs. mobile • Image crops
  80. 80. Thinking about design 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
  81. 81. Making it current
  82. 82. Website trends: thedrum.com mashable.com siteinspire.com thenextweb.com
  83. 83. Session 4
  84. 84. Site map and user journeys
  85. 85. 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
  86. 86. Site map and user journeys 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?
  87. 87. Site map Planning: • Post it notes • Text document or spreadsheet • Site map software, e.g. FreeMind
  88. 88. 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
  89. 89. 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
  90. 90. 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?
  91. 91. Content and preparing for your site
  92. 92. 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
  93. 93. Preparing for your website 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)
  94. 94. Preparing for your website Training • Who needs training on managing the new website? Marketing / Communications Box Office Development / Friends Shop Finance Learning / Education
  95. 95. Preparing for your website Testing: • Complete a ticket or product transaction • Sign-up to your mailing list • Report issues and snags to your developers
  96. 96. Preparing for your website 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
  97. 97. Launching your website
  98. 98. Launching your website 3, 2, 1… • Don’t launch on a Friday • Allow 72 hours for the website to become accessible by everyone
  99. 99. Launching your website Tell your audience: • Internal email • E-newsletter • Facebook • Twitter And expect feedback …and adjust.
  100. 100. Launching your website What next? • Go back to your original objectives • Fill in missing areas and content • Keep up the good work - refresh your content, update functionality
  101. 101. Q&A Ask away…
  102. 102. TA! jack.h@shakespearesglobe.com Twitter: @jacquesharris SlideShare link: http://bit.ly/amaMobile

×