{"id":354,"date":"2018-04-10T16:19:25","date_gmt":"2018-04-10T16:19:25","guid":{"rendered":"http:\/\/commons.trincoll.edu\/communications\/?p=354"},"modified":"2018-09-26T20:19:48","modified_gmt":"2018-09-26T20:19:48","slug":"design-concepts-round-two","status":"publish","type":"post","link":"http:\/\/commons.trincoll.edu\/communications\/2018\/04\/10\/design-concepts-round-two\/","title":{"rendered":"Design Concepts: Round Two"},"content":{"rendered":"<p>In March <a href=\"http:\/\/commons.trincoll.edu\/communications\/2018\/03\/17\/designconcepts\/\" target=\"_blank\" rel=\"noopener\">we asked for your help<\/a> in choosing a design direction for Trinity\u2019s new website. In this entry we recap what we heard from the Trinity community, we share which design direction we chose, and we again ask for your input into the design.<\/p>\n<h3>What We Heard from You<\/h3>\n<p>More than 70 people from across the Trinity community took the time to consider the two design concepts, and they sent us their incredibly thoughtful feedback about what they saw and experienced. Respondents included faculty, staff, students, alumni, and a few unknown folks.<\/p>\n<p>If we were keeping score (we were!), most respondents favored Design Concept One. In fact, Design Concept One was <em>three-and-a-half times more favored<\/em> than Design Concept Two. Here is a selection of reasons people cited for <strong>liking Design Concept One<\/strong>:<\/p>\n<ul>\n<li>A focus on imagery<\/li>\n<li>More visually pleasing<\/li>\n<li>Easy on the eye and welcoming<\/li>\n<li>Intuitive navigation and cleaner design<\/li>\n<li>Less scrolling<\/li>\n<li>Clear what the user is supposed to do to find information<\/li>\n<li>Accurately conveys the student experience<\/li>\n<li>Liked the equal weight to Programs, People, Places, and Pride<\/li>\n<li>Liked the background\/atmospheric video<\/li>\n<li>Vibrant and engaging<\/li>\n<\/ul>\n<p>Not everyone loved what they saw, though. Here is a selection of reasons people cited for <strong>disliking Design Concept One<\/strong>:<\/p>\n<ul>\n<li>Unsure about the background\/atmospheric video<\/li>\n<li>The design may begin to feel dated sooner<\/li>\n<li>Moving video is distracting<\/li>\n<li>Not different enough from other NESCAC school websites<\/li>\n<li>Top of the page is engaging, but it feels lackluster as you scroll down<\/li>\n<li>It&#8217;s not clear where to find information for alumni<\/li>\n<li>Too much use of color<\/li>\n<\/ul>\n<p>The <strong>use of color<\/strong> in both designs was an issue for some respondents, enough so that we created a category of responses that deals exclusively with color. Some things that were unappealing to viewers about the colors include:<\/p>\n<ul>\n<li>Colors are hard on the eyes<\/li>\n<li>Colors seem to have little to do with Trinity. Can there be more use of blue and gold?<\/li>\n<li>The colors seem too young and playful, not sophisticated an unified<\/li>\n<li>The colors don&#8217;t seem very Trinity, and some aren&#8217;t aesthetically pleasing<\/li>\n<li>The color palette is jarring and difficult to look at<\/li>\n<\/ul>\n<p><strong>What about Design Concept Two? <\/strong><\/p>\n<p>Some of the distinguishing feedback about Design Concept Two included opinions that the design was bold, vibrant, fresh, and easy to navigate. Some respondents liked that Programs was prioritized over People, Places, and Pride. However, the standout negative comments included a dislike for the \u201cdead space\u201d at the top of the page, the amount of scrolling to get to content, and the use of the blended grid showcasing the feature content (People, Places, Pride).<\/p>\n<h3>The Result: What Did We Choose?<\/h3>\n<p>Let\u2019s cut to the chase: We chose Design Concept One. We arrived at this decision using the feedback from the community at-large, the feedback from the <a href=\"http:\/\/commons.trincoll.edu\/communications\/team\/website-redesign-advisory-group\/\" target=\"_blank\" rel=\"noopener\">Web Redesign Advisory Group<\/a>, and the feedback from the <a href=\"http:\/\/commons.trincoll.edu\/communications\/team\/\" target=\"_blank\" rel=\"noopener\">Website Redesign Team<\/a>. Choosing a direction represents a starting point for the design. We were at a fork in the road, and now we have chosen a path. Fastspot has taken our feedback and is using it to\u00a0 build out the design into something that truly fits Trinity.<\/p>\n<h3>Round Two: Homepage Design<\/h3>\n<p>During the design process, there are three rounds. The second round incorporates the comprehensive feedback from the community, the <a href=\"http:\/\/commons.trincoll.edu\/communications\/team\/website-redesign-advisory-group\/\" target=\"_blank\" rel=\"noopener\">Web Redesign Advisory Group<\/a>, and the <a href=\"http:\/\/commons.trincoll.edu\/communications\/team\/\" target=\"_blank\" rel=\"noopener\">Website Redesign Team<\/a>. The third and final version (still to come), will be our final design.<\/p>\n<p><em>Below is an explanation of the second iteration, and sample images for you to explore. Click on (or tap) any image to open it in a new tab. Click (on desktop) the new image to move in closer and see a full-screen view. The images are static and are for reference; they do not allow interaction.<\/em><\/p>\n<p>In this second round, Fastspot has simplified the use of color throughout the entire design to focus more on the Trinity brand and create a more sophisticated look overall. The secondary color palette (the greens, yellows, blues, etc.) is used in smaller details, such as live hovers and swiping animations.<\/p>\n<p>We recognized that the background video can be either highly attractive or a powerful deterrent to visitors. To solve this issue, Fastspot added the ability to play\/pause the atmospheric video. It is a subtle addition, and it will be beneficial to accessibility without adding too much clutter to the page.<\/p>\n<figure style=\"width: 484px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/commons.trincoll.edu\/communications\/files\/2018\/04\/R2_homepage.jpg\" target=\"_blank\" rel=\"http:\/\/commons.trincoll.edu\/communications\/files\/2018\/04\/R2_homepage.jpg noopener\"><img loading=\"lazy\" class=\"wp-image-350 size-large\" src=\"http:\/\/commons.trincoll.edu\/communications\/files\/2018\/04\/R2_homepage-484x1024.jpg\" alt=\"Round Two Homepage Design\" width=\"484\" height=\"1024\" srcset=\"http:\/\/commons.trincoll.edu\/communications\/files\/2018\/04\/R2_homepage-484x1024.jpg 484w, http:\/\/commons.trincoll.edu\/communications\/files\/2018\/04\/R2_homepage-142x300.jpg 142w, http:\/\/commons.trincoll.edu\/communications\/files\/2018\/04\/R2_homepage-768x1624.jpg 768w, http:\/\/commons.trincoll.edu\/communications\/files\/2018\/04\/R2_homepage.jpg 1262w\" sizes=\"(max-width: 484px) 100vw, 484px\" \/><\/a><figcaption class=\"wp-caption-text\">Click (or tap) to see a larger version. Click (on desktop) the new image to see full-screen.<\/figcaption><\/figure>\n<p>A new feature to the homepage&#8217;s functionality is that we changed how the feature topics (Programs, People, Places, Pride) bump out when selected. <a href=\"http:\/\/commons.trincoll.edu\/communications\/2018\/03\/17\/designconcepts\/\" target=\"_blank\" rel=\"noopener\">In the previous version<\/a>, they took over the screen, creating a new layer over the homepage. In this version, we requested that they remain on the same layer as the rest of the homepage. In the image below, you can see an example of this. Programs has been selected, and the feature has appeared below the menu and pushed the rest of the homepage down. Users can either mouse-over to the other three menu items (and have the corresponding feature appear), or X-out\u00a0 to make the entire experience accordion closed.<\/p>\n<figure id=\"attachment_351\" aria-describedby=\"caption-attachment-351\" style=\"width: 449px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/commons.trincoll.edu\/communications\/files\/2018\/04\/R2_homepage_accordion.jpg\" target=\"_blank\" rel=\"http:\/\/commons.trincoll.edu\/communications\/files\/2018\/04\/R2_homepage_accordion.jpg noopener\"><img loading=\"lazy\" class=\"wp-image-351 size-large\" src=\"http:\/\/commons.trincoll.edu\/communications\/files\/2018\/04\/R2_homepage_accordion-449x1024.jpg\" alt=\"Round Two Homepage Design with Programs Selected\" width=\"449\" height=\"1024\" srcset=\"http:\/\/commons.trincoll.edu\/communications\/files\/2018\/04\/R2_homepage_accordion-449x1024.jpg 449w, http:\/\/commons.trincoll.edu\/communications\/files\/2018\/04\/R2_homepage_accordion-131x300.jpg 131w, http:\/\/commons.trincoll.edu\/communications\/files\/2018\/04\/R2_homepage_accordion-768x1753.jpg 768w, http:\/\/commons.trincoll.edu\/communications\/files\/2018\/04\/R2_homepage_accordion.jpg 1262w\" sizes=\"(max-width: 449px) 100vw, 449px\" \/><\/a><figcaption id=\"caption-attachment-351\" class=\"wp-caption-text\">Click (or tap) to see a larger version. Click (on desktop) the new image to see full-screen.<\/figcaption><\/figure>\n<p>Though we didn&#8217;t show the mobile version in the first round of design concepts, here is a look at the mobile version of the design. When feature topics (Programs, People, Places, Pride, etc.) are open, they behave as takeovers. This allows users to control their experience within such limited real estate.<\/p>\n<figure id=\"attachment_352\" aria-describedby=\"caption-attachment-352\" style=\"width: 320px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/commons.trincoll.edu\/communications\/files\/2018\/04\/MobilieView.jpg\" target=\"_blank\" rel=\"http:\/\/commons.trincoll.edu\/communications\/files\/2018\/04\/MobilieView.jpg noopener\"><img loading=\"lazy\" class=\"wp-image-352 size-full\" src=\"http:\/\/commons.trincoll.edu\/communications\/files\/2018\/04\/Mobile1.jpg\" alt=\"Thumbnail of mobile design of homepage\" width=\"320\" height=\"774\" srcset=\"http:\/\/commons.trincoll.edu\/communications\/files\/2018\/04\/Mobile1.jpg 320w, http:\/\/commons.trincoll.edu\/communications\/files\/2018\/04\/Mobile1-124x300.jpg 124w\" sizes=\"(max-width: 320px) 100vw, 320px\" \/><\/a><figcaption id=\"caption-attachment-352\" class=\"wp-caption-text\">Click (or tap) to see a full-length view of the mobile design. Click (on desktop) the new image to see and scroll full-screen.<\/figcaption><\/figure>\n<h3>Share Your Thoughts on Round Two<\/h3>\n<p>What do you think of this iteration of the design? Feel free to share your thoughts in the comment form below. We will conclude feedback this week (April 13).<\/p>\n<div class=\"frm_forms  with_frm_style frm_style_formidable-style\" id=\"frm_form_2_container\" >\n<form enctype=\"multipart\/form-data\" method=\"post\" class=\"frm-show-form \" id=\"form_6i456\"  >\n<div class=\"frm_form_fields \">\n<fieldset>\n<legend class=\"frm_hidden\">Contact Us<\/legend>\r\n\r\n<div class=\"frm_fields_container\">\n<input type=\"hidden\" name=\"frm_action\" value=\"create\" \/>\n<input type=\"hidden\" name=\"form_id\" value=\"2\" \/>\n<input type=\"hidden\" name=\"frm_hide_fields_2\" id=\"frm_hide_fields_2\" value=\"\" \/>\n<input type=\"hidden\" name=\"form_key\" value=\"6i456\" \/>\n<input type=\"hidden\" name=\"item_meta[0]\" value=\"\" \/>\n<input type=\"hidden\" id=\"frm_submit_entry_2\" name=\"frm_submit_entry_2\" value=\"edabb7914a\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/communications\/wp-json\/wp\/v2\/posts\/354\" \/><div id=\"frm_field_22_container\" class=\"frm_form_field form-field  frm_top_container\">\r\n    <label for=\"field_rugq5\" class=\"frm_primary_label\">Your Name\r\n        <span class=\"frm_required\"><\/span>\r\n    <\/label>\r\n    <input type=\"text\" id=\"field_rugq5\" name=\"item_meta[22]\" value=\"\"  data-invmsg=\"Your Name is invalid\" aria-invalid=\"false\"   aria-describedby=\"frm_desc_field_rugq5\"\/>\r\n    <div id=\"frm_desc_field_rugq5\" class=\"frm_description\">Tell us who you are.<\/div>\r\n    \r\n<\/div>\n<div id=\"frm_field_23_container\" class=\"frm_form_field form-field  frm_top_container\">\r\n    <label for=\"field_e98ml\" class=\"frm_primary_label\">Email Address\r\n        <span class=\"frm_required\"><\/span>\r\n    <\/label>\r\n    <input type=\"email\" id=\"field_e98ml\" name=\"item_meta[23]\" value=\"\"  data-invmsg=\"Email Address is invalid\" aria-invalid=\"false\"   aria-describedby=\"frm_desc_field_e98ml\"\/>\r\n    <div id=\"frm_desc_field_e98ml\" class=\"frm_description\">Let us know how to contact you.<\/div>\r\n    \r\n<\/div>\n<div id=\"frm_field_24_container\" class=\"frm_form_field form-field  frm_top_container\">\r\n    <label for=\"field_u1txb\" class=\"frm_primary_label\">Your Message\r\n        <span class=\"frm_required\"><\/span>\r\n    <\/label>\r\n    <textarea name=\"item_meta[24]\" id=\"field_u1txb\" rows=\"5\"  data-invmsg=\"Your Message is invalid\" aria-invalid=\"false\"   aria-describedby=\"frm_desc_field_u1txb\"><\/textarea>\r\n    <div id=\"frm_desc_field_u1txb\" class=\"frm_description\">Let us know how we can help you.<\/div>\r\n    \r\n<\/div>\n\t<input type=\"hidden\" name=\"item_key\" value=\"\" \/>\n\t<div class=\"frm_submit\">\r\n\r\n<button class=\"frm_button_submit\" type=\"submit\"  >Submit<\/button>\r\n\r\n<\/div><\/div>\n<\/fieldset>\n<\/div>\n<\/form>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>In March we asked for your help in choosing a design direction for Trinity\u2019s new website. In this entry we recap what we heard from the Trinity community, we share which design direction we chose, and we again ask for your input into the design. What We Heard from You More than 70 people from&#8230;<\/p>\n","protected":false},"author":29,"featured_media":368,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[22],"tags":[34,37,41],"_links":{"self":[{"href":"http:\/\/commons.trincoll.edu\/communications\/wp-json\/wp\/v2\/posts\/354"}],"collection":[{"href":"http:\/\/commons.trincoll.edu\/communications\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/commons.trincoll.edu\/communications\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/commons.trincoll.edu\/communications\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"http:\/\/commons.trincoll.edu\/communications\/wp-json\/wp\/v2\/comments?post=354"}],"version-history":[{"count":18,"href":"http:\/\/commons.trincoll.edu\/communications\/wp-json\/wp\/v2\/posts\/354\/revisions"}],"predecessor-version":[{"id":374,"href":"http:\/\/commons.trincoll.edu\/communications\/wp-json\/wp\/v2\/posts\/354\/revisions\/374"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/commons.trincoll.edu\/communications\/wp-json\/wp\/v2\/media\/368"}],"wp:attachment":[{"href":"http:\/\/commons.trincoll.edu\/communications\/wp-json\/wp\/v2\/media?parent=354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/commons.trincoll.edu\/communications\/wp-json\/wp\/v2\/categories?post=354"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/commons.trincoll.edu\/communications\/wp-json\/wp\/v2\/tags?post=354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}