  {"id":81648,"date":"2014-10-31T11:00:20","date_gmt":"2014-10-31T15:00:20","guid":{"rendered":"https:\/\/www.bates.edu\/news\/?p=81648"},"modified":"2017-02-23T13:14:13","modified_gmt":"2017-02-23T18:14:13","slug":"bates-website-remodel","status":"publish","type":"post","link":"https:\/\/www.bates.edu\/news\/2014\/10\/31\/bates-website-remodel\/","title":{"rendered":"Set to debut Nov. 3, the remodel of bates.edu was driven by mobile"},"content":{"rendered":"<p>A comprehensive remodel of the ÀÖ²¥´«Ã½ website set to debut on Nov. 3 reflects the continuing sea change in how people are using the college website in 2014.<\/p>\n<p>More and more, they&#8217;re going mobile, using smartphones or tablets.<\/p>\n<div id=\"attachment_81952\" style=\"width: 333px\" class=\"wp-caption alignright\"><a href=\"https:\/\/www.bates.edu\/news\/files\/2014\/10\/remodel-desktop.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-81952\" class=\"testimg wp-image-81952\" src=\"https:\/\/www.bates.edu\/news\/files\/2014\/10\/remodel-desktop-500x600.jpg\" alt=\"The remodeled ÀÖ²¥´«Ã½ home page as it will appear to a tablet user.\" width=\"323\" height=\"388\" srcset=\"https:\/\/www.bates.edu\/news\/files\/2014\/10\/remodel-desktop-500x600.jpg 500w, https:\/\/www.bates.edu\/news\/files\/2014\/10\/remodel-desktop-250x300.jpg 250w, https:\/\/www.bates.edu\/news\/files\/2014\/10\/remodel-desktop.jpg 1050w\" sizes=\"(max-width: 323px) 100vw, 323px\" \/><\/a><p id=\"caption-attachment-81952\" class=\"wp-caption-text\">The remodeled ÀÖ²¥´«Ã½ home page as it will appear to a desktop user. The remodel team&#8217;s use of &#8220;personas&#8221; inspired the creation of the four Audience Message Boxes geared to specific constituencies.<\/p><\/div>\n<p>Two years ago, one in six visitors to <em>bates.edu<\/em> viewed the site on a mobile device. Now it&#8217;s nearly one in three.<\/p>\n<p>While &#8220;mobile drove this remodel,\u201d says Jeremy Cluchey, director of creative design for the ÀÖ²¥´«Ã½ Communications Office, &#8220;the fact is, the trend toward greater mobile traffic is a worldwide reality.&#8221;<\/p>\n<blockquote><p>All about making a website that\u2019s easier to use.<\/p><\/blockquote>\n<p>Ensuring that every website feature and piece of content renders well on tiny screens as well as big desktop monitors is as much a design and architectural challenge as it is a technical one, Cluchey says.<\/p>\n<p>In that spirit, the new <em>bates.edu<\/em> incorporates a major homepage redesign and a new site-wide navigation menu, among other changes that, in the end, are all about making a website that\u2019s easier to use for all visitors.<\/p>\n<p>When it comes to website redesign, you need to know your users. And while 2.5 billion people worldwide are online, the ÀÖ²¥´«Ã½ team zeroed in on just 12 users during the remodel process.<\/p>\n<p>The 12 users, however, represent a conceptual twist: They&#8217;re &#8220;personas,&#8221; fictional people who represent the major public user groups of <em>bates.edu<\/em>.<\/p>\n<p>To create the personas, a 12-person Usability Group, comprising staff from BCO and Information and Library Services, interviewed 50 ÀÖ²¥´«Ã½ stakeholders from 16 college offices that communicate with various external audiences.<\/p>\n<p>Their expertise informed the group\u2019s understanding of the college\u2019s many audiences and fueled the creation of the personas, the use of which is standard for usability projects, Cluchey explains.<\/p>\n<div id=\"attachment_81954\" style=\"width: 317px\" class=\"wp-caption alignright\"><a href=\"https:\/\/www.bates.edu\/news\/files\/2014\/10\/remodel-tablet.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-81954\" class=\"wp-image-81954\" src=\"https:\/\/www.bates.edu\/news\/files\/2014\/10\/remodel-tablet-307x600.jpg\" alt=\"The remodeled ÀÖ²¥´«Ã½ home page as it will appear to a tablet user.\" width=\"307\" height=\"600\" srcset=\"https:\/\/www.bates.edu\/news\/files\/2014\/10\/remodel-tablet-307x600.jpg 307w, https:\/\/www.bates.edu\/news\/files\/2014\/10\/remodel-tablet-153x300.jpg 153w, https:\/\/www.bates.edu\/news\/files\/2014\/10\/remodel-tablet.jpg 645w\" sizes=\"(max-width: 307px) 100vw, 307px\" \/><\/a><p id=\"caption-attachment-81954\" class=\"wp-caption-text\">As an example of the site&#8217;s responsiveness, the new home page will look like this to a tablet user.<\/p><\/div>\n<p>&#8220;We\u2019ve given each ÀÖ²¥´«Ã½ persona a photo, a name, a hometown, and a set of specific attributes, including preferences, goals and top tasks for using the website,\u201d Cluchey says. \u201cWe\u2019ve created a list of do\u2019s and don\u2019ts for communicating with them. While they\u2019re not real users, they could be.\u201d<\/p>\n<p>Diverse across gender, age, geography and race, and featuring various levels of engagement with ÀÖ²¥´«Ã½, the personas include prospective students and parents, current parents, alumni and non-ÀÖ²¥´«Ã½ users such as a prospective staff member and a journalist.<\/p>\n<p>For example, a persona representing an accepted student from Portland, Ore., wants to understand her financial aid package. The persona of a young alumna wants to network with other alumni and wants her opinion about ÀÖ²¥´«Ã½ issues heard, while the ÀÖ²¥´«Ã½ alumnus who\u2019s also a ÀÖ²¥´«Ã½ parent wants coordinated parent-alumni communications.<\/p>\n<p>With this gallery of personas in hand, the BCO remodel team \u2014 Cluchey, Web Designer Barry Costa, Senior Digital Analyst Nicholas O\u2019Brien and Web Designer\/Developer Jake Paris \u2014 examined existing metrics and other user information, conducted campus listening sessions and implemented a website survey tool to &#8220;home in on the key concerns and priorities of our users,&#8221; Cluchey says.<\/p>\n<p>Armed with a feedbag full of feedback, the group identified several major goals and set out to create solutions to meet them. Goals such as:<\/p>\n<ul>\n<li>Make the site fully usable to visitors regardless of one\u2019s device, screen size or other technology, including Internet connection speed. The new site is fully responsive, featuring appropriate &#8220;break points&#8221; where the layout changes to meet the need of users&#8217; various screen sizes.\n<p><div id=\"attachment_81953\" style=\"width: 197px\" class=\"wp-caption alignright\"><a href=\"https:\/\/www.bates.edu\/news\/files\/2014\/10\/remodel-mobile.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-81953\" class=\"size-large wp-image-81953\" src=\"https:\/\/www.bates.edu\/news\/files\/2014\/10\/remodel-mobile-187x600.jpg\" alt=\"The remodeled ÀÖ²¥´«Ã½ home page as it will appear to a mobile user.\" width=\"187\" height=\"600\" \/><\/a><p id=\"caption-attachment-81953\" class=\"wp-caption-text\">The remodeled ÀÖ²¥´«Ã½ home page as it will appear to a mobile user.<\/p><\/div><\/li>\n<\/ul>\n<ul>\n<li>Update the site&#8217;s visual presentation in light of current industry trends and standards. That meant eliminating the old rotation of five full-screen images. \u201cThere&#8217;s reason to believe most users tune out those animations,&#8221; Cluchey says. &#8220;Metrics tell us that users don&#8217;t click on them as much as you think they might.&#8221; The new homepage features six major stories at all times, and the featured story changes randomly each time a user lands on the site. The new site also features an improved presentation of the ever-popular ÀÖ²¥´«Ã½ slideshows.<\/li>\n<\/ul>\n<ul>\n<li>Use data to streamline the site&#8217;s navigation and to create clear and intuitive pathways to content. Here, the use of personas inspired the creation of &#8220;Audience Message Boxes&#8221; on the homepage, four differently hued rectangles geared to specific audiences and messages.<\/li>\n<\/ul>\n<ul>\n<li>Improve the site search so that it better serves users. Last summer, the Google-driven search function was improved so that results pages look more familiar and display much better on mobile devices.<\/li>\n<\/ul>\n<p>Mobile behavior drove most of the other changes in the site&#8217;s navigation and architecture, says Cluchey. The old home page had a confusing tangle of menus that totaled 159 links. Of all those links, 20 received 80 percent of the click action.<\/p>\n<p>To be sure, the number and placement of hyperlinks, especially in a site\u2019s main navigation in prime real estate at the top of a page, is as much a political question as a web architecture one.<\/p>\n<p>To answer those political questions in an apolitical way, the BCO remodel team asked four questions:<\/p>\n<ul>\n<ul>\n<ol>\n<li>What is being clicked? The top clicks included, for example, the course catalog, so it and other popular links stayed.<\/li>\n<li>What are visitors viewing that&#8217;s <i>not <\/i>in the menu? The popular \u201cAbout Us\u201d and ÀÖ²¥´«Ã½ College Store are among those added to the new menu.<\/li>\n<li>What are the top tasks each persona needs to execute? Tasks like making a gift, knowing about campus events, using the alumni directory and finding admission information \u2014 \u00a0top needs for many of the personas \u2014 continue to be doable in the new menu.<\/li>\n<li>Finally, what links should appear because they reflect institutional importance and values? Answering this question meant adding a link to the president&#8217;s office, among others.<\/li>\n<\/ol>\n<\/ul>\n<\/ul>\n<p>After all was said and answered, the team was able to reduce the number of links in the new &#8220;drawer&#8221; navigation at the top of the page to just 30.<\/p>\n<div id=\"attachment_81963\" style=\"width: 310px\" class=\"wp-caption alignright\"><a href=\"https:\/\/www.bates.edu\/news\/files\/2014\/10\/IMG_20140725_homepage-sketch.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-81963\" class=\"wp-image-81963\" src=\"https:\/\/www.bates.edu\/news\/files\/2014\/10\/IMG_20140725_homepage-sketch-447x600.jpg\" alt=\"An early conceptual sketch of the remodeled home page suggests that when it comes to communications technology, paper still has its place.\" width=\"300\" height=\"402\" srcset=\"https:\/\/www.bates.edu\/news\/files\/2014\/10\/IMG_20140725_homepage-sketch-447x600.jpg 447w, https:\/\/www.bates.edu\/news\/files\/2014\/10\/IMG_20140725_homepage-sketch-223x300.jpg 223w, https:\/\/www.bates.edu\/news\/files\/2014\/10\/IMG_20140725_homepage-sketch.jpg 806w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-81963\" class=\"wp-caption-text\">An early conceptual sketch of the remodeled home page suggests that when it comes to communications technology, paper still has its place!<\/p><\/div>\n<p>While perhaps not within a single click from any given page, the rest of the site&#8217;s content is still easily findable.<\/p>\n<p>As the group tweaked the site, they tested new features in various ways, including <a href=\"http:\/\/en.wikipedia.org\/wiki\/Usability_testing#Hallway_testing\">hallway testing<\/a> with students in Commons and usability tests with alumni and other stakeholders.<\/p>\n<p>That provided &#8220;great actionable feedback,&#8221; Cluchey says. &#8220;For example, it led to us to increase the size of the new menu bar and add clear headings to the new homepage elements.&#8221;<\/p>\n<p>The remodeled website, still using WordPress for its content management, offers a freshened version of the award-winning major site redesign from 2011.<\/p>\n<p>That redesign was a complete razing of the prior site and delivered vastly improved site-wide consistency, a better ability to track metrics and higher participation by campus offices, Cluchey says.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The major changes, including a homepage redesign, are all about making a website that\u2019s easier to use and thus more valuable.<\/p>\n","protected":false},"author":148,"featured_media":82063,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_hide_ai_chatbot":false,"_ai_chatbot_style":"","associated_faculty":[],"_Page_Specific_Css":"","_bates_restrict_mod":false,"bates_author_byline_override":"","_estimated-read-time":"","_post-template":"","_header-color":"","_photo-credit":"","_header-effect":"","override_related_with_tag":"","_table_of_contents_display":false,"_table_of_contents_location":"","_table_of_contents_disableSticky":false,"_is_featured":false,"footnotes":"","_bates_seo_meta_description":"","_bates_seo_block_robots":false,"_bates_seo_sharing_image_id":0,"_bates_seo_sharing_image_twitter_id":0,"_bates_seo_share_title":"","_bates_seo_canonical_overwrite":"","_bates_seo_twitter_template":""},"categories":[130],"tags":[9700,4390],"class_list":["post-81648","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-collaboration","tag-bates-communications-office","tag-information-and-library-services"],"_links":{"self":[{"href":"https:\/\/www.bates.edu\/news\/wp-json\/wp\/v2\/posts\/81648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bates.edu\/news\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bates.edu\/news\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bates.edu\/news\/wp-json\/wp\/v2\/users\/148"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bates.edu\/news\/wp-json\/wp\/v2\/comments?post=81648"}],"version-history":[{"count":33,"href":"https:\/\/www.bates.edu\/news\/wp-json\/wp\/v2\/posts\/81648\/revisions"}],"predecessor-version":[{"id":82119,"href":"https:\/\/www.bates.edu\/news\/wp-json\/wp\/v2\/posts\/81648\/revisions\/82119"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bates.edu\/news\/wp-json\/wp\/v2\/media\/82063"}],"wp:attachment":[{"href":"https:\/\/www.bates.edu\/news\/wp-json\/wp\/v2\/media?parent=81648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bates.edu\/news\/wp-json\/wp\/v2\/categories?post=81648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bates.edu\/news\/wp-json\/wp\/v2\/tags?post=81648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}