top of page

EIS Group Design System

Building EIS Group Design system following atomic design and collaborative process. Building Insurance platform / product it was very important to make sure our experiences have a consistent look and feel, not just in our design specs, but in production. EIS Design system helped us to make our insurance platform:

​

Simple

​

Clear and consistent copy, interface elements and feedback create an easy-to-understand brand experience across platforms. 

​

Consistent

​

Consistency needs to achieve both in terms of visual design and experience. The essence of being consistent is to be able to replicate the same action or element multiple times, and still be able to support the user with achieving the task.

​

User Centrc

​

Usability goals, user characteristics, environment, tasks and workflow of a product, or process are given extensive attention at each stage of the design process.

​

Design System helped to unite all teams across the company around common components and a common language. It also helped to make sure we're all spending time in the right place - standardising reusable components and clearly defining behaviours means that both designers and engineers are spending less time debating the look and feel of each screen, and more time focusing on the problems solving.

​

Implement Processes

​

We started by componentizing all existing app patterns using the atomic design approach. We started by defining a grid, including different spacing units. At the same time we audited all font styles, colors and other atom-level components. With atomic design approach, we did define atomic components and build molecules out of them. We named them Core components.

A Core & Common component is a standalone UI element designed to be reusable across UI platform.

Its goal is to do one thing well while remaining abstract enough to allow for a variety of use cases. Developers can use them as building blocks to build new user experiences.

​

The Process of building EIS Group Design System

​

  1. Designer/BA creates Jira new feature request ticket and assign to the UX design team. (Specify what epics or elements to mention in the ticket).

  2. DSM team will review, prioritize each requests and add due dates.

  3. DSM team will create new, or improve existing core/product specific components

  4. DSM team will upload component + documentation to DSM and the ticket will be created to the UI Infra team.

  5. Dev team BA creates component requirements in wiki.

  6. Dev team will develop & QAs the component. Link to DSM library.

  7. Product BA links Common Component wiki with product specific requirements.

​

Core Components Examples

  • Button

  • Checkbox

  • Icon

  • Tags

  • Badge

  • etc.

Common Components Examples

  • Global Navigation

  • Side Navigation

  • Sidebar - Tasks, Notes, Activities

  • Form template

  • Cards

  • Table

  • etc.

DSM Library​

​

Each component description structure included:

​

  • Usage

  • Placement

  • Behavior

  • Spacing

Common components are combination of core components. During the EIS insurance platform building process we came up with building more complex common components which involved the need of bringing the flexibility to have different variations of them.

Once we had established Core components, we started to build common components. Common Components are the product specific building blocks and used across some or all products. Common components can’t be broken down into granular pieces without losing their meaning.

​

bottom of page