{"id":14,"date":"2023-03-07T14:00:44","date_gmt":"2023-03-07T14:00:44","guid":{"rendered":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/?p=14"},"modified":"2023-03-03T10:26:52","modified_gmt":"2023-03-03T10:26:52","slug":"developing-a-new-website-search-with-funnelback","status":"publish","type":"post","link":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/2023\/03\/07\/developing-a-new-website-search-with-funnelback\/","title":{"rendered":"Developing a new website search with Funnelback"},"content":{"rendered":"<p><span style=\"font-weight: 400\">Last year we launched an improved site search on bath.ac.uk. The improved search has a range of new features and is powered by the <\/span><a href=\"https:\/\/www.squiz.net\/products\/funnelback\/for-he\"><span style=\"font-weight: 400\">Funnelback Higher Education template,<\/span><\/a><span style=\"font-weight: 400\"> restyled to match our Lens design system.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15\" src=\"http:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-1-300x155.png\" alt=\"New University of Bath site search\" width=\"744\" height=\"384\" srcset=\"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-1-300x155.png 300w, https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-1-415x215.png 415w, https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-1.png 904w\" sizes=\"auto, (max-width: 744px) 100vw, 744px\" \/><\/p>\n<p><span style=\"font-weight: 400\">Our old site search was simple, allowing basic features only. You could sort results by relevance or date and filter by related search suggestions.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16\" src=\"http:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-2-300x144.png\" alt=\"Old University of Bath site search\" width=\"774\" height=\"372\" srcset=\"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-2-300x144.png 300w, https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-2-768x369.png 768w, https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-2-448x215.png 448w, https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-2.png 904w\" sizes=\"auto, (max-width: 774px) 100vw, 774px\" \/><\/p>\n<h2>New Features of the site search<\/h2>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Results can be filtered based on content types for example courses, events, people, and announcements.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Results can be refined by filters called \u2018facets\u2019, these are specific to each content type, for example, courses can now be filtered by different parameters such as \u2018Course Type\u2019, \u2018Mode of Study\u2019, \u2018Department\u2019, and more<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Courses can now be favourited by prospective students and compared against other courses<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">More key details are provided in the search results for example course specific details like UCAS code and department.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Images can now be pulled in from articles and shown in the main search results<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Search suggestions are shown in a drop-down, accessed by clicking on the search box<\/span><\/li>\n<\/ul>\n<h2><b>How we styled the Funnelback Higher Education template to our Lens look and feel<\/b><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17\" src=\"http:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-3-300x257.png\" alt=\"\" width=\"774\" height=\"663\" srcset=\"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-3-300x257.png 300w, https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-3-768x658.png 768w, https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-3-251x215.png 251w, https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-3.png 904w\" sizes=\"auto, (max-width: 774px) 100vw, 774px\" \/><\/p>\n<p><span style=\"font-weight: 400\">When we were provided with the Higher Education template by Funnelback, we realized a lot of work would need to be done to make it look more like our Lens design system styles. The image above shows what we started with.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Our previous UX Designer, Pop put together high-fidelity mockups of all of the screens. These designs were very different from the template provided by Funnelback and required a lot of CSS and HTML template adjustments in order to match up. We also decided that there were a few things in the templates that were not relevant to us such as the hero image and the option to view results as cards.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18\" src=\"http:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-4-300x256.png\" alt=\"Funnelback mobile mockups created in Figma\" width=\"774\" height=\"661\" srcset=\"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-4-300x256.png 300w, https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-4-768x656.png 768w, https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-4-252x215.png 252w, https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-4.png 904w\" sizes=\"auto, (max-width: 774px) 100vw, 774px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19\" src=\"http:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-5-300x179.png\" alt=\"Funnelback tablet mockups created in Figma\" width=\"774\" height=\"461\" srcset=\"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-5-300x179.png 300w, https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-5-768x457.png 768w, https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-5-361x215.png 361w, https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-5.png 904w\" sizes=\"auto, (max-width: 774px) 100vw, 774px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-20\" src=\"http:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-6-300x183.png\" alt=\"Funnelback desktop mockups created in Figma\" width=\"774\" height=\"473\" srcset=\"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-6-300x183.png 300w, https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-6-768x469.png 768w, https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-6-352x215.png 352w, https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2021\/11\/Picture-6.png 904w\" sizes=\"auto, (max-width: 774px) 100vw, 774px\" \/><\/p>\n<p><span style=\"font-weight: 400\">Each section of the new search was split up in order to make styling more manageable. There were so many styles, the site search was even given its own separate Lens stylesheet. This was to ensure the styles did not clash with our main website styles and that they were organised and easy to update in the future.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">Once all sections of the site search had cleared our review and Accept\/Reject process, we passed the site search over to our Content team for their feedback. After several wording changes, we were finally able to go live on 15 October 2021.<\/span><\/p>\n<p><span style=\"font-weight: 400\">You can view our improved site search by visiting <\/span><a href=\"https:\/\/www.bath.ac.uk\/search\"><span style=\"font-weight: 400\">bath.ac.uk\/search<\/span><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last year we launched an improved site search on bath.ac.uk. The improved search has a range of new features and is powered by the Funnelback Higher Education template, restyled to match our Lens design system. Our old site search was...<\/p>\n","protected":false},"author":1554,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[2],"tags":[4,7,5,6],"class_list":["post-14","post","type-post","status-publish","format-standard","hentry","category-front-end-development","tag-front-end","tag-funnelback","tag-site-search","tag-website"],"acf":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/posts\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/users\/1554"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/comments?post=14"}],"version-history":[{"count":0,"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/posts\/14\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/media?parent=14"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/categories?post=14"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-json\/wp\/v2\/tags?post=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}