{"id":312,"date":"2018-11-14T00:45:23","date_gmt":"2018-11-14T00:45:23","guid":{"rendered":"http:\/\/wux.io\/wuxio\/?p=312"},"modified":"2021-07-10T13:52:45","modified_gmt":"2021-07-10T13:52:45","slug":"owners-masthead-redesign","status":"publish","type":"post","link":"http:\/\/wux.io\/wuxio\/owners-masthead-redesign\/","title":{"rendered":"Owners Masthead Redesign"},"content":{"rendered":"\n<p>Analytics revealed that the Toyota Owners pages had ineffective masthead designs, resulting in low user engagement. Masthead engagement is important because they help personalize page content. The mastheads also contained background imagery that often conflicted with text legibility. Some masthead controls were non-standard UI elements that resulted in confusion. In order to improve the usability, the design team decided to take a utilitarian stance and focus on common UI conventions. This was an appropriate direction for Toyota Owners, because the platform is primarily used by existing customers as a resource rather than for marketing material.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/overview-3.jpg\"><img loading=\"lazy\" width=\"1452\" height=\"800\" src=\"http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/overview-3.jpg\" alt=\"Mastheads prior to redesign and click thru rates\" class=\"wp-image-362\" srcset=\"http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/overview-3.jpg 1452w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/overview-3-300x165.jpg 300w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/overview-3-768x423.jpg 768w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/overview-3-1024x564.jpg 1024w\" sizes=\"(max-width: 1452px) 100vw, 1452px\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:66.67%\">\n<h5>Role<\/h5>\n\n\n\n<p>I collaborated closely with our lead UX designer, strategist, and business analyst to identify UI paradigms that would help achieve project goals. Design jams with whiteboarding were apart of our daily workflow. <\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\">\n<h5>Collaborators<\/h5>\n\n\n\n<p>UX lead<br>Strategist<br>Business analyst<br>Data analyst<br>Producer<br>Account<br>Visual designer<\/p>\n<\/div>\n<\/div>\n\n\n\n<h5>Project Goals<\/h5>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul><li>Increase user engagement with masthead controls<\/li><li>Standardize masthead modules with common UI conventions \u2014 some mastheads consisted of one-off interactions that could be standardize to match mastheads with similar user tasks<\/li><li>Re-position Toyota Owners as a utility resource, shifting away the focus from marketing \u2014 reduce the use of masthead imagery and introduce task-oriented UI paradigms<\/li><\/ul>\n\n\n\n<div style=\"height:48px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5>Process<\/h5>\n\n\n\n<p>Page mastheads were bucketed into different types based on user goals<\/p>\n\n\n\n<ol><li>Zip Input \u2014 location-based content<\/li><li>Select Vehicle \u2014 filter content by vehicle model and year<\/li><li>VIN Input \u2014 17 digit vehicle identification number input field for vehicle-specific content<\/li><\/ol>\n\n\n\n<div style=\"height:48px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>The team explored the best UI paradigms that are common across the web to increase the ease of use and reduce the learning curve for new users. The team also researched other companies to learn from their UI patterns.<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"1024\" height=\"700\" src=\"http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/applemasthead-1-1024x700.png\" alt=\"\" class=\"wp-image-915\" srcset=\"http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/applemasthead-1-1024x700.png 1024w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/applemasthead-1-300x205.png 300w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/applemasthead-1-768x525.png 768w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/applemasthead-1.png 1092w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>Our design exploration led to the following choices:<\/p>\n\n\n\n<p>\u2022 Background imagery was removed to promote text legibility.<br>\u2022 Center masthead content to promote the importance of CTA&#8217;s and fields.<br>\u2022 Introduce common nomenclature for button labels, form fields and other naming conventions<br>\u2022 Introduce standardized modules based on the masthead types<\/p>\n\n\n\n<h6>1. Zip Input Field<\/h6>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/1-Zip-1.jpg\"><img loading=\"lazy\" width=\"1342\" height=\"918\" src=\"http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/1-Zip-1.jpg\" alt=\"Zip input field masthead\" class=\"wp-image-364\" srcset=\"http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/1-Zip-1.jpg 1342w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/1-Zip-1-300x205.jpg 300w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/1-Zip-1-768x525.jpg 768w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/1-Zip-1-1024x700.jpg 1024w\" sizes=\"(max-width: 1342px) 100vw, 1342px\" \/><\/a><\/figure><\/div>\n\n\n\n<h6>Analytics<\/h6>\n\n\n\n<p>Before Redesign: 16% CTR (Click thru rate)<br>After Redesign: 32% CTR<br>Analytics reveal that the redesign was impactful and resulted in doubling the engagement rate.<\/p>\n\n\n\n<h6>Other pages that use this masthead paradigm include<\/h6>\n\n\n\n<p>\u2022 Find A Dealer<br>\u2022 Toyota Express Maintenance<br>\u2022 Service Offers<\/p>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h6>2. <em>Select A Vehicle<\/em> CTA<\/h6>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/2-change-vehicle-1.jpg\"><img loading=\"lazy\" width=\"1342\" height=\"918\" src=\"http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/2-change-vehicle-1.jpg\" alt=\"Select vehicle masthead\" class=\"wp-image-366\" srcset=\"http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/2-change-vehicle-1.jpg 1342w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/2-change-vehicle-1-300x205.jpg 300w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/2-change-vehicle-1-768x525.jpg 768w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/2-change-vehicle-1-1024x700.jpg 1024w\" sizes=\"(max-width: 1342px) 100vw, 1342px\" \/><\/a><\/figure><\/div>\n\n\n\n<h6>Analytics<\/h6>\n\n\n\n<p>Before Redesign: 20% CTR<br>After Redesign: 39.5% CTR<br>Analytics reveal that the redesign was impactful and resulted in doubling the engagement rate.<\/p>\n\n\n\n<h6>Other pages that use this masthead paradigm include<\/h6>\n\n\n\n<p>\u2022 Dashboard Indicators<br>\u2022 Manuals &amp; Warranty<\/p>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h6>3. VIN Input Field<\/h6>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/3-AddVIN.jpg\"><img loading=\"lazy\" width=\"1342\" height=\"918\" src=\"http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/3-AddVIN.jpg\" alt=\"Add vin input field masthead\" class=\"wp-image-356\" srcset=\"http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/3-AddVIN.jpg 1342w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/3-AddVIN-300x205.jpg 300w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/3-AddVIN-768x525.jpg 768w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/3-AddVIN-1024x700.jpg 1024w\" sizes=\"(max-width: 1342px) 100vw, 1342px\" \/><\/a><\/figure><\/div>\n\n\n\n<h6>Analytics<\/h6>\n\n\n\n<p>Before Redesign: 13% CTR<br>After Redesign: 29% CTR<br>Analytics reveal that the redesign was impactful and resulted in an engagement rate increase of 123%.<\/p>\n\n\n\n<h6>Other pages that use this masthead paradigm include<\/h6>\n\n\n\n<p>\u2022 ToyotaCare<br>\u2022 Vehicle Specification<br>\u2022 Service History<\/p>\n\n\n\n<div style=\"height:64px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5>Visual Design<\/h5>\n\n\n\n<figure class=\"wp-block-gallery columns-1\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-zipcode.png\"><img loading=\"lazy\" width=\"2130\" height=\"1348\" src=\"http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-zipcode.png\" alt=\"\" data-id=\"892\" data-full-url=\"http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-zipcode.png\" data-link=\"http:\/\/wux.io\/wuxio\/owners-masthead-redesign\/masthead-zipcode\/\" class=\"wp-image-892\" srcset=\"http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-zipcode.png 2130w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-zipcode-300x190.png 300w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-zipcode-1024x648.png 1024w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-zipcode-768x486.png 768w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-zipcode-1536x972.png 1536w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-zipcode-2048x1296.png 2048w\" sizes=\"(max-width: 2130px) 100vw, 2130px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-select.png\"><img loading=\"lazy\" width=\"2130\" height=\"1348\" src=\"http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-select.png\" alt=\"\" data-id=\"894\" data-full-url=\"http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-select.png\" data-link=\"http:\/\/wux.io\/wuxio\/owners-masthead-redesign\/masthead-select\/\" class=\"wp-image-894\" srcset=\"http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-select.png 2130w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-select-300x190.png 300w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-select-1024x648.png 1024w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-select-768x486.png 768w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-select-1536x972.png 1536w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-select-2048x1296.png 2048w\" sizes=\"(max-width: 2130px) 100vw, 2130px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-vin.png\"><img loading=\"lazy\" width=\"2130\" height=\"1348\" src=\"http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-vin.png\" alt=\"\" data-id=\"893\" data-full-url=\"http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-vin.png\" data-link=\"http:\/\/wux.io\/wuxio\/owners-masthead-redesign\/masthead-vin\/\" class=\"wp-image-893\" srcset=\"http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-vin.png 2130w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-vin-300x190.png 300w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-vin-1024x648.png 1024w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-vin-768x486.png 768w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-vin-1536x972.png 1536w, http:\/\/wux.io\/wuxio\/wp-content\/uploads\/2018\/11\/masthead-vin-2048x1296.png 2048w\" sizes=\"(max-width: 2130px) 100vw, 2130px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p>The visual comps reveal that the redesigns have been drastically simplified from the originals. Analytics reveal that this UX direction has helped users focus on important user tasks, leading to significant increases in engagement.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Analytics revealed that the Toyota Owners pages had ineffective masthead designs, resulting in low user engagement. Masthead engagement is important because they help personalize page content. The mastheads also contained background imagery that often conflicted with text legibility. Some masthead controls were non-standard UI elements that resulted in confusion. In order to improve the usability, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":899,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"http:\/\/wux.io\/wuxio\/wp-json\/wp\/v2\/posts\/312"}],"collection":[{"href":"http:\/\/wux.io\/wuxio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/wux.io\/wuxio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/wux.io\/wuxio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/wux.io\/wuxio\/wp-json\/wp\/v2\/comments?post=312"}],"version-history":[{"count":96,"href":"http:\/\/wux.io\/wuxio\/wp-json\/wp\/v2\/posts\/312\/revisions"}],"predecessor-version":[{"id":939,"href":"http:\/\/wux.io\/wuxio\/wp-json\/wp\/v2\/posts\/312\/revisions\/939"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/wux.io\/wuxio\/wp-json\/wp\/v2\/media\/899"}],"wp:attachment":[{"href":"http:\/\/wux.io\/wuxio\/wp-json\/wp\/v2\/media?parent=312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/wux.io\/wuxio\/wp-json\/wp\/v2\/categories?post=312"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/wux.io\/wuxio\/wp-json\/wp\/v2\/tags?post=312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}