UI/UX Guide
These guidelines should be treated as an essential tool for anyone working on behalf of Compensate. The most common use case is integrating Compensate into an online checkout process.
This guide will help you integrate Compensate into your app or service. Although this guide has some definite rules, we welcome you to challenge our thinking. We are constantly working to improve this guide.
For our API documentation,
If you have any questions, comments, or can’t find what you’re looking for, contact us via
Use cases
The most common use cases are Compensate in an online checkout process and Compensate in an online booking process. Compensation is offered either for the actual product/service or for an additional related service, e.g. delivery.
Process flow: Where the component should fit
The following checkout flow represents the common steps and actions the user takes in order to complete an online order or a booking. These steps may vary depending on the design and type of the platform. It is crucial that the user is fully informed on what part of the product/service or order they can choose to compensate. The placement of the Compensate component depends on this as well.
Pre-payment component
Once the placement of the pre-payment component has been decided, the component's UI style should be aligned with the overall style of the platform. The size and structure of the compensation component can vary depending on the design of your platform. There are no one-size-fits-all solutions. Here are some illustrative examples:
The compensation component
The compensation component consists of a clear call to action, opt-in tool for the end-user, and an explainer text. In addition, the Compensate logo, link to further resources, and illustrative images can be used. All components can be customized to match the platform and its specific case needs.
Example CTAs
The compensation call to action needs to reflect your brand and compensation details. It's good to note that the term "carbon footprint" should only be used when you're sure of the emission calculations. Here are some examples:
Compensate the climate impact [of your product]
Compensate the climate impact [of your delivery]
Compensate the carbon footprint [of what]
Add compensation
Choose to compensate
Compensate
Order summary
In the order summary, it's good practice to reiterate the compensation once more.
If both the product/service and the delivery are compensated for, the compensation row should be placed under the product and delivery rows. It's also good to reiterate whether the compensation covers multiple products/services.
Post payment
Post payment is an opportunity to talk about compensation one last time. The checkout confirmation page, receipts, and emails are all great places for this content.
You can inform the user of the impact of their actions, talk about the climate and sustainability efforts of your company, and thank the user for taking responsibility for their carbon emissions. This content can also provide the user an option to learn more about Compensate.