This is a sampling of some of the forms and reusable components built using the atoms and molecules of the design system. This allowed the designers to work primary using wireframes and the engineers would implement the appropriate reusable component. When needed, a designer would create a new component and review with the committee to discuss the need and application across the platform.

Basic Form with Inline Help

This shows one of our basic forms with a variety of sections and controls. We implemented a variety of help including inline, on-page, page help, watermark, etc. This examples shows inline help that was available for a column on-hover.

No Data State

For each type of component we designed various states including no and low data, data overflow and standard. This is an example of a grid for which there is no data.

Standard Grid

This is an example of a standard grid used on the platform that has moderate data density. Working in the data industry, the user often has the need to view moderate to high volumes of data. This grid showed a condensed view, allowing the user to crawl to see the details of the asset or its child. It also gave insight to key metrics at a glance.

Basic User Guidance

This form shows examples of basic user guidance with the asterisk for require fields and an on-page validation error that was raised on-save, to inform the user that the connection failed and the record cannot be save.

Scheduler

This is a scheduler that was created to aid in setting schedules for reoccurring events. The use could choose from a variety of recurrences (hourly, daily, weekly, etc) and was able to set an effective date as well as set multiple schedules in the event that it may need to run weekly and on the first and last day of the month, for example.

File Upload Modal

This was requested to allow an administrator to upload users, user groups, translations, etc in administration. This basic yet time-saving functionality allowed the user to upload a file and choose to append or override. Assigned a series of conditions, the upload status would be displayed and validation warnings and errors produced as needed.