EcoTree Design System

About the company

EcoTree is an European provider of nature based solutions that benefit the environment. Individuals and companies can contribute to the development of forestry and biodiversity projects.

The project

The company’s objective was to redesign the B2B website. A design system was necessary for this task to create reusable components that would be coherent in terms of aesthetics and interaction. The Design System is built based on the Atomic Design methodology, which means building components from the bottom up, from the smallest to sections, templates, and pages.

The components are built with the newest version of Auto-layout and include all measurements such as padding, space between, and information about fixed heights & widths. This results in pixel-perfect UI elements.

Interaction guidelines are included for the development team.

100+ responsive components & section templates.

Finally, within the project, a full library of section templates was created, which helped maintain a good collaboration between the design & development team and accomplish redesigning the EcoTree B2B website.

Thank you for your attention.