Enterprise UX | SAP Fiori | Process Automation | Scalable Design Systems

Transitions – SAP Fiori / UI5

COMPANY

John Deere

ROLE

UX Designer

EXPERTISE

UX/UI Design

YEAR

2019-2021

Overview

At John Deere, dealership transitions—when one dealer transferred assets, accounts, or equipment to another—were a major bottleneck due to outdated manual processes in Excel, Access, and paper-based workflows. These inefficiencies led to:

Slow processing times due to manual data entry and cross-referencing.
Frequent errors from inconsistent data input.
Lack of visibility for dealership teams managing transitions.
Confusion among users due to fragmented workflows.

Business Need

John Deere needed to move dealership transition workflows into SAP Fiori to:

Streamline processes and reduce manual workload.
Reduce errors and improve data integrity.
Improve usability for finance and transition teams and dealership managers.
Ensure scalability for future parts integration (credits & accounts as well)

Initial onboarding for the project involved some requirements and wireframes:

My Role & Responsibilities

As the sole UX Designer on this project, I was responsible for:

Defining a UX framework for SAP Fiori—since none existed at John Deere.
Researching existing workflows to identify pain points and user needs.
Creating an intuitive UI using SAP UI5 components to reduce dev effort.
Ensuring seamless integration between dealership operations and SAP backend systems.
Providing a scalable UX pattern that could be used for future SAP-based tools.

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

The legacy solution was outdated and difficult to navigate due to convoluted language and complex workflows.

My Approach: UX Research & Design Process

1. Understanding the Legacy System

Watched dealership transition workflow recordings to analyze pain points.
Audited existing Access & Excel-based workflows to document inefficiencies.
Conducted stakeholder interviews to define business goals and user frustrations.

2. Designing a Scalable SAP Fiori Solution

Explored SAP UI5 component libraries to identify pre-built patterns and avoid unnecessary customization.
Created initial wireframes & interactive prototypes in Figma, incorporating Fiori design principles.
Iterated with feedback from key stakeholders & users to refine usability.

3. Developer Collaboration & Testing

Worked closely with engineers to ensure smooth SAP UI5 implementation.
Provided detailed design documentation & component specs to accelerate dev work.
Ran usability testing sessions with transitioning dealership teams to validate improvements.

1. Understanding the Legacy System

Watched dealership transition workflow recordings to analyze pain points.
Audited existing Access & Excel-based workflows to document inefficiencies.
Conducted stakeholder interviews to define business goals and user frustrations.

2. Designing a Scalable SAP Fiori Solution

Explored SAP UI5 component libraries to identify pre-built patterns and avoid unnecessary customization.
Created initial wireframes & interactive prototypes in Figma, incorporating Fiori design principles.
Iterated with feedback from key stakeholders & users to refine usability.

3. Developer Collaboration & Testing

Worked closely with engineers to ensure smooth SAP UI5 implementation.
Provided detailed design documentation & component specs to accelerate dev work.
Ran usability testing sessions with transitioning dealership teams to validate improvements.

This project required handling ambiguity, understanding technical constraints, and streamlining enterprise workflows—all critical skills for designing large-scale enterprise applications.

Design iterations helped streamline the transition workflow by removing unnecessary complexity.

Here's a process piece showing the creation of the Transitions Location tab:

The Final Solution: Streamlined SAP Fiori Application

Key Features & UI Enhancements

Dashboard with clear navigation – Users could easily find ongoing transitions.
Smart filtering & search – Allowed users to quickly locate projects by date, dealer, or status.
Context-aware checklists – System auto-generated required steps based on transition type.
Improved forms & automation – Reduced manual data entry & errors.
Seamless integration with SAP – Ensured smooth backend data transfer.

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.

Logic we were able to pull in from SAP was able to trigger a dynamic division selection:

Impact & Business Outcomes

Faster processing time—streamlined workflows reduced transition delays.
Reduced manual errors—form automation improved data accuracy.
Higher adoption of SAP Fiori applications—dealership teams found the interface intuitive.
Created a reusable UX pattern—establishing a foundation for future SAP UI5 projects.
Improved cross-team efficiency—clear documentation enabled faster dev cycles.

This project successfully transformed a fragmented, manual process into an automated, scalable SAP Fiori workflow, enhancing both user experience and operational efficiency.

Lessons Learned

Key Takeaways

Navigating ambiguity – I built a UX framework for SAP Fiori from scratch.
Enterprise UX at scale – Balancing business needs, engineering constraints, and usability.
Working within design systems – Adapting SAP UI5 components while ensuring user-friendly interfaces.
Driving adoption in complex systems – Ensuring finance teams and non-technical users found the system intuitive.