{"id":2608,"date":"2016-10-25T13:18:57","date_gmt":"2016-10-25T12:18:57","guid":{"rendered":"https:\/\/blogs.kent.ac.uk\/webdev\/?p=2608"},"modified":"2017-08-09T11:59:43","modified_gmt":"2017-08-09T10:59:43","slug":"a-summer-with-the-new-kent-web-theme","status":"publish","type":"post","link":"https:\/\/blogs.kent.ac.uk\/webdev\/2016\/10\/25\/a-summer-with-the-new-kent-web-theme\/","title":{"rendered":"A summer with the new Kent web theme"},"content":{"rendered":"<p class=\"lead\">Here\u2019s your summary\u2026<\/p>\n<p>&#8211; New programme of work for a University content management solution.<br \/>\n&#8211; Short-term plan to rebuild and retheme a small number of business- and user-critical pages in existing publishing solution.<br \/>\n&#8211; Looking at content strategy.<br \/>\n&#8211; Evolution, testing and development of our theme and patterns.<br \/>\n&#8211; Image guidelines.<\/p>\n<p>A lot\u2019s been happening over the summer months!<\/p>\n<h2>Kentweb<\/h2>\n<p>We now have a University programme to replace our existing web publishing solution.<\/p>\n<p>However we definitely do not want to just buy and install a new CMS. We need a thorough reappraisal of our content strategy: what content do we need to publish, and why? Who are the key audiences? What is the governance process? Are owners and stakeholders clearly identified?<\/p>\n<p>This will be a significant change in how we deal with web content, and this takes time to get right. In the meantime we wanted to be able to test out some of the key ideas of our new theme, so we came up with a plan to refresh some of the key pages in our existing publishing platform.<\/p>\n<p>This gives us a good short-term value to the business in terms of a fresher, responsive design for a large bulk of our visits. It also allows us to test out many design patterns and content strategy approaches before we update the entire website.<\/p>\n<h2>Short-term goals<\/h2>\n<p>Our key goals this summer and autumn have been to evolve our theme to allow some business-critical, user-critical pages to be built by the end of February 2017.<\/p>\n<p>We held a workshop with key stakeholders from areas such as Recruitment and Marketing, Research, Corporate Communications, Development Office, and International Development to identify key business messages (split into our key objectives of Research, Education, and Engagement). Tied to this we had user analytics and <a href=\"https:\/\/blogs.kent.ac.uk\/webdev\/2015\/04\/24\/needfinding-for-a-new-university-website-how-we-did-the-discovery-phase\/\">research we\u2019d already carried out<\/a> over the past couple of years.<\/p>\n<p>We identified 12 top-level pages, plus the homepage, to focus our attention on. We also decided to revamp the whole of our courses section, because this was a key area both to the business and our users.<\/p>\n<p><strong>End of February 2017, priorities:<\/strong><\/p>\n<ul>\n<li>Top level landing pages<\/li>\n<li>Homepage<\/li>\n<li>Course content<\/li>\n<\/ul>\n<p id=\"content\">\n<h2>Content-focus<\/h2>\n<p>We\u2019re now working with a content specialist from the Publishing Office, to help break down each of those 12 pages into key messages, and narrative flow. What does the University want to say? How do we frame that message to the key audience group?<\/p>\n<p>As outlined in a <a href=\"https:\/\/blogs.kent.ac.uk\/webdev\/2016\/06\/10\/building-well-designed-content\/\">blog post about content design<\/a>, content can and should be designed using:<\/p>\n<ul>\n<li>an understanding of business needs and user needs<\/li>\n<li>data and analytics<\/li>\n<li>personas and scenarios<\/li>\n<li>heuristics<\/li>\n<li>user feedback and testing<\/li>\n<\/ul>\n<p>Once we have a clearer idea of what exactly each page is trying to convey, we can start to build those pages using design patterns we\u2019ve already built.<\/p>\n<p>Of course, this is an experimental, iterative situation. We need to test out our design ideas, and we need to test out the validity of the 12 top level pages.<\/p>\n<p>It may be that some of the pages will evolve in message scope as new user and business needs are discovered.<\/p>\n<p>And we may find that some our design ideas don\u2019t really work so well in practice.<\/p>\n<h2>3 Page types<\/h2>\n<p>We\u2019ve been refining our ideas of using three basic types of page for our website,\u00a0where each\u00a0contains differing levels of imagery, navigation, and text content:<\/p>\n<p><strong>Feature pages <\/strong>&#8211; high image content, some navigation, low text content.<\/p>\n<p><strong>Navigation pages<\/strong>\u00a0&#8211; medium image content, plenty of navigation, some text content.<\/p>\n<p><strong>Content pages<\/strong> &#8211; low or no image content, some navigation, high text content.<\/p>\n<p>All 12 key pages and the homepage will be feature pages. However most of the pages in our courses section will be content pages, and only a few will be navigation or feature pages.<\/p>\n<p>Again, this is experimental. We\u2019re hoping to find out exactly how the three page types will work out in practice.<\/p>\n<h2>Design elements<\/h2>\n<p>We\u2019ve been working these past few months on our general design patterns, which follow <a href=\"http:\/\/atomicdesign.bradfrost.com\">atomic design principles<\/a>. Some patterns seemed to be more useful than others, so we prioritised building those with our development team.<\/p>\n<p>Other areas that we\u2019ve really focused on are:<\/p>\n<ul>\n<li>smarter autocomplete searches for courses.<\/li>\n<li>fresh course page, student\/staff profiles, news and events patterns.<\/li>\n<li>accessibility and screen reader suitability and testing.<\/li>\n<li>cross-device\/responsive patterns.<\/li>\n<li>reinventing quicklinks into smarter autocomplete searches for students and staff.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<figure style=\"width: 703px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-medium\" src=\"https:\/\/lh4.googleusercontent.com\/8de50z2osyVheQGcnnvAShiAMDUM1OMFimhb6603Gc9un7He1JHNvSrKWV6MFpGklBM6lhDwhd6DXalv44uVsD0lsrgjqBy1oHUGwOH4s2IhlEfPUSc5F3h9T0AWGBCSzNstaY8xmsI\" alt=\"Screenshots of work done on the new Kent theme.\" width=\"703\" height=\"1051\" \/><figcaption class=\"wp-caption-text\">Some examples of work on the theme. Changing the global nav to all-blue, figuring out how navigation works.<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-medium\" src=\"https:\/\/lh3.googleusercontent.com\/9YUKWhsZuMPO39l4IVfbHaRFOxd1KWN2Qj9vQNLlEiVawKSPMgOyLn8uccuPXPQj24JX1QgoBnEc6hZjoCZnmVLMWeptX1S9OEy-dZfdEV__5XajOWweymbHFwPAJP-JaqHbA4KWKzg\" alt=\"Screenshot of the staff\/student quicklinks and search\" width=\"1600\" height=\"907\" \/><figcaption class=\"wp-caption-text\">Work done on the staff\/student quicklinks and search<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<figure style=\"width: 825px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"size-medium\" src=\"https:\/\/lh6.googleusercontent.com\/sxCjfM2Fg3TXCLldij3Wx3fNWBViHea13s8C0zCB2wqZK-gAWVQOJBJtsGBqRp1C6ddtQWaUjXX6g2z7LpV0llCfkMkZICStKxFDVv3LwMEwlWnUxqjGilUaRZgKJpOm5We8dJkL4QI\" alt=\"Screenshot of work done on autocomplete search.\" width=\"825\" height=\"536\" \/><figcaption class=\"wp-caption-text\">Work done on autocomplete search. This will work the same way no matter whether you&#8217;re searching for a course, news story, event, researcher, etc.<\/figcaption><\/figure>\n<h2>User testing<\/h2>\n<p>Although we have done some user testing and feedback on the temporary home page, we still need to do much more user testing of a range of pages, with real content.<\/p>\n<p>We therefore hope to get our new content up on <a href=\"http:\/\/beta.kent.ac.uk\">beta.kent.ac.uk<\/a> as quickly as possible, and run a combination of guerrilla testing and online feedback to get a better feel for some key questions:<\/p>\n<ul>\n<li>does our navigation work well?<\/li>\n<li>is it easy to work out how to search for relevant content?<\/li>\n<li>is scrolling down a long page causing issues for some users?<\/li>\n<li>do we have too much or too little imagery and videos?<\/li>\n<li>do users use the new global navigation menu?<\/li>\n<li>do internal users notice the student\/staff quicklinks?<\/li>\n<li>do users scroll down to the footer for more links, contact info, etc?<\/li>\n<\/ul>\n<h2>Image guidelines<\/h2>\n<p>The new theme places a strong emphasis on great images.<\/p>\n<p>We noticed that the existing Kent website tends to allow publishers to choose large numbers of images (perhaps as many as 10 or 20 on a page) to help \u2018spruce up\u2019 their sites. However this tends to have the opposite effect. More is definitely less.<\/p>\n<p>It is in fact just very hard to choose lots of great images for a website, without it appearing cluttered.<\/p>\n<p>We\u2019ve therefore been careful to allow fewer images per page: typically no more than two or three are needed even on a high-impact feature page. But now the images are much bigger and much more prominent. Focus on doing less better.<\/p>\n<p>We also want to refresh the brand slightly in terms of images and videos.<\/p>\n<p>We\u2019re therefore in the process of working with our Brand Group to see how we can define the kinds of fresher, more personal and engaging sorts of photography that suit the University as it looks to the future.<\/p>\n<h2>Summary<\/h2>\n<p>I told you we\u2019d been busy over the summer&#8230;<\/p>\n<p>We looked at:<\/p>\n<p>&#8211; New programme of work for a University content management solution.<br \/>\n&#8211; Short-term plan to rebuild and retheme a small number of business- and user-critical pages in existing publishing solution.<br \/>\n&#8211; Looking at content strategy.<br \/>\n&#8211; Evolution, testing and development of our theme and patterns.<br \/>\n&#8211; Image guidelines.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here\u2019s your summary\u2026 &#8211; New programme of work for a University content management solution. &#8211; Short-term plan to rebuild and retheme a small number of &hellip; <a href=\"https:\/\/blogs.kent.ac.uk\/webdev\/2016\/10\/25\/a-summer-with-the-new-kent-web-theme\/\">Read&nbsp;more<\/a><\/p>\n","protected":false},"author":2,"featured_media":2610,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[690,79447,79395],"tags":[79469,79464,521,23153,79392],"_links":{"self":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/2608"}],"collection":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/comments?post=2608"}],"version-history":[{"count":8,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/2608\/revisions"}],"predecessor-version":[{"id":2942,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/2608\/revisions\/2942"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/media\/2610"}],"wp:attachment":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/media?parent=2608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/categories?post=2608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/tags?post=2608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}