AMA workshop - Optimising Websites for Mobile
Download as PPTX, PDF0 likes306 views
This document provides information about developing a mobile-friendly website for Shakespeare's Globe theater. It discusses conducting strategic reviews and setting objectives, briefing an agency on the project, managing the project, preparing content, designing the site structure and user experience, and launching the new website. The document offers tips on each stage of the process and examples from Shakespeare's Globe's own mobile site development.
AMA workshop - Optimising Websites for Mobile
- 2. Shakespeare’s Globe Once upon a time
- 7. Who I’ve worked with
- 8. My favourite mobile website is...
- 10. Process • Discovery • Management • Content
- 11. Session 1 • Overview of mobile • Approach to mobile • Process • Strategic thinking
- 12. Session 2 • Strategic review • Setting objectives • Briefing an agency
- 13. Session 3 • Project management • How we did it • Thinking about design
- 14. Session 4 • Site map and user journeys • Content and preparing for your new site • Launching your website
- 15. Mobile usage ‘Is 2014 Finally The Year Of Mobile?’ Forbes, 6 February 2014
- 16. 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
- 17. 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
- 18. Mobile usage 40% use their smartphone calendar for all appointments and to dos Source: iab, 2014
- 19. Mobile usage
- 20. Mobile usage Downtime = screentime On average 16 times a day for 2mins 13secs Source: iab, 2014
- 21. Mobile usage 86% use mobile to help ticket purchasing decisions Source: iab, 2014
- 22. 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
- 23. 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
- 24. Trends for 2014 Source: Metro, 25 February 2014
- 25. 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
- 26. Beyond the web • Mobile isn’t just your website, consider email as well And don’t forget ticketing, mailing list, blog...
- 27. Beyond the web • Traffic referrals can help define content – what are you linking to from Twitter, Facebook, email?
- 28. Approach • Stand alone mobile site • Responsive design (desktop/tablet/mobile) • App
- 29. Approach
- 30. Approach
- 31. 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
- 32. Approach
- 33. 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
- 34. Session 2
- 36. 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
- 37. Strategic thinking What approach should you take? Desktop Tablet Mobile
- 38. 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.
- 40. Strategic thinking Who is involved internally in the project?
- 41. Strategic thinking Who is involved internally in the project? CEO Exec team Marketing / Communications Box Office Development / Friends Shop Finance Learning / Education
- 42. Strategic review
- 43. 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
- 44. 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?
- 45. Strategic review How does it need to deliver that purpose? • What is essential to the website? • What is desirable to the website?
- 46. 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
- 48. Setting objectives Beyond its purpose, what do you want from the new website? • Easy to navigate • Combine several sites into one website • Flexible structure
- 49. 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
- 50. 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.
- 51. Session 3
- 52. What went wrong before?
- 54. 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
- 55. Briefing an agency Writing a brief Summarise: • Strategic thinking • Strategic review • Objectives • What you like (design and trends)
- 56. 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
- 57. 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
- 58. 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
- 59. Briefing an agency Immerse your agency.
- 60. 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
- 62. 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
- 63. 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.
- 64. 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)
- 65. 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
- 66. Project management What documents to expect from an agency: • Project scope
- 67. 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.
- 68. Project management What documents to expect from an agency: • Wireframes
- 69. Project management Consider using online project management software to keep everything in one place.
- 70. How we did it
- 71. 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
- 72. 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
- 73. 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
- 74. 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
- 75. 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
- 77. 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?
- 78. Thinking about design • Design across devices
- 79. Thinking about design • Aligned with brand guidelines
- 80. 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
- 81. 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
- 84. Session 4
- 85. Site map and user journeys
- 86. 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
- 87. 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?
- 88. Site map Planning: • Post it notes • Text document or spreadsheet • Site map software, e.g. FreeMind
- 89. 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
- 90. 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
- 91. 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?
- 92. Content and preparing for your site
- 93. 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
- 94. 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)
- 95. Preparing for your website Training • Who needs training on managing the new website? Marketing / Communications Box Office Development / Friends Shop Finance Learning / Education
- 96. Preparing for your website Testing: • Complete a ticket or product transaction • Sign-up to your mailing list • Report issues and snags to your developers
- 97. 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
- 99. Launching your website 3, 2, 1… • Don’t launch on a Friday • Allow 72 hours for the website to become accessible by everyone
- 100. Launching your website Tell your audience: • Internal email • E-newsletter • Facebook • Twitter And expect feedback …and adjust.
- 101. 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
- 102. Q&A Ask away…
- 103. TA! jack.h@shakespearesglobe.com Twitter: @jacquesharris SlideShare link: http://bit.ly/amaMobile