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
Minimun 48px interactive area
Atoms, Molecules, Organism
Components
Modifier State
Modifier Icon
Primary
Active / Hover / Disable
S
M
L
L
no icon
R
Primary
Active / Hover / Disable
S
M
L
L
no icon
R
Element Type
Modifier Size
From atoms to organism
From atoms to organism
From atoms to organism
Button anatomy
Button
1
2
3
4
Button
1
2
3
4
Button layout and spacing
Button
Button
8
8
12
12
Button
Button
8
8
12
12
Button anatomy
Button
1
2
3
4
Button
1
2
3
4
Button layout and spacing
Button
Button
8
8
12
12
Button
Button
8
8
12
12
Button anatomy
Button
1
2
3
4
Button
1
2
3
4
Button layout and spacing
Button
Button
8
8
12
12
Button
Button
8
8
12
12
Organism token structure
Headline
000.000.00
Butchery Plan
01:00 PM - 02:00 PM
Butchery Plan
01:00 PM - 02:00 PM
+100%
+100%
Butchery Plan
01:00 PM - 02:00 PM
3
4
6
12
Headline
3
Text color :
Global/Neutral/400
#969696
Text style :
Detail/s/semibold
Hero Title
4
Text color :
Global/Neutral/900
#161616
Text style :
Heading/xl/semibold
Badges
12
Depends on :
Badges
Type :
Success-light
Size :
Xsmall
Headline
000.000.00
Butchery Plan
01:00 PM - 02:00 PM
Butchery Plan
01:00 PM - 02:00 PM
+100%
+100%
3
4
3
Organism token structure
Headline
000.000.00
Butchery Plan
01:00 PM - 02:00 PM
Butchery Plan
01:00 PM - 02:00 PM
+100%
+100%
Butchery Plan
01:00 PM - 02:00 PM
3
4
6
12
Headline
3
Text color :
Global/Neutral/400
#969696
Text style :
Detail/s/semibold
Hero Title
4
Text color :
Global/Neutral/900
#161616
Text style :
Heading/xl/semibold
Badges
12
Depends on :
Badges
Type :
Success-light
Size :
Xsmall
Headline
000.000.00
Butchery Plan
01:00 PM - 02:00 PM
Butchery Plan
01:00 PM - 02:00 PM
+100%
+100%
3
4
3
Organism token structure
Headline
000.000.00
Butchery Plan
01:00 PM - 02:00 PM
Butchery Plan
01:00 PM - 02:00 PM
+100%
+100%
Butchery Plan
01:00 PM - 02:00 PM
3
4
6
12
Headline
3
Text color :
Global/Neutral/400
#969696
Text style :
Detail/s/semibold
Hero Title
4
Text color :
Global/Neutral/900
#161616
Text style :
Heading/xl/semibold
Badges
12
Depends on :
Badges
Type :
Success-light
Size :
Xsmall
Headline
000.000.00
Butchery Plan
01:00 PM - 02:00 PM
Butchery Plan
01:00 PM - 02:00 PM
+100%
+100%
3
4
3
Headline label
Subtitle text
1
2
3
4
Headline label
See all
Headline label
Subtitle text
Headline label
Subtitle text
Headline label
Subtitle text
Button
3
7
11
15
16
Headline label
Subtitle text
1
2
3
4
Headline label
See all
Headline label
Subtitle text
Headline label
Subtitle text
Headline label
Subtitle text
Button
3
7
11
15
16
CONTEXT OF USE
CONTEXT OF USE
CONTEXT OF USE
Applying the system to the company's products.
© 2023 Angelsson. All Rights Reserved.
+(354) 831 9527