{"id":464,"date":"2019-09-28T03:13:19","date_gmt":"2019-09-28T03:13:19","guid":{"rendered":"http:\/\/wux.io\/wuxio\/?p=464"},"modified":"2021-07-09T05:38:11","modified_gmt":"2021-07-09T05:38:11","slug":"navigation-design","status":"publish","type":"post","link":"http:\/\/wux.io\/wuxio\/navigation-design\/","title":{"rendered":"Navigation Design"},"content":{"rendered":"\n
\n
\n
Role<\/h5>\n\n\n\n

As the UX designer on the project, I was tasked with auditing the existing experience and formulating solutions that would improve user engagement, product discoverability, and navigation. The team made use of analytics and card sorting to develop the site hierarchy.<\/p>\n<\/div>\n\n\n\n

\n
Collaborators<\/h5>\n\n\n\n

Strategist
Analytics
Visual Designer
Copy Writer
Producer
Account
Developers <\/p>\n<\/div>\n<\/div>\n\n\n\n

Part I. The Vehicle Selector<\/h4>\n\n\n\n

The Toyota Owners website delivers a highly personalized experience with the more information you provide it about yourself and your vehicle. The first agent that facilitates personalization is the navigation vehicle selector. Upon selecting your vehicle model and year, the contents of almost every page in Owners will filter (globally) by the chosen vehicle.<\/p>\n\n\n\n

\"Original<\/a>
Original Navigation Design<\/figcaption><\/figure><\/div>\n\n\n\n
<\/div>\n\n\n\n
Challenge<\/h5>\n\n\n\n

Analytics revealed the vehicle selector had low engagement rate, proving that the intended experience was unpromising. By filtering page content according to the owner\u2019s vehicle, users take the first step in maximizing the effectiveness of Owners as a personal resource. The low engagement also implies that users lack comprehension for the fundamentals of the Owners platform. The client requested a design update that would both increase engagement and educate newcomers about personalization.<\/p>\n\n\n\n

<\/div>\n\n\n\n
Process<\/h5>\n\n\n\n

I began identifying paradigms that would achieve the following goals:
1. Promote engagement \u2014 Focus the user\u2019s attention on the vehicle selector
2. Educate users \u2014 The vehicle selector\u2019s purpose is to personalize page content<\/p>\n\n\n\n

Logged out state<\/em> \u2014 I explored existing conventions and decided the automatic rollout micro-interaction would be effective at engaging site users. When users arrive at the website for the first time, the menu would automatically rollout to grab their attention. The animation would hint that this is the suggested first action.<\/p>\n\n\n\n

\"Vehicle<\/a><\/h4>\n\n\n\n
  1. The copy atop the model and year selection fields succinctly explains the purpose of vehicle selection.<\/li>
  2. Model and year selection fields are shown in selected state.<\/li>
  3. Message that explains to users the benefits of saving their vehicle to their account promotes registration. This message appears only after the user has selected the vehicle model and year \u2014 making use of progressive disclosure to simplify the initial experience.<\/li><\/ol>\n\n\n\n

    The downside to the experience is we had to limit the automatic rollout interaction to desktop platform only. In mobile, automatically displaying the vehicle selection may confuse users \u2014 a full-screen menu takeover on launch will make them feel lost.<\/p>\n\n\n\n

    Nonetheless, the analytics team did mention that the engagement for the vehicle selector dropdown doubled.<\/p>\n\n\n\n

    \"Vehicle<\/a><\/figure><\/div>\n\n\n\n

    After showing the initial designs to our client, they wanted an easier way to recall previously selected vehicles. We created a history of your most recently selected 5 vehicles.<\/p>\n\n\n\n

    Logged in state<\/em> \u2014 The logged in state reveals the ability to save vehicles and a garage of previously saved vehicles. This is a great way for users to access vehicles that were added by a 17-digit vehicle identification number (VIN). Some Toyota Owners services require the 17-digit VIN and the ability to save it to user accounts have proved to be a real time saver.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    <\/p>\n\n\n\n

    <\/div>\n\n\n\n

    Part II. Information Architecture<\/h4>\n\n\n\n
    <\/div>\n\n\n\n
    Challenge<\/h5>\n\n\n\n

    The second part of the navigation redesign focused on the information architecture of the menu, and ultimately the entire sitemap. This was a global Owners platform effort to restructure the site hierarchy. It was critical that we developed a system that is both intuitive and scalable. A good system will make discovering and navigating through multi-level content flows a painless endeavor. Another user objective was to promote clarity for the menu choices and lessen confusion. We had the following goals in mind:<\/p>\n\n\n\n

    1. Simplify the menu choices<\/li>
    2. Provide context to guide users to their intended destination<\/li>
    3. Improve user engagement <\/li><\/ol>\n\n\n\n

      Existing navigation structure prior to redesign shown:<\/p>\n\n\n\n

      \"Mobile<\/figure><\/div>\n\n\n\n
      \"Mobile<\/figure><\/div>\n\n\n\n
      \"Mobile<\/figure><\/div>\n\n\n\n
      \"Mobile<\/figure><\/div>\n\n\n\n
      \"Menu<\/figure>\n\n\n\n
      \"Menu<\/figure>\n\n\n\n
      \"Menu<\/figure>\n\n\n\n

      <\/p>\n\n\n\n

      <\/p>\n\n\n\n

      <\/div>\n\n\n\n
      Discovery<\/h5>\n\n\n\n

      Google Trends \u2014 We looked at Google Trends and looked up ambiguous nomenclature used on our site. We compare our nomenclature with synonyms to identify the more frequently searched terms.<\/p>\n\n\n\n

      \"Google
      We found that dashboard lights was more familiar to users than our current label, dashboard indicators. Dash lights may be highest ranked, but the terminology isn’t as concrete.<\/figcaption><\/figure>\n\n\n\n

      <\/p>\n\n\n\n

      \"Google
      Customers use Owners to set up their vehicle telematics and app services. It was important that we chose a label that was more familiar with customers. Head unit was definitely the most popular search phrase, but it was a business decision to keep the term Connected Services<\/em>.<\/figcaption><\/figure>\n\n\n\n
      <\/div>\n\n\n\n

      Card sorting \u2014 We conducted a card sorting study to identify patterns in user groupings. Speaking with the participants helped us gain an understanding of their mental model.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      <\/div>\n\n\n\n
      Process<\/h5>\n\n\n\n

      Analytics and New Categories \u2014 The team made use of analytics and business priorities to identify the order of the new navigation categories. We also identified 3 dropdowns to consolidate all the CTA’s \u2014 My Vehicle, Parts & Service, and Resources. The simplified navigation structure gives users more obvious menu choices. <\/p>\n\n\n\n

      The card sorting study revealed patterns where users would often cluster certain pages together. This helped inform groupings of pages within each dropdown.<\/p>\n\n\n\n

      The menu order is as follows with corresponding CTR’s shown:<\/p>\n\n\n\n

      <\/div>\n\n\n\n

      My Vehicle <\/strong>\u2014 house pages that generate personalized information pertaining to an owner\u2019s specific vehicle or set of vehicles.<\/p>\n\n\n\n

      1. My vehicle page \u2014 135K<\/li>
      2. Service History \u2014 29K<\/li>
      3. Vehicle Specs \u2014 65K<\/li>
      4. Audio Multimedia \u2014 19K<\/li>
      5. Connected Services \u2014 3.3K<\/li><\/ol>\n\n\n\n
        <\/div>\n\n\n\n

        Parts & Services<\/strong> \u2014 house pages that provide information for finding and scheduling service, information on extended service coverage, and shopping for Genuine Toyota Parts and Accessories.<\/p>\n\n\n\n

        1. Service Centers \u2014 123K<\/li>
        2. Service Specials \u2014 77K<\/li>
        3. ToyotaCare \u2014 29K<\/li>
        4. Toyota Genuine Parts \u2014 63K<\/li>
        5. Maintenance Schedule \u2014 No data<\/li>
        6. Accessories \u2014 New item<\/li>
        7. Toyota Express Maintenance \u2014 16K<\/li>
        8. Certified Collision Center \u2014 3K<\/li>
        9. ToyotaCare Plus \u2014 No data<\/li><\/ol>\n\n\n\n
          <\/div>\n\n\n\n

          Resources<\/strong> \u2014 house pages that provide valuable information pertaining to Toyota vehicles across the lineup.<\/p>\n\n\n\n

          1. Manuals & Warranties \u2014 246K<\/li>
          2. Dashboard Lights \u2014 128K<\/li>
          3. Safety Recalls & Service Campaigns \u2014 3.5K<\/li>
          4. Videos \u2014 2.2K<\/li>
          5. FAQs \u2014 5.4K<\/li>
          6. Toyota Safety Sense \u2014 4K<\/li>
          7. Contact Us \u2014 No data<\/li><\/ol>\n\n\n\n

            Some lower engaged links are still placed higher based on business priorities. For example, ToyotaCare (no-cost maintenance plan) sits above Toyota Genuine Parts, because it’s a business priority to inform customers of the complimentary service.<\/p>\n\n\n\n

            <\/div>\n\n\n\n
            Wireframes<\/h5>\n\n\n\n

            Find A Dealer found a higher position next to the search CTA (desktop) and on the nav bar (mobile). The 3 top level categories were laid out as shown below.<\/p>\n\n\n\n

            \"\"<\/figure>\n\n\n\n

            The team noticed that a majority of user engagement is captured in the top 4 links. They also wanted to mirror the navigation UI of Toyota.com, the primary marketing experience. We used 4 large icons to represent the top 4 in each category. Contextual sub-headers were used to classify link clusters \u2014 hinting at the content for each.<\/p>\n\n\n\n

            \"\"<\/figure>\n\n\n\n
            \"\"<\/figure>\n\n\n\n
            \"\"<\/figure>\n\n\n\n

            <\/p>\n\n\n\n

            Mobile search \u2014 I noticed the Owners search field had significant user engagement on desktop (~7% user engagement, enough to place it in the top 25 of most engaged features). However, the functionality wasn’t available on mobile. We integrated mobile search in this iteration.<\/p>\n\n\n\n

            \"\"

            <\/figcaption><\/figure>\n\n\n\n
            \"\"<\/figure>\n\n\n\n
            Results<\/h5>\n\n\n\n

            After the new designs were implemented, the analytics team was able to provide us with data that revealed significant improvement to user engagement. With the new navigation design, analytics observed a 3% increase in engagement on desktop and 1% on mobile. <\/p>\n\n\n\n

            Pages that experienced double engagement or better \u2014 ToyotaCare, Service History, Vehicle Specs, Audio & Multimedia, and Vehicle Home.<\/p>\n\n\n\n

            Future consideration \u2014 Maintenance Schedule experiences higher engagement than many of the top 4 tile CTAs in its category as a mere text link. It might be worthwhile to consider promoting this link to the top 4.<\/p>\n\n\n\n

            Visit the current Toyota Owners website<\/a> to see the navigation.<\/p>\n","protected":false},"excerpt":{"rendered":"

            Role As the UX designer on the project, I was tasked with auditing the existing experience and formulating solutions that would improve user engagement, product discoverability, and navigation. The team made use of analytics and card sorting to develop the site hierarchy. Collaborators StrategistAnalyticsVisual DesignerCopy WriterProducerAccountDevelopers Part I. The Vehicle Selector The Toyota Owners website […]<\/p>\n","protected":false},"author":1,"featured_media":534,"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\/464"}],"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=464"}],"version-history":[{"count":89,"href":"http:\/\/wux.io\/wuxio\/wp-json\/wp\/v2\/posts\/464\/revisions"}],"predecessor-version":[{"id":940,"href":"http:\/\/wux.io\/wuxio\/wp-json\/wp\/v2\/posts\/464\/revisions\/940"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/wux.io\/wuxio\/wp-json\/wp\/v2\/media\/534"}],"wp:attachment":[{"href":"http:\/\/wux.io\/wuxio\/wp-json\/wp\/v2\/media?parent=464"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/wux.io\/wuxio\/wp-json\/wp\/v2\/categories?post=464"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/wux.io\/wuxio\/wp-json\/wp\/v2\/tags?post=464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}