Channels, technologies
and interaction contexts

To optimize people, processes and tools to make the design process
efficient, effective and aligned with Marel's business objectives.

Team

Ángel Martín, Lead Designer

FIELDS

UX, Design system,

Interaction, Content Arquitecture,

Interface design

Channels, technologies
and interaction contexts

To optimize people, processes and tools to make the design process
efficient, effective and aligned with Marel's business objectives.

Team

Ángel Martín, Lead Designer

FIELDS

UX, Design system,

Interaction, Content Arquitecture,

Interface design

Channels, technologies
and interaction contexts

To optimize people, processes and tools to make the design process
efficient, effective and aligned with Marel's business objectives.

Team

Ángel Martín, Lead Designer

FIELDS

UX, Design system,

Interaction, Content Arquitecture,

Interface design

7.000

Employees

30+

Countries with offices

150+

Countries in which operate

7.000

Employees

30+

Countries with offices

150+

Countries in which operate

Reception

Raw Material

Web app

Cutting, deboning

Weighting scales

HMI - IPC

Packing

Prepare orders

Web app

Dispatch

Weighting scales

Desktop - Web app

Overview

Overview

7.000

Employees

30+

Countries with offices

150+

Countries in which operate

7.000

Employees

30+

Countries with offices

150+

Countries in which operate

7.000

Employees

30+

Countries with offices

150+

Countries in which operate

7.000

Employees

30+

Countries with offices

150+

Countries in which operate

Reception

Raw Material

Web app

Cutting, deboning

Weighting scales

HMI - IPC

Packing

Prepare orders

Web app

Dispatch

Weighting scales

Desktop - Web app

Web app

Reception

Raw Material

Cutting, deboning

Weighting scales

HMI - IPC

Web app

Packing

Prepare orders

Dispatch

Weighting scales

Desktop - Web app

The design culture scenario

Current

User Centric

Innovative,

Accessible,

Agile,

Modern

Aspirational

Driven by
technology
Slow,
Inconsistent,
Mini water-fall

The solution

Blue design system

Better

overlaping

Defining the solution

Speed,

consistency

and business

impact

Design system
process

The challenge was to create a visual redesign and a scalable system
around this at the same time.

Design system
process

The challenge was to create a visual redesign and a scalable system
around this at the same time.

Design system
process

The challenge was to create a visual redesign and a scalable system around this at the same time.

Exploration

New look

and feel

New

look and feel

Layouts

examples

Layouts

examples

UX stage

Content

requirements

Behavior

patterns

UI stage

Design

system

Guideline

documentation

UI stage

Design

system

Guideline

documentation

UI stage

Design

system

Guideline

documentation

Solid Foundations as a starting point

The importance of establishing the basic principles and rules that will guide the design and development of products at Marel through coherence, cohesion and efficiency.

Solid Foundations as a starting point

The importance of establishing the basic principles and rules that will guide the design and development of products at Marel through coherence, cohesion and efficiency.

Solid Foundations as a starting point

The importance of establishing the basic principles and rules that will guide the design and development of products at Marel through coherence, cohesion and efficiency.

Foundations

Foundations

Tokens

Tokens

Components

Components

Organism

Organism

Layouts

Layouts

Tokens, from options to decisions

Creating a common language between design and development.
Defining a set of global options to later be able to use specifically

Tokens, from options to decisions

Creating a common language between design and development.
Defining a set of global options to later be able to use specifically

Tokens, from options to decisions

Creating a common language between design and development.
Defining a set of global options to later be able to use specifically

Value

#2C60F6

Level 1

$primary-500

Level 2

$bg-primary-action

Property

Modifier

$bg-primary-action

Variant

Defining the meaning of colors

Defining the colors used throughout the system, including primary and secondary colors, as well as guidelines for text and background contrast.

Defining the meaning of colors

Defining the colors used throughout the system, including primary and secondary colors, as well as guidelines for text and background contrast.

Defining the meaning of colors

Defining the colors used throughout the system, including primary and secondary colors, as well as guidelines for text and background contrast.

Defining the meaning of colors

Defining the colors used throughout the system, including primary and secondary colors, as well as guidelines for text and background contrast.

Defining the meaning of colors

Defining the colors used throughout the system, including primary and secondary colors, as well as guidelines for text and background contrast.

  • ##2C61F5

    Primary

  • #69778E

    Neutral

  • #05A6EE

    Secondary

  • #3AB896

    Semantic sucess

  • #F18C2D

    Semantic warning

  • #E43E3D

    Semantic alert

  • ##2C61F5

    Primary

  • #69778E

    Neutral

  • #05A6EE

    Secondary

  • #3AB896

    Semantic sucess

  • #F18C2D

    Semantic warning

  • #E43E3D

    Semantic alert

  • $primary-50

  • $primary-100

  • $primary-200

  • $primary-300

  • $primary-400

  • $secondary-50

  • $secondary-100

  • $secondary-200

  • $secondary-300

  • $secondary-400

  • $primary-50

  • $primary-100

  • $primary-200

  • $primary-300

  • $primary-400

  • $secondary-50

  • $secondary-100

  • $secondary-200

  • $secondary-300

  • $secondary-400

Provide an optimal reading experience

Describing font choices, font sizes, line heights, and styles.
From options, to decisions.

Provide an optimal reading experience

Describing font choices, font sizes, line heights, and styles.
From options, to decisions.

Provide an optimal reading experience

Describing font choices, font sizes, line heights, and styles.
From options, to decisions.

Bold

Regular

Semibold

  • Aa

    Inter family

    $global-font-family-primary

  • Aa

    60px

    $global-font-family-primary

  • Aa

    48px

    $global-font-family-primary

  • Aa

    36px

    $global-font-family-primary

  • Aa

    28px

    $global-font-family-primary

  • Aa

    22px

    $global-font-family-primary

  • Aa

    20px

    $global-font-family-primary

  • Aa

    16px

    $global-font-family-primary

  • Aa

    Inter family

    $global-font-family-primary

  • Aa

    60px

    $global-font-family-primary

  • Aa

    48px

    $global-font-family-primary

  • Aa

    36px

    $global-font-family-primary

  • Aa

    28px

    $global-font-family-primary

  • Aa

    22px

    $global-font-family-primary

  • Aa

    20px

    $global-font-family-primary

  • Aa

    16px

    $global-font-family-primary

Title

XL, XXLRegular, Semibold, Bold

Action

XL, XXLRegular, Semibold, Bold

Heading

XL, XXLRegular, Semibold, Bold

Subheading

XL, XXLRegular, Semibold, Bold

Title

XL, XXLRegular, Semibold, Bold

Unity, innovationand excellence

Title

XL, XXLRegular, Semibold, Bold

Unity

Heading

XL, XXLRegular, Semibold, Bold

Unity, innovationand excellence

Heading

XL, XXLRegular, Semibold, Bold

Innovation

Subheading

XL, XXLRegular, Semibold, Bold

Unity, innovationand excellence

Subheading

XL, XXLRegular, Semibold, Bold

Excellence

Action

XL, XXLRegular, Semibold, Bold

This includes actions like click, hover, focus, and disabled states. For example, a primary button may trigger a specific action like submitting a form, while a secondary button may cancel an operation.

Action

XL, XXLRegular, Semibold, Bold

Actions like click, hover, focus

Consistent rhythm matters!

Spatial systems, grids, and layouts provide rules that give your designs a consistent rhythm, constrain decision making, and help teams stay aligned.

Consistent rhythm matters!

Spatial systems, grids, and layouts provide rules that give your designs a consistent rhythm, constrain decision making, and help teams stay aligned.

Column

Margin

Gutter

PDA 411px

Grid width:
Outside margins:
Column width
Gutter size
Amount of columns

411px

16px

89px

8px

4

PDA 411px

Grid width:
Outside margins:
Column width
Gutter size
Amount of columns

411px

16px

89px

8px

4

HD 1366px

Grid width:
Outside margins:
Column width
Gutter size
Amount of columns

1366px

32px

84px

24px

12

Column

Margin

Gutter

PDA 411px

Grid width:
Outside margins:
Column width
Gutter size
Amount of columns

411px

16px

89px

8px

4

PDA 411px

Grid width:
Outside margins:
Column width
Gutter size
Amount of columns

411px

16px

89px

8px

4

HD 1366px

Grid width:
Outside margins:
Column width
Gutter size
Amount of columns

1366px

32px

84px

24px

12

Helping users make decisions quicker

Icons are essential in the interfaces of Marel products, since they immediately communicate actions, states, which help users make decisions quicker.

Helping users make decisions quicker

Icons are essential in the interfaces of Marel products, since they immediately communicate actions, states, which help users make decisions quicker.

Minimun 48px interactive area