EcoOnline Experience


Our goal is to create a consistent experience for every person who interacts with EcoOnline. This starts from something as simple as a website visit or presentation and continues through to using our digital products regularly for their safer workplaces.

From the words and language that we use to the assets and interactions we create, no element of EcoOnline should be overlooked. If we come together and use the content, components, and guides outlined here like a community, we can provide a consistent experience for all of our users. We call this the EcoOnline Experience.




Our Design Principles

These are the guiding principles for designing products at EcoOnline. Stay true to these when working on all projects and you will have taken a large step to help create the EcoOnline Experience.


1. Reduce

Reducing the time taken for a user to complete a task is important, especially for frequently repeated tasks.


2. Value Visual Design

First impressions count.


3. Balance with Simplicity

Unnecessary complexity should be avoided and having products that are easy to understand and use, is certainly a benefit. However, it must not be at the expense of functionality.


4. Design for Forgiveness

It’s ok to make a mistake, or not know exactly what everything does.

Actions taken by the user should be reversible and, in the case that they are not, the action should be guarded with a confirmation/summary to remind the user of their choice.


5. Reduce Clutter

Clutter exists in the form of wordiness, lack of white space, too many elements, unnecessary animation, lack of contrast or organisation and more. We must reduce these visuals or interaction clutter for a better design.


6. Lower Barriers to Usage

With good onboarding and guides we can lower the barrier for using our products.



Who Is This Site For?

Everyone. This design system is intended to unite all of our teams and help us come together to achieve our unified vision for EcoOnline. Having a single point to get all of our guidance and assets is crucial to creating our customer experience (CX).

With a single source of truth we can provide material that will help us create products faster and more consistently. As our teams and products grow, this unified understanding will help us to handle scale efficiently.

This information can also be shared with new acquisitions, new employees and all of our users to help onboard them within EcoOnline.




How do I use this?

Information is broken down into categories.

  • Foundation
  • Components
  • Patterns
  • Content
  • Brand
  • Resources


Each category contains pages of useful information to help you with your project. You will find a mixture of UX guidelines, code snippets, assets and more.

To help break the information down when there is a lot to take in, pages are split into tabs. This should help you get to the information or asset you need quickly. You can also bookmark links to pages and tabs if you need to reference them often.

Familiarise yourself with the information in the design system and continue to refer back as it evolves. If you are working on a project, check with the design system first to help you get started and identify any changes.