Skip to main content

Contributing

This guide describes the whole process of ideating, designing, and contributing components, patterns, and templates for the SAP Engagement Cloud Design System.

If you have a question regarding this process, reach out to the Design System team via Slack: #team-design-system

Constraints​

Try to keep these in mind when designing for SAP Engagement Cloud:

1. Utilize off-the-shelf solutions​

You should try using the components present in the SAP Engagement Cloud Design System in your design, in the way they were meant to be used.

When used properly, the Design System should dramatically help both the design and implementation phase of the product — its purpose is to remove overhead, not to limit you in your work.

2. Think systematically​

Avoid designing and implementing "one-off" interfaces that serve only a single use case, and couldn't be used properly anywhere else.

It saves a lot of development time making components which are reusable in the future — not just by you, but by other developers as well.

3. Iterate and grow​

The Design System is not carved in stone — it can be changed and expanded! So if you have a specific need, don't hesitate to discuss it with the Design System team.

Existing components can be expanded with new functionalities, and new components can be added, too — as long as they serve the system.

Expanding the Design System​

First of all, ask yourself the following questions:

  • Do we really need a new component for this?
  • Can't another similar component be used instead, with trivial compromises?
  • Can't another existing component be expanded to achieve the goal?
  • How could this component be used elsewhere?

To have all the info to answer these questions, please:

  • Ask the Design System team for advice via Slack (#team-design-system), email, or in person.
  • Browse this Design System page for a comprehensive list of components and patterns.
  • Take a look around SAP Engagement Cloud for existing components and patterns.

Specify your needs​

Write a short brief about the component:

  • Goal: what sort of problems will this component solve?
  • Context: describe the context the component will be in, e.g. on which page.
  • Behaviour: describe how the component will behave.
  • Sketches: if there are any visual concepts or examples from other UIs, please attach those images.

Example brief:

Goal: The user should be able to quickly add and remove entries from a list of versions. We'd need an expandable list component for this.

Context: While editing an email campaign, the user can make multiple versions for testing on the "Versions" side panel.

Behaviour: The list will contain all the existing versions. Each list item has a few action buttons — edit, rename, remove. The user can expand the list with new versions by pressing the "plus" button.

Guidelines for designing a new component​

  • Use as many atomic parts as you can (e.g. use our buttons instead of coming up with new buttons).
  • Always aim to make the new component part of the system — both visually (colours, borders, padding, shadows) and functionally (flow, interactions).
  • Check in with the Design System team often!
  • Follow the naming/prefixing guideline.

FAQ​

Why should I use the Design System instead of making my own UI from scratch?​

Consistency: SAP Engagement Cloud is a huge suite with many different apps and pages. To keep all these pages coherent, we need a common system. If every team did their own thing, the differences would confuse and frustrate users.

Speed: SAP Engagement Cloud ships a lot of new features. By using ready-made components from the Design System, you can cut out the repetitive work and focus on delivering value.

How long does it take for my component to appear in the Design System?​

It depends on the complexity — designing, developing, and testing even a simple component usually takes a few iterations (around 2 weeks). Please make sure to check in early and often!