SAP Business Network
Purchase Order
Project Details
Project Title: SAP Business Network Purchase Order Enhancement (Phoenix Project)
Duration: May 2023 – Jan 2024
Role: Design Lead (End-to-End Designer)
This project focuses on enhancing the Purchase Order (PO) page within the SAP Business Network (SBN). The PO page serves as a pivotal tool for both buyers and suppliers, enabling them to initiate and manage various business transactions such as Order Confirmations (OC), Advanced Shipping Notices (ASN), and Invoices (INV).
The enhancement aims to address challenges related to usability, cross-platform inconsistencies, and outdated design. By aligning with SAP’s UI5/Fiori Elements standards, the project seeks to deliver a modern, user-friendly interface that meets the evolving needs of its users.
Goal
Understand the pain points and key needs of buyers and suppliers to design a user-centered solution that simplifies the PO page layout, ensures cross-platform consistency, and enhances overall funapproachctionality.
Approach
User Interviews and Stakeholder Feedback
Conducted interviews with procurement teams and surveyed buyers and suppliers to identify key issues.
↪ Focused on understanding pain points in managing POs, such as difficulty navigating historical data, redundant line items, and inconsistent layouts
Usability Testing and Platform Analysis
Analyzed how the PO page was displayed across Mac and Windows platforms. Iterative testing revealed discrepancies in font rendering, alignment, and layout functionality.
Data Analysis
Findings from SAP BN’s reports and user feedback highlighted recurring issues:
- 1. Inconsistent Headers
- Headers were overcrowded with actions, confusing users.
- 2. Line Item Redundancy
- Repetitive data entries consumed space and reduced clarity.
- 3. Lack of Accessibility
- Limited RTL (Right-to-Left) language support hindered usability for global users.
- 4. Outdated Design
- The design failed to meet modern user expectations for navigation and clarity.
Existing Problems
1. Lack of Cross-Platform Consistency
Visual inconsistencies across Mac and Windows negatively impacted user experience.
2. Redundant and Overloaded Information
Overwhelming details in headers and line-item sections made it difficult to discern key information.
3. Accessibility Gaps
Insufficient support for RTL languages limited usability for global users.
Problem Statement
"How can we enhance the Purchase Order page to provide a user-friendly, consistent, and accessible experience for buyers and suppliers while aligning with SAP’s modern design principles?"
Solution Exploration
Ideate
[ Solution Exploration ]
Split Pane Design
Pros:
- Familiar layout resembling tools like Outlook.
- Vertical navigation improved information organization.
Cons:
- Requires frequent toggling between panes, which could slow navigation for some users.
Nested Table Design
Pros:
- Clean, single-window layout.
- Organized data presentation and better use of screen space.
Cons:
- Slightly less intuitive for first-time users unfamiliar with the format.
Chosen Approach
A hybrid solution combining the strengths of both designs:
Split Pane–
Retained for familiar navigation.
Nested Table–
Integrated for better data organization and efficiency.
Prototype and Progress
Initial Prototype
Designed using UI5/Fiori Elements standards.
Included: ↪ Consistent headers, footers, and alignment for cross-platform compatibility. ↪ Simplified navigation elements and streamlined layouts. |
November 2023 |
Enhancements in Progress
Accessibility
–
Implementing RTL support for global users.
Pagination
–
Improving line-item navigation and filtering capabilities.
Dynamic Updates
–
Simplifying the process of viewing and managing PO updates.
|
|
The Synthesis
Testing & Validation
Process Overview
Testing and validation were conducted to ensure that the redesigned Purchase Order (PO) page and features met user expectations, achieved consistency across platforms, and provided an optimal user experience. The research involved usability testing, synthesis, and insights derived from quantitative and qualitative data.
Key Insights from Testing
Split Pane Design
Users highlighted familiarity, efficient navigation, and better data analysis.
Split Pane Design (41% Preferred)
Nested Table Design
Users appreciated the cleaner, more organized layout and efficient use of screen space.
Split Pane Design (41% Preferred)
Consistency
Discrepancies between Mac and Windows platforms were resolved by adjusting font rendering, alignment, and CSS interpretations.
Result:
97% consistency across platforms after adjustments, reducing complaints by 15% compared to the initial design.
Accessibility Enhancements
Testing with RTL (Right-to-Left) languages like Arabic and Hebrew revealed significant comprehension improvements.
Result:
20% increase in usability ratings from non-English speaking participants.
Pagination
75% of users preferred the design with max-line limits, finding it easier to navigate large datasets.
Table Layout
Design B was favored for its concise organization, reducing time spent searching for information by 30%.
Header Design
Integrated status charts and version tracking were evaluated positively by 68% of users, who found it convenient to see all key information in one place.
- Usability Testing
-
↪ Conducted across 6 participants representing both buyers and suppliers.
↪ Platforms tested: Mac and Windows.
↪ Tools: Click tracking, time-on-task measurement, and satisfaction surveys. - Affinity Mapping
- ↪ User feedback was categorized into strengths and challenges using affinity diagrams to synthesize recurring themes.
- A/B Testing
-
↪ Compared Design A (Split Pane) with Design B (Nested Table).
↪ Results showed Design B preferred by 59%, highlighting better data organization and less scrolling. - Iterative Improvements
- ↪ Adjusted based on feedback to align with user needs, ensuring the final design minimized pain points identified in early testing.
Outcomes
Unified User Experience
The updated designs ensured users could seamlessly interact with PO data, reducing confusion by 25%.
Improved Accessibility
Enhanced support for global users, with RTL language improvements raising satisfaction scores among Arabic-speaking users by 20%.
Optimized Navigation
Pagination and table layout updates significantly reduced time-on-task by an average of 30 seconds per task.
Outcomes & Learnings
Achieved uniform layouts and navigation across Mac and Windows platforms.
↪ Impact: Enhanced user satisfaction and reduced confusion.
2. User-Centered Design
Integrated feedback from buyers and suppliers to ensure the design aligned with their needs.
↪ Impact: Improved clarity and reduced support requests related to PO navigation.
3. Accessibility
Implemented RTL support to improve inclusivity for global users.
↪ Impact: Expanded usability across key markets, especially in regions using RTL languages.
4. Streamlined Information Hierarchy
Reduced redundant information and improved clarity in headers and line-item details.
↪ Impact: Enabled faster navigation and reduced cognitive load for users.
