Loading...
Skip to Content

SAP Business Network

NextGen MVP Prototype and Customer Journey

Project Details

Project Title: NextGen MVP 2024 Prototype and Customer Journey

Duration: January 2024 – Ongoing

Role: Design Lead (End-to-End Designer)

This project serves as a single source of truth for designs leveraging Fiori Elements and UI5 for NextGen MVP 2024. It consolidates design efforts into one comprehensive reference to ensure consistency and efficiency across all ongoing and future initiatives. Despite the diverse services being designed by various design teams and individual designers, a holistic view to align these efforts has been lacking—this project addresses that gap.
Through this end-to-end process, cross-functional teams can stay aligned on the same page, enabling a shared understanding of completed designs, outstanding work, potential issues, and overall priorities. This streamlined approach ensures that everyone can effectively plan, monitor, and navigate the progress of NextGen MVP, fostering collaboration and clarity across teams while driving seamless execution.

Design Goals

Solve for Users First


Design intuitive, task-focused screens to address common user scenarios effectively.

Leverage Fiori Elements


Reuse patterns from other NextGen applications where applicable to ensure consistency.

Promote Scalability


Validate and incorporate data-driven freestyle UI5 components for flexible and scalable designs, collaborating with central teams to enhance standards.

Cross-Functional Collaboration

Enhance communication between Design, PM, Architecture, and Development teams to streamline the end-to-end design process.

Empathize

Understand the customer journey, user pain points, and opportunities for improvement.

Approach

Customer Persona Development

•  Emma Mitchell, Procurement Manager at ABC International, was identified as the primary persona.
↪  Focused on managing ethically sourced materials and streamlining luxury goods supply chains.
↪  Utilizes SAP Business Network to optimize procurement processes.

Feedback Collection


•  Engaged with stakeholders, including Procurement Managers and Suppliers, to gather insights about their pain points with Gen1/Gen2 applications.

Common Pain Points


•  Navigation challenges between Gen1/Gen2 and NextGen screens.
•  Lack of seamless workflows for unified login, procurement, and email notifications.
•  Difficulty in adopting new processes due to disjointed systems.



Define



Problem Statement:

"How can we harmonize user experiences across NextGen and legacy systems while delivering scalable, task-oriented workflows that improve customer outcomes?"

Key Challenges:

1. Cross-Functional Alignment
Ensuring seamless collaboration and alignment across multiple teams and funnels to enable smooth transitions throughout the user journey.
2. Consistency in Design
Addressing inconsistencies in screen interactions and layouts between legacy systems (Gen1/Gen2) and the modernized NextGen interfaces to maintain a cohesive user experience.
3. Adaptability in Dynamic Environments
Supporting iterative and evolving designs to accommodate the rapidly changing needs of the product and users.

Ideate


[ Solution Exploration ]

End-to-End Experience Mapping:

Mapped Emma’s journey to highlight gaps in the user experience from login to procurement.

Deep-Dive Application Design:

Designed key prioritized screens for:
•  Unified Login
•  Purchase Order Management
•  Manage Email Notifications
•  Invoice Approval

Key Approaches:


  • Consolidated navigation through cross-functional collaboration.
  • Built reusable Fiori Elements and UI5 components for scalability.
  • Conducted A/B testing to validate user preferences for Nested Table vs. Split Pane designs.

  • Solution Exploration


    Prototype


    Living Artifact

    •  A high-level journey map for prioritized screens with linked personas and release details.
    •  Clickable deep-dive experiences for testing specific workflows (e.g., Unified Login, Purchase Order).
    •  Integrated Gen1/Gen2 and NextGen screens to showcase the transition experience.



    Key Features

    •  Anchor navigation and filters for faster access to sections.
    •  Unified login experience across applications.
    •  Intuitive designs for procurement management and relationship workflows.






    Implement

    Key Actions:

    Prototype Maintenance:

    • •  Created branch files monthly for updates.
    • •  Ensured all updates were integrated into the main file post-review by Olivia and Danielle.

    Guidelines for Collaboration:

    • •  Documented prototype updates and processes in the wiki.
    • •  Simplified update tracking with tagging for team-wide transparency.

    Design-Development Alignment:

    • •  Collaborated with developers to finalize designs and address scalability challenges.

    Visual Unification Hub


    Visual Layout Features



    Unified Branding

    Consistent headers, footers, and layouts for all screens.

    Platform Compatibility

    Cross-platform optimization for seamless navigation.

    Global Accessibility

    Enhanced RTL support for global inclusivity.

    Dynamic Workflows

    Designed for scalable and flexible navigation.

    Cross-Screen Consistency

    Streamlined transition between Gen1/Gen2 and NextGen screens.

    Final Thoughts

    As the design lead, I ensured that all designs adhered to NextGen principles while addressing real user pain points. By collaborating with cross-functional teams and leveraging data-driven insights, this project demonstrates how thoughtful design can transform user workflows and improve customer satisfaction.

    Full Case Study