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:
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.
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
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