Legacy to modern

AFC Web Portal & App re-design Project

Overview

Re-design of the AGCO Fin*ance web portal, focusing on enhancing the user experience for channel partners. The project aimed to modernize the interface, transitioning from a legacy design to a more visually appealing and functional platform. This redesign incorporated AGCO's newly introduced brand colors, fonts, and updated brand guidelines, ensuring a cohesive and fresh look and feel across the portal. The process included research, wireframing, prototyping, user testing, and iterative design adjustments, with the goal of creating a more intuitive, user-friendly experience while maintaining alignment with AGCO's brand identity.

Duration: 6 months

The Problem

The existing AGCO Fin*ance web portal had a legacy design that did not align with modern usability standards, making it challenging for channel partners to efficiently navigate and complete key tasks. The outdated interface lacked visual appeal, had inconsistent branding, and did not provide an intuitive user experience. As AGCO introduced new brand guidelines—including updated colors, fonts, and design principles—there was a clear need to modernize the portal to enhance usability, improve workflow efficiency, and create a seamless digital experience for channel partners.

Goal

The primary goal of the AGCO Fin*ance web portal redesign was to transform the user experience for channel partners by implementing a modern, intuitive, and visually appealing interface. This involved:

Enhancing usability through research-driven design decisions.
Aligning the portal with AGCO’s new brand identity for a consistent and cohesive look.
Improving navigation and accessibility to streamline workflows.
Conducting user testing and iterative refinements to ensure an optimal experience.

My Roll

As a UX/UI Designer, I was responsible for leading the user experience and interface design efforts to modernize the AGCO Fin*ance web portal. My focus was on creating a visually appealing, intuitive, and user-friendly platform that aligned with AGCO’s updated brand guidelines while enhancing the overall usability for channel partners.

Responsibilities

User Research & Analysis: Participated actively in business requirement meetings along with project PO and SMEs with lead developers for user research to understand the challenges faced by channel partners.
Analyzed feedback and usability issues from the legacy system to identify key areas for improvement.

Created low-fidelity wireframes to explore various layout structures and user flows.
Designed interactive prototypes to validate concepts and gather user feedback before final implementation.

🔹 UI Design & Brand Integration

Developed high-fidelity UI designs incorporating AGCO’s new brand colors, typography, and design principles.
Ensured consistency in visual elements across the platform for a cohesive user experience.

🔹 Usability Testing & Iteration

Gathered insights from usability tests done by business / channel partners to identify pain points and areas for refinement.
Iteratively improved designs based on test results, stakeholder feedback, and best UX/UI practices.

🔹 Collaboration & Handoff

Worked closely with developers, product managers, and other stakeholders to ensure seamless design implementation.
Provided detailed design specifications and assets for development handoff.

Understanding business requirements

The redesign of the AGCO Fin*ance Web Portal was driven by the need to improve the user experience for channel partners while ensuring alignment with AGCO’s updated brand identity. The existing platform was outdated, with usability challenges that impacted efficiency, navigation, and overall engagement. To address these concerns, the following key business requirements were identified:

User Pain Points

Improved Functionality & Interaction Design

Implement interactive elements and better feedback mechanisms to enhance usability.
Ensure the design supports seamless data input and retrieval, improving efficiency for daily tasks.
Introduce clear call-to-action buttons for quicker decision-making.

Modernization of User Interface (UI)

Implement a clean, modern design that aligns with AGCO’s updated brand guidelines (new colors, typography, and design principles).
Improve visual hierarchy and readability to enhance user engagement and accessibility.
Optimize UI elements for a consistent look and feel across devices (responsive design).

Enhanced User Experience (UX) for Channel Partners

Redesign the navigation structure to provide a more intuitive and streamlined workflow.
Improve the accessibility and ease of onboarding new users into the platform.
Reduce friction in key user tasks, such as application processing, status tracking, and fin*ance management.

Requirement sample

Sample document:

Got functional / requirements document(s) from business highlighting key areas of improvements with other details in the form of Power-point slides and excel sheets.

Branding guidelines

Sample document:

While having main DLL design system to refer additionally got updated Business vertical specific branding guidelines with newly introduced brand primary and secondary colors.

Getting started

Worked with PO to create Project specific EPICs, Features and User Stories (Sprints)

To ensure a structured and agile approach to the redesign, I closely collaborated with the Project Product Owner (PO) to break down the assignment into actionable tasks. We began by defining a high-level EPIC that captured the overarching goal of modernizing the AGCO Fin*ance web portal.

From this EPIC, we identified key features such as:

Revamped navigation & UI improvements for a seamless user experience.
Enhanced homepage / dashboard with better data visualization for quick decision-making.
Responsive design implementation for multi-device accessibility.
User-friendly finance application process to reduce friction.
Consistent branding to align with AGCO’s new guidelines.

Each feature was further broken down into user stories, focusing on specific functionalities and enhancements. These user stories were then added to the Sprint Board as Product Backlog Items (PBIs), ensuring a structured and incremental development process. By working in small, iterative sprints, we could validate each design improvement, gather feedback, and make necessary refinements—ultimately delivering a more intuitive and user-friendly experience for channel partners.

Legacy to Modern

Legacy interface

New interface

Refining designs after Usability Test Findings

Load time issue

It has been identified that some of the images on the web portal were causing pages to take more load time (Partial view) hence, taken out the banner and background images and used fill color insted.

Timeline function

Added highlight function on the time-line / user journey section as it was introduced as per business requirement but it was read only and informative. Usability is increased by adding highlight to the milestone like step 1, step 2 for the completed part.

Customized FAQ section

For better user experience, FAQ section is made always expanded and dynamic (FAQ shows topics related to the user journey part they are currently on) so it became handy and more helpful for channel partners to refer.

Takeaways

Impact

The AGCO Fin*ance Web Portal redesign significantly improved the user experience for channel partners by enhancing usability, visual appeal, and workflow efficiency. The key impacts included:

✔ Improved Navigation & Workflow Efficiency – A more intuitive interface reduced the time taken to complete key tasks, enabling channel partners to onboard users and process finance applications faster.

✔ Enhanced Usability & Accessibility – A modern UI with clear information hierarchy, better contrast, and responsive design improved accessibility across devices, making it easier for users to interact with the platform.

✔ Consistent & Cohesive Brand Experience – The integration of AGCO’s new brand colors, typography, and UI elements created a more trustworthy and professional look, strengthening brand identity.

✔ Higher User Engagement & Satisfaction – The user-centered design approach, combined with iterative testing, led to an increase in adoption and overall satisfaction among channel partners.

✔ Reduced Learning Curve – With an improved user flow and simplified interactions, new users could quickly get onboarded without extensive training, leading to higher efficiency in daily operations.

Takeaways as a UX Designer

🚀 Breaking Down Complexity into Simplicity – This project reinforced the importance of simplifying complex workflows while maintaining functionality. Creating structured user stories helped streamline design decisions.

🎯 The Power of User Research & Testing – Conducting usability tests with actual channel partners provided valuable insights that guided design iterations and helped refine the final experience.

🎨 Balancing Branding with Usability – Integrating AGCO’s new branding elements while ensuring a great user experience required a thoughtful approach, emphasizing both aesthetics and functionality.

🤝 Collaboration is Key – Working closely with the Product Owner, developers, and stakeholders helped align expectations and ensure smooth implementation of design changes.

🔄 Iterative Design = Better Results – The agile approach allowed for continuous improvements based on real-time feedback, ensuring that each iteration brought the platform closer to an optimal user experience.

This project strengthened my problem-solving, collaboration, and design strategy skills, reinforcing my passion for creating intuitive and impactful digital experiences. 🚀

Also worked on :

AGCO Fin*ance Mobile app as a separate project

Project Description:

Led the redesign of the AGCO Fin*ance mobile app, focusing on enhancing the overall user experience with a refreshed look and feel. The main objectives were to modernize the app's interface while introducing a new Dark Mode feature for improved accessibility and user preference. The project involved a thorough review of the app's current design, followed by the integration of new UI elements, visual styles, and color schemes, ensuring consistency with AGCO's branding while improving usability and aesthetics across both light and dark modes.

Key Responsibilities:

Conducted a detailed design audit to identify areas of improvement in the app’s existing interface.
Designed and implemented Dark Mode to provide users with an alternative, energy-efficient viewing option while maintaining accessibility and legibility.
Updated the overall visual design of the app by introducing modern UI components and aligning with AGCO’s brand guidelines.
Created high-fidelity prototypes and visual designs, ensuring consistency across different device sizes and platforms.
Collaborated closely with the development team to ensure seamless integration of the new features and interface designs.
Gathered feedback to refine the design, improving user satisfaction and engagement based on business requirement.

Thank you for reviewing this project. If you’d like to see more, please navigate to 'Case Studies' and click on specific project to view complete 'case study'.

Page updated

Google Sites

Report abuse