Laying the Foundation for Mobile-First UX

Establishing Responsive & Mobile Design at John Deere

COMPANY

John Deere

ROLE

UX Designer

EXPERTISE

UX/UI Design

YEAR

2019-2024

Overview

John Deere’s Sales Center required real-time mobile access for key workflows like inventory checks, quotes, and customer interactions. However, early releases lacked mobile functionality, limiting productivity and usability.

As a UX Designer, I led the creation of a scalable responsive design strategy, collaborating with engineers, product teams, and stakeholders. Our work delivered mobile-friendly solutions, built reusable components, and established guidelines that empowered dealers to work more efficiently across devices while unifying cross-functional teams.

Key Results

Enabled mobile productivity
Designed scalable layouts and sticky footer navigation to support critical dealer workflows on mobile, reducing the need to return to the office for tasks like inventory updates and quotes.
Improved usability across devices
Created adaptable components, such as responsive label-value lists, that ensured consistent performance and interaction on desktop, tablet, and mobile screens.
Unified design strategy
Defined and documented mobile-first guidelines, including responsive filtering and table solutions, ensuring alignment across engineering and UX teams.
Cross-team collaboration
Scaled up the UX team to include UX engineers, enabling seamless collaboration with product teams to implement responsive solutions.

A example of expected responsive behavior using a Figma frames and breakpoints

Challenges

Desktop-first mindset: Previous designs weren’t optimized for mobile, causing delays and inefficiencies for on-the-go dealers.
Fragmented practices: Teams were using inconsistent responsive techniques or nothing at all, leading to a lack of alignment across modules.
Siloed development teams: Multiple product teams required a unified approach to responsive design for scalable improvements.
Limited mobile knowledge: Engineers and stakeholders needed guidance on best practices for responsive design and page restructuring.

Some Responsive 101 slides I created and presented to 50+ engineers

Challenges

Limited Mobile Focus
The initial release for Australia/New Zealand release prioritized desktop, leaving mobile functionality absent and causing inefficiencies for on-the-go dealers.
Siloed Development Teams and Fragmented Practices
Teams worked in isolation with inconsistent responsive design approaches, making it difficult to implement a scalable, unified strategy."
Limited Mobile Knowledge
Engineers and stakeholders needed training on mobile-first design and responsive workflows to ensure proper implementation.

Some Responsive 101 slides I created and presented to 50+ software engineers

Actions & Contributions

Established Responsive Design Strategy:
Developed scalable workflows, including responsive filtering with a drawer-toggle button and sticky mobile navigation for important actions. Collaborated with engineers to build reusable templates for search and detail pages.
Created Scalable Components:
Designed a responsive label-value list component, ensuring it could accommodate various interactive elements like dropdowns, inputs, and badges. Developed solutions for tables, either reordering columns or converting rows to lists for mobile optimization.
Led Educational Initiatives
Developed responsive design guidelines and co-led Responsive 101 workshops, providing engineers and stakeholders with best practices for mobile-first design and CSS Grid implementation.
Scaled Cross-Functional Collaboration
Expanded the UX team with UX engineers assigned to each product team, enabling end-to-end collaboration for responsive solutions. Coordinated with product teams to prioritize and implement responsive features without bottlenecks.

Established responsive design strategy: Developed and advocated for a unified approach using CSS Grid, responsive breakpoints, and flexible layouts that adapted across desktop, tablet, and mobile devices.
Collaborated across teams: Partnered with engineers, product owners, and other UX designers to ensure responsiveness was a core consideration in feature development.
Led educational initiatives: Co-presented Responsive 101 workshops, demonstrating best practices in responsive design, CSS Grid usage, and Figma components to engineers and stakeholders.
Built scalable solutions: Created reusable Figma components with built-in responsive behavior, streamlining handoff and improving consistency across codebases.
Prototyped and tested: Developed interactive prototypes and conducted usability tests to validate designs with real-world dealers, ensuring mobile needs were met.

A Figma file detailing the steps toward consistent Label-Value pairing behavior across form factors.

A Figma file detailing the steps toward consistent Label-Value pairing behavior.

Responsive guidelines
When establishing UI design strategy, Design Guidelines help everyone find alignment and understanding
optimizing workflow
Action buttons were strategically positioned at the bottom of the screen to enable workflow consistency.
TOGGLE DRAWER FOR FILTERING
Added a drawer toggle to replace the desktop left-column filters, supporting full functionality on mobile.
Responsive guidelines
When establishing UI design strategy, Design Guidelines help everyone find alignment and understanding
optimizing workflow
Action buttons were strategically positioned at the bottom of the screen to enable workflow consistency.
TOGGLE DRAWER FOR FILTERING
Added a drawer toggle to replace the desktop left-column filters, supporting full functionality on mobile.
Responsive guidelines
When establishing UI design strategy, Design Guidelines help everyone find alignment and understanding
optimizing workflow
Action buttons were strategically positioned at the bottom of the screen to enable workflow consistency.
TOGGLE DRAWER FOR FILTERING
Added a drawer toggle to replace the desktop left-column filters, supporting full functionality on mobile.
Responsive guidelines
When establishing UI design strategy, Design Guidelines help everyone find alignment and understanding
optimizing workflow
Action buttons were strategically positioned at the bottom of the screen to enable workflow consistency.
TOGGLE DRAWER FOR FILTERING
Added a drawer toggle to replace the desktop left-column filters, supporting full functionality on mobile.

Responsive guidelines
When establishing UI design strategy, Design Guidelines help everyone find alignment and understanding
optimizing workflow
Action buttons were strategically positioned at the bottom of the screen to enable workflow consistency.
TOGGLE DRAWER FOR FILTERING
Added a drawer toggle to replace the desktop left-column filters, supporting full functionality on mobile.
Responsive guidelines
When establishing UI design strategy, Design Guidelines help everyone find alignment and understanding
optimizing workflow
Action buttons were strategically positioned at the bottom of the screen to enable workflow consistency.
TOGGLE DRAWER FOR FILTERING
Added a drawer toggle to replace the desktop left-column filters, supporting full functionality on mobile.
Responsive guidelines
When establishing UI design strategy, Design Guidelines help everyone find alignment and understanding
optimizing workflow
Action buttons were strategically positioned at the bottom of the screen to enable workflow consistency.
TOGGLE DRAWER FOR FILTERING
Added a drawer toggle to replace the desktop left-column filters, supporting full functionality on mobile.
Responsive guidelines
When establishing UI design strategy, Design Guidelines help everyone find alignment and understanding
optimizing workflow
Action buttons were strategically positioned at the bottom of the screen to enable workflow consistency.
TOGGLE DRAWER FOR FILTERING
Added a drawer toggle to replace the desktop left-column filters, supporting full functionality on mobile.

Impact

Our responsive design efforts transformed John Deere’s Sales Center into a scalable, mobile-accessible platform, enabling dealers to complete key tasks in the field without returning to the office. The adoption of reusable components and mobile-first guidelines improved cross-device usability and established long-term design consistency. By fostering cross-functional collaboration and gaining leadership buy-in, we created scalable solutions that continue to drive efficiency and success across global teams.

A FigJam file illustrating my facilitation of the Mobile Design Guideline planning process.