John Deere Brand Portal

The hub for John Deere employees from around the world to learn how to properly use brand elements. In order to teach by example, the portal itself is a best-in-class articulation of the John Deere brand.

Client: John Deere
Date: November 30, 2017
Services: UX Strategy, UX Design
01. Context

The John Deere marketing team wanted to create a best-in-class brand portal for internal employees. Although the current brand portal had very rich information, it was outdated, text-heavy, difficult to navigate, and not representative of the brand.

The John Deere marketing team needed a solution that would facilitate visual guidelines information, enhance the findability of corporate assets like PowerPoint templates, Word templates, and brand photography, and educate employees through real-life examples of proper brand usage. Ultimately, the brand portal needed to be positioned as a tool to support the creation of better, more consistent brand communications for all employees, while creating an visceral experience demonstrative of best-in-class brand articulation.

02. UX Strategy

A Web Foundational Strategy (i.e. experience brief) was created as a deliverable to help the John Deere brand team and internal gyro teams align on project objectives, synthesize research findings to fulfill ultimate user experience goals, and serve as documentation to inform remaining phases of the project.

To generate the Foundational Strategy a research plan was created, with significant investment on primary research which included: 12 stakeholder interviews, on-site feedback polls using HotJar, heatmaps, session recordings, and analysis of performance/traffic analytics through SiteCatalyst. Secondary research included in-depth best-in-class brand portal analysis to identify competitive benchmarks to aspire to.

The Foundational Strategy informs the production roadmap for the creation of successful digital products by understanding, prioritizing, and leveraging insights from three key strategic pillars:

Business Objectives

What does the portal need to achieve for the business and what are the specific site objectives for the redesign?

Brand Experience

How does the portal experience align with the brand experience?

Audience Knowledge

Understanding the users, their needs and goals.

Summary of Key Insights
  • Most frequent tasks performed on the portal: Downloading templates and guidelines; finding pre-approved brand photography; understanding correct usage of logo and specs.
  • Photography and brand guidelines were the pages with the highest engagement and traffic metrics. Average time spent on the photography page was 4:53.
  • Users expressed frustration with the current template finder. Templates were disorganized and uncategorized making it difficult to find the right asset.
  • Users were frustrated by how expansive the portal was. With over 200 pages, users had to commit to too many clicks before finding the content they were looking for.
  • The portal had too much text making it difficult for users to scan the content for answers.
  • Search functionality is broadly used, but search results are not usually correct.
  • The brand team fields the same requests repeatedly, creating inefficiencies in the team’s workflow.
  • Users would not visit the portal repeatedly because the content was “stale”.
  • User groups include: corporate employees (regular users, mostly seeking templates), MarComm employees (power users, seeking photography and logos), and Dealers (seeking licensing and brand guidelines information).
Summary of Key Recommendations
  • Architect information around primary user tasks. The main information architecture pillars became: Templates, Photography, Logos, Training, Promotional Products, and Guidelines.
  • Leverage the photography section as primary driver of repeat visits. Create a schedule for new content creation and allow users to submit photography requests to keep content fresh and keep users coming back.
  • Create a Template Chooser Wizard to help users narrow down templates based on department, need, and geography.
  • Reduce the over number of pages, specially of brand guidelines, photography, and resources pages which constitute 71% of total pages.
  • Classify content as ‘top-tier’, ‘must-know’, and ‘should-know’ to create an optimal content hierarchy. Develop UI patterns to help elevate ‘top-tier’ content above all other content.
  • Create section with real-life examples of correct and incorrect brand usage.
  • Leverage taxonomies in the content to enhance the search capabilities of the brand portal.
  • Allow users to submit work to be featured in the brand portal for correct brand usage, and allow users to report improper brand usage to help self-police the brand.
  • Create a forum of frequently asked questions where the brand team can curate a collection of the most recent and relevant employee requests.
  • Support new employee on-boarding process with a curated selection of links and materials.
User Experience Vision Statement

The essence of the John Deere brand portal is to create a tool that is useful and functional for employees to find things quickly, while inspiring them with a visceral, tangible experience demonstrative of the brand. The primary KPI will be measured in repeat visits, a benchmark indicative of success because it means that users are finding value in the portal, and creates more opportunities to educate employees on our brand and how to promote it more effectively.

03. Prototyping

Wireframe prototypes in both desktop and mobile were created to identify key user interactions throughout the experience. Patterns and functionality were designed and documented to help align clients with other gyro internal teams.

Desktop Prototype
desktop_0002_brand guidelines header
desktop_0003_brand guidelines body
desktop_0004_Screen Shot 2018-08-18 at 10.58.40 PM
desktop_0005_Screen Shot 2018-08-18 at 11.17.33 PM
Mobile Prototype

Want to see the full prototype?

04. Design System

During the wireframing and prototyping phase, a library of patterns was developed to accommodate a variety of layouts, content types, and key user interactions. During our high-fidelity design phase, we created a design system in Sketch to ensure UI elements were repeatable, consistent, diverse, and flexible enough to suit the marketing needs of the John Deere Brand team.

Design System file
  • Components were broken out into symbols.
  • Nested symbols were used to create consistency in button styles, iconography, and cards.
  • Word documents were created for components to help CMS content authors write content based on fields available in each component.
Home page
  • Quick search bar in the hero – users expressed the need for better search capabilities.
  • “Top-tier” content elevated on home page, providing quick access to essential brand information.
  • Marketing showcase teaches by example. The section provides education on best-in-class brand articulation from around the world.
  • Additional promo rows designed to engage users with different content.
  • Contact row at the bottom provides quick access to the brand team.
Photography page
  • Integration with John Deere’s DAM to embed select galleries via API to the brand portal.
  • Reduced number of photography pages from 18 to 1 through UI controls that allow users to filter through the galleries without reloading the page.
Template Chooser
  • Wizard interface takes four inputs from users to narrow down template selections.
  • Template type – user selects which type of asset they’re trying to find.
  • Department – different departments have different color palettes. Selection filters department-approved assets available for download.
  • Size – different paper sizes are available based on geography.
  • Results – brand-approved assets based on users’ needs and departments within John Deere.
Brand Guidelines
  • Reduced the number of pages from 44 to 3: general guidelines, visual guidelines, and digital guidelines.
  • Added a sticky sidebar navigation to help users traverse through the long-scroll pages. This provides a way-finding mechanism to help users find content faster without the need to commit to a click and a page refresh, as well as leverage browser functionality like cmd+f to search by keyword.
  • The sidebar indicates progress down the page to help user find the beginning and end of the page.
Mobile Experience
  • All patterns were designed to be mobile-first to ensure a seamless mobile and tablet experience.

Leave a Reply

Your email address will not be published.