Is your website a FIXER UPPER? How we redesigned our website around our customers needs

Transcription

1 Is your website a FIXER UPPER? How we redesigned our website around our customers needs

2 hello! I am Sarah-Jane Menefee Digital Media & Publications Specialist at ESC Region 12. You can find me Tweet about our session with #tspra17!

3 I am the webmaster More like the web firefighter if it s not on fire, I don t have time to deal with it.

4 6 months ago We live in Waco, home of Fixer Upper. And our website definitely qualified as Fixer Upper.

5 Our Fixer Upper Home Page Navs everywhere Text-heavy homepage Weird building image Ugly, catch-all quick links Not responsive Giant social icons Special initiative icons look like ads Courtesy of

6 Our Fixer Upper Program & Services Page Incredibly long Not searchable Confusing at best Important, marketable services are lost in a sea of bulleted lists Red links everywhere All services on separate pages. Full-page screenshots made with this handy Chrome extension:

7 Our Fixer Upper Individual Services Page Three+ clicks away from homepage Plain text one-column template Boring copy Every page had contact information Difficult to maintain when staff left.

8 Fixer Upper Stats 2,200 Webpages many with few (or no) views per month. 5 Sites created by departments in other web systems because the website gave them no real estate. 0 Processes in place for clearing out obsolete information. (Except my 17% of time for the web.)

9 You can redesign a home page. You can buy a new CMS. But unless you treat your content with strategic consideration, you can t fix your website. Content Strategy for the Web by Kristina Halvorson & Melissa Rach

10 Demolition Plan Define Our Content Strategy Get Buy-In (to remove obsolete pages & restructure) Create & Test

11 Defining Content Strategy Figuring out how to make your content work for you and, more importantly, your customers.

12 You already know what makes great content... It meets customer needs. It engages and informs. It s well-written and intuitively organized. It keeps people coming back for more. It supports key business objectives. Content should focus on critical information that communicates who you are and what you offer. It makes sense. Writing should be in plain English. Avoid jargon. Use the same language your customers use.

13 Content STRATEGY is more than good content A strategy is an idea that sets the direction for the future. Content strategy guides your plans for the creation, delivery and governance of content. It s like a lighthouse. It keeps you headed in the right direction, no matter how stormy the waters become. You can look at content and ask, Will this help us get to where we are going?

14 Components of Content Strategy Substance Story, topic, brand elements, voice & tone Structure Information Architecture, organization, categories Workflow Roles, processes, tools Governance Policies, standards, guidelines

15 Content Our Strategy Substance It must meet our customer needs or our business goals. Must be written in an easy-to-read format. (4th grade level) Structure The navigation is organized specifically around customer needs & business goals. (based on analytics) ESC Region 12 departments have sub-home pages where service information and more is housed.

16 Our Content Strategy Workflow Each department has a web editor (some have multiple) who controls the content on their pages. Marketing provides oversight and guidelines. Governance New content must fit into our content strategy. Obsolete content should be cleared out regularly. Web editors review all web pages- every 3 months. Check analytics- monthly. Yearly review for major restructures.

17 Resources for Learning About Content Strategy HigherEd Live: Content Strategist Toolkit Webinar Gather Content s Blog & Free Webinars: Books: The Content Strategy Toolkit & Content Strategy for the Web Center for Plain Language:

18 Getting Buy-In Good content strategy should force you to prioritize and say no. You need others on board to champion the plan.

19 New Website Goodwill Tour Talk to everyone who will sit still for a minute. Over a period of weeks, I met with every member of our executive council, every department director and every existing web editor. View the presentation > I took them through a presentation that spelled out the problems we currently had and my proposed solution. I included stats and an example of the navigation we were planning. I listened to their feedback and adjusted.

20 Wireframing the Structure Map it out before you actually create the website. Put together a visual of the number of pages you ll need for each proposed section. Get employee feedback. Work on naming conventions for page titles and navigation. Make adjustments and show you are listening. Have the hard conversations before you start.

21 New Website Goodwill Tour Tell a good story. By speaking individually with directors and other employees, I was able to put content strategy in the context of their world--why should they care, and what will they get out of it? Our users deserve better content. Good content will increase audience trust and engagement. Remember, people don t come to the website for visual appeal: They come for content. The numbers say it all. Include the number of pages with no traffic, the numbers of sections with no owners and the amount of obsolete information or inaccuracies you ve found.

22 Requesting internal customer feedback and showing them a visual map of where the website was headed not only garnered their buy-in, it improved the overall efficiency of our web processes. Win-Win! Jennifer Marshall-Higgins Customer Marketing & Support ESC Region 12

23 Demo Day! (more like months)

24 Creating & Testing The plan is approved. Now the real work begins!

25 Just Follow the Map. Once we had the wireframed website map, it was simple to follow that for creating the initial pages. Assemble a team. Breakdown the site into sections and assign to a few people. We had two full-time people and one intern.

26 During a website transition...

27 Content Consolidation With our CMS, we were able to use tabs and toggles to effectively reduce our total number of pages significantly.

28 Big, strong visuals All pages have some kind of supporting artwork.

29 A place for special initiatives Instead of the home page

30 Teacher Certifications Central!

31 Get feedback along the way During theno website goodwill we established who would be is There was one-size-fits alltour, solution. Each departmental page the website main contact forindividual each department. Throughout the tailored to the needs of their customers. creation process we solicited feedback. No surprises (internally) on launch day.

32 Redesign, by the Numbers 2, Old web pages Departmental sub-home pages New web pages Departmental & subject-specific editors

33 Tools We Used Canva Color Picker Jing Amazingly simple design software. We used Canva to easily design templates we could then use on every page. A color-picker tool that allows you to select colors from webpages. This is a Chrome extension that made matching colors to different designs a snap. Jing is a screencasting tool that takes a picture or video of the user's computer screen. It made uploading web-quality graphics quick and easy. Da Button Factory Google Drive istock Da Button Factory lets you create appealing buttons for websites for free. We found a template we liked, and then all we had to do was change the words to create a uniform look across the site. Your stuff, your way. Google Drive made collaboration between web editors and specialists easy. Additionally, we use Google Drive to host some documents so specialists can manage their own files. Millions of bold, unique stock images. We needed to update graphics as well as content and istock gave us the resources to find new stock photos to refresh our site.

34 User testing pre-launch Testing Method Stopped random teachers and customers in between sessions. Asked questions, watched them navigate the site, took notes. Could be done on a laptop, tablet or phone. (test mobile version too!) Questions First impression of the old site & new site What do you come to the site for? Where would you go to register? Where would you go to find out information on becoming a teacher? Find some information on dyslexia (or something about your specialty) and contact information. Was it easy to find? Do you have any additional thoughts on our site?

35 Testing with Employees We set aside a week before the launch for employees to navigate the site and send in any errors or questions. We added a Website Feedback button in global footer where anyone can submit feedback. It s the full web team.

36 Changes we made after testing. We repeated information in the mega menu on the landing pages for each area. We noticed sometimes users would click before the menu dropped down.

37 Changes we made after testing. We had the programmers change the tab colors to make them pop more. They were originally gray. We noticed some pages were loading slowly and worked to remove content on them that were causing load errors. PageSpeed Tools PageSpeed Insights analyzes the content of a web page, then generates suggestions to make that page faster.

38 The Big Reveal

39 How We Launched Get Excited We built up some anticipation on social media with gifs.

40 How We Launched Inform Customers We crafted an sent to all our contacts.

41 Customer-Focused Transition Welcome Video Quick voiceover video tour of the new website. Quick-Start Guide One-sheet PDF with information on the site s navigation. Download the Guide>

42 The best part of the move to our new website was the response from our customers. We heard nothing--no phone calls trying to find something, no complaints. It was intuitive enough to be seamless. Nick Brown Chief Information Officer ESC Region 12

43 Governance & Maintenance Policies and procedures for keeping content fresh.

44 Continuous Lifecycle Create/Source Content Govern Evaluate content effectiveness Maintain existing content

45 Avoiding previous pitfalls Maintaining Content Test Functionality Create a documented process for updating, archiving and deleting content over time. Consider accuracy, consistency, timeliness and relevance. Test any important functionality like filling out contact forms, signup forms, etc. to make sure everything is working. Check for Broken Links Analytics Run a link checker to crawl your site and look for broken links that frustrate users and reduce search engine rankings. Use Google Analytics to highlight the most important metrics for your site. Have it you weekly.

46 Planned Maintenance 3-Month Freshness Checks Content owners & departmental representatives get a reminder every three months to check their web page freshness. I run a site-wide spell check too. Analytics in Your Inbox I get weekly s from Google Analytics for our main site. Content owners can get monthly reports ed automatically too. Yearly Evaluation & Testing Yearly evaluation with each department director. Further user testing to tweak and change our site. Re-write copy, change out art and more.

47 Tools for Maintenance Page Analytics Chrome Extension The Page Analytics Chrome Extension allows you to see how customers interact with your web pages, including what they click and don t click. Use these insights to optimize your website layout, improve user experience, and increase conversions. Google Webmasters Tools Track your site's search performance with Google Search Console and browse around for more webmaster resources.

48 Any questions? You can find me or Download the presentation at: