Build your apps with speed and consistency

Eco Components reduce the complexity involved in building web applications by providing pre-designed, high-level components that get your application off the ground and in customers hands more quickly.

DTN at work

Eco is the DTN open source internal design system.
Created for DTN developers by DTN developers.

Contribute to Eco

Eco, as a platform, is constantly evolving as business and application needs change. Perhaps you identify a bug or an opportunity to enhance a feature, submit a PR and improve the DTN toolkit for yourself and your colleagues. Learn more about what can be contributed to Eco and the process to do so on our Contributing page.

WHAT IS THE ECO TEAM?

We are developers that have been tasked with creating the foundation on which all DTN apps are to be built. We don't build apps; we provide the framework and components that dev teams need to build and customize apps. Having all DTN teams use Eco layouts and components ensures that clients receive a similar look, feel, and experience when moving between different DTN products. Teams can customize apps, but the core elements of the app should feel similar to other DTN apps.



WHERE DOES THE ECO TEAM FIT INTO THE DEV PROCESS?

That's a great question! The Eco Dev team works closely with the UI/UX team and product owners during the initial design process. We also provide the Eco Starter Kit and all of the components needed to create an app. We don't build apps for teams, we supply the tools. We are here to help though, so if you notice that any of our offerings could use some work or you need additional help, just let us know!



HOW DO I WORK WITH ECO?

Everything you need is housed on this website. This is where you can...

UX front and center

The Eco Component Library has UX design baked in. Each and every component is built to meet the needs of the end user, ensuring their experience is free from common pain points. These UX-based design decisions follow these key principals.

Consistency

Follow standard conventions so that users don’t have to wonder what different actions, words, or situations mean.

Efficient

Provide multiple ways to accomplish tasks and allow users to tailor their actions and outcomes.

Relevant

Showcase only relevant and needed information, ensuring that nothing gets in the user’s way.

Clear

Express error messages in plain language with direct and meaningful instructions to get the user back on track.

Prevention

Help users avoid error-prone actions by ensuring the proper confirmations and paths are presented before an action is committed.

Freedom

Give users control over the path that they are taking in your app, providing a sense of confidence and minimizing frustration.

Visibility

Keep users informed about what is happening in the app through timely and appropriate feedback.

Familiar

Tailor the designs to the user’s so that they feel welcome and engaged in the process.

Ready to dive in?Get started with Eco today!