1
Users required a unified template to reduce confusion when interacting with different SAP documents.
SAP Business Network
Email Template Design Revamp
Project Details
Project Title: SAP BN Email Template Design Revamp
Duration: May 2024 - Ongoing
Role: Design Lead (End-to-End Designer)
This project involved redesigning email templates based on SAP's central team HTML, tailored to the BN (Business Network) team’s specific needs. After two years of previous attempts, the project was reassigned to me to start fresh, as it was initially assumed that the central team’s template would suit all SAP organizations.
The goal was to create a solution that ensured consistency and unity with SAP’s central standards, provided a seamless experience across different platforms, and improved accessibility for global communication, while addressing the BN team’s specific use cases.
Goal
Understand the primary issues and needs of BN team members and SAP users when utilizing email templates, to design a user-centered solution.
Approach
Interviews and Feedback
Collected interview materials from documentation stakeholders, including the Purchase Order (PO) and Invoice (INV) teams, to understand their needs and issues with the current design. Additionally, gathered feedback from Qualtrics surveys to capture broader user experiences and identify recurring issues across documentation teams.
Research Data Analysis
Analysis of recurring issues from SAP BN’s report revealed that email-related issues were reported 54 times since 2022. These issues highlighted problems with visual inconsistencies across platforms, technical glitches, and outdated links or content.
Existing Problems
SAP had not maintained a unified email template for over 10 years, leading to inconsistencies across different documents and services. Additionally, the lack of alignment with emails provided by SAP’s central team contributed to a disjointed brand image.
1. Lack of Unity
Various teams were using different templates that were not based on central team HTML, making it challenging to maintain consistency in SAP’s brand identity.
2. Inconsistencies
The templates appeared differently on Mac and Windows platforms, negatively impacting user experience.
3. Accessibility Issues
There was insufficient RTL (Right-to-Left) language support for global users, limiting communication effectiveness.
Define
Problem Statement:
"How can we create redesigned email templates that maintain SAP's unity through central team HTML while meeting BN's specific use cases?"
-
Key Challenges:
1. Ensuring Cross-Platform Consistency - Achieve a consistent visual experience across both Mac and Windows.
- 2. Maintaining Unity with the Central Team
- Base the templates on central team HTML to ensure brand unity.
- 3. Improving Accessibility
- Enhance support for RTL languages to accommodate global users.
Solution Exploration
Ideate
[ Solution Exploration ]
[ Option 1 ]
Develop a New Template (NextGen Template)
Pros: Allowed for customization specific to BN use cases and integration of modern design standards.
Implementation: Created new template components as needed to address unique BN requirements that the central HTML could not fully support.
[ Option 2 ]
Modify Existing Central Team HTML:
Pros: Leveraged SAP’s existing central templates to ensure brand unity and consistency across the organization.
Implementation: Used the central HTML as a foundational structure, enabling quicker implementation and easier maintenance.
Result
This combined approach maintained SAP’s unified brand identity while allowing flexibility to address the specific needs of the BN team. By using the central HTML as a base and adding BN-specific customizations, we achieved a consistent and scalable template solution.
Prototype
Version 1.0 Initial Prototype
Core Elements: Based on the central team HTML, Version 1.0 included standardized text formatting, headers, and footers to ensure consistency.
Consistency: Adjustments were made to font size and alignment to provide a consistent experience across Mac and Windows platforms. |
Completed on August 16, 2024 |
Update
Enhanced Bullet Styles: Added bullet styles such as Standard, Label-Detail, Simple, Numbered, and Icon to improve content organization for various use cases.
|
September 4, 2024 |
Current Progress
Attachment Handling: Currently designing improvements to attachment handling, aiming to increase template flexibility and optimize user experience.
|
The Synthesis
Test
User Testing
• Conducted testing across various platforms (Mac and Windows) to verify visual consistency and validate RTL language accessibility.
Feedback and Improvements
• Adjusted alignment and font sizes based on user feedback, resolving discrepancies between Mac and Windows platforms.
• Added RTL language support, enhancing accessibility for global users.
• Added RTL language support, enhancing accessibility for global users.
Outcomes & Learnings
[ Assumptions & Learning Goals ]
Validate that a single, cohesive design across all templates improves user understanding and reduces errors.
2
Cross-platform consistency (Mac and Windows) is critical for user satisfaction, given SAP's global usage across various operating systems.
Identify specific inconsistencies on different platforms and determine the best practices for handling cross-platform design issues.
3
Current templates lack effective support for Right-to-Left (RTL) languages, limiting usability for non-English speakers, especially in regions where RTL languages are dominant.
Test how RTL support can improve accessibility and ensure the templates meet global standards for inclusive design.
[ Key Findings ]
1
Unity and Consistency Are Essential:
Finding: Feedback from multiple stakeholders highlighted that using different templates for various documents caused user confusion. By redesigning the templates to align with the central team’s HTML, I created a unified style that reduced inconsistencies, clarified SAP’s branding, and improved user trust in the communication format.
Impact: This unity across templates allowed users to recognize and interact with SAP emails more confidently, leading to fewer support requests related to confusion or misinterpretation of email content.
2
Cross-Platform Consistency Increases User Satisfaction:
Finding: During testing, I observed noticeable discrepancies in email display across Mac and Windows due to variations in font rendering and CSS interpretations. Through iterative adjustments to alignment, font sizes, and spacing, I ensured that the templates displayed consistently across platforms.
Impact: As a result, the user experience became more predictable, reducing complaints and enhancing user satisfaction with SAP’s communications.
3
Bullet Style Variability Supports Diverse Content Needs:
Finding: Adding multiple bullet style options (Standard, Label-Detail, Simple, Numbered, Icon) allowed for flexible content organization. This helped meet the varied communication needs of different SAP teams, from detailed information lists to simple, concise bullet points.
Impact: The bullet style variations improved readability and allowed teams to tailor the information hierarchy, ultimately making emails easier to scan and understand.
4
Accessibility Enhancements Through RTL Support:
Finding: Integrating RTL language support proved to be a critical step in making SAP emails accessible to a global audience. Testing with Arabic and Hebrew users showed that the new templates enabled smoother comprehension and reduced errors in RTL settings.
Impact: This support for RTL languages expanded SAP’s reach and usability in global markets, ensuring that email templates were inclusive and accessible to non-English speakers.
5
Outdated Links and Content Were a Significant User Pain Point:
Finding: Users reported that outdated links and mismatched content in templates made it difficult to find current information, especially when templates were not updated alongside SAP’s platform changes. By designing templates to simplify updates and linking them directly to dynamic content where possible, I addressed this issue.
Impact: This improvement reduced frustration and made emails a reliable source of up-to-date information, decreasing the frequency of support requests related to broken links or outdated content.
Overall Visual Layout for Features and Template Variations
Consistency
SAP’s unified branding applied through consistent headers, footers, and formatting across all email templates.Platform Compatibility
Ensures that email templates display consistently across Mac and Windows, providing a seamless user experience on both platforms.Accessibility
Enhanced RTL language support to improve global accessibility and usability for non-English users.Customization Options
Flexible bullet styles (Standard, Label-Detail, Simple, Numbered, Icon) for improved content organization and readability.Attachment Handling
Improved design for handling attachments, providing a better user experience with additional template flexibility.
Text-Only Templates
For straightforward messages requiring minimal formatting, suited for simple notifications.Bullet-Only Templates
Ideal for structured lists and organized content presentation, enhancing clarity for complex information.Text & Bullet Templates
Combines text and bullet points, allowing flexibility for emails with varied content needs.Line Items
Useful for detailed itemized lists, such as purchase orders or invoices, ensuring clarity in complex documents.Logo & Eyebrows
Incorporates logos and contextual headers (eyebrows) to maintain brand consistency and enhance contextual clarity.
Account Management
Use Cases 01
Advanced Ship Notice
Use Cases 02
Invoice Application
Use Cases 03
Operational Report
Use Cases 04
Order Confirmation
Use Cases 05
Purchase Order
Use Cases 06
TPC Application
Use Cases 07
Trading Partner Portal
Use Cases 08
TPS Certification
Use Cases 09
TPS Self-Assessment Questionnaire
Use Cases 10
TPD Core Application
Use Cases 11
User Management
Use Cases 12
SAP BN Email Template Usage Guide
A step-by-step video guide from the project’s internal wiki page, designed to help users of all roles easily understand and utilize the new email templates, showcasing features, customization options, and practical use cases for seamless communication.
