Relayr | Industrial IoT Powerhouse

At relayr, we want to create interfaces that are reliable and easy to use. The design system is the tool that helps relayr provide these values to end users. It is a collection of reusable components and design guidelines, which define a common visual design language for anyone involved in building a visual product at relayr.

2020
UX Design, UI Design, Design System, Agile Product Development
Internet of Things (IoT)
Visit Relayr Website
The problem we are solving.
Relayr is an Industrial Internet of Things (IIoT) company delivering complete solutions for risk-free digital transformation and supporting their customers on the journey to Equipment as a Service.
How might we create a single source of truth across the organization? This effort involved a large team of designers, developers, and business analysts, and aimed to ensure consistency and reliability across all digital solutions.
The process we follow.
Agile Product Development
Research & Discovery
Ideation
Prototyping
The outcomes and results.
relayer Design System
My role in the project.
Research & Discovery
Template Design
Documentation
Prototyping
Research & Discovery
Atomic Design Methodology by Brad Frost.
An atomic component structure is a methodology used in design systems where components are broken down into their smallest, most basic pieces (atoms) and then combined to create more complex components. This approach allows for greater consistency and flexibility in designing user interfaces.
Atomic (Component-Driven Design)
• Atoms
• Molecules
• Organisms
• Templates
• Pages
Benchmarking
We began the design process by comparing and evaluating our component library against industry best practices and standards. This allowed us to identify areas for improvement and opportunities to optimize the structure and design.
Identified Design Systems
Google Material Design
Goals
Create
• Create a visual language that synthesizes the classic principles of good design with the innovation and possibility of technology and science.
Unify
• Develop a single underlying system that unifies the user experience across platforms, devices, and input methods.
• Customize
Expand Material’s visual language and provide a flexible foundation for innovation and brand expression.
Design Guidance & Code
Material Design Guidelines
• Material Design Principles, Styles, and Best Practices
Components
• Design guidance and developer documentation for interactive UI building blocks
Icons
• Access five sets of stylized system icons, available in a range of formats and sizes
Accessibility Guidelines
• Learn how to help users of diverse abilities navigate, understand, and use your UI
Design Guidelines
Material System
• Introduction
• Material Studies
Material Foundation
• Foundation Overview
• Environment
• Layout
• Navigation
• Color
• Typography
• Sound
• Iconography
• Shape
• Motion
• Interaction
• Communication
Material Guidelines
• Guidelines Overview
• Material Theming
• Usability
• Platform Guidance
Components
App Bars: bottom
App Bars: top
Backdrop
Banners
Bottom Navigation
Buttons
Buttons: floating action button
Cards
Chips
Data Tables
Dialogs
Dividers
Image Lists
Lists
Navigation Drawer
Navigation Rail
Pickers
Progress Indicators
Selection Controls
Sheets: bottom
Sheets: side
Sliders
Snackbars
Tabs
Text Fields
Tooltips
Buttons
• Demo
• Developer Documentation
• Usage
• Principles
• Anatomy
• Hierarchy & Placement
• Text Button
• Outlined Button
• Contained Button
• Toggle Button
• Theming
• Specs
Template Structure
Carbon Design System
IBM's Open-Source Design System
• Getting Started
• Tutorial
• Guidelines
• Components
• Patterns
• Experimental
• Data Visualisation
• Resources
• How to Contribute
• Updates
• Help
• Design Kit
• GitHub
Getting Started
• About Carbon
• Design
• Development
Components
• Overview
• Component Status
• Accordion
• Breadcrumb
• Button
• Checkbox
• Code Snippet
• Content Switcher
• Data Table
• Date Picker
• Dropdown
• File Uploader
• Form
• Inline Loading
• Link
• List
• Loading
• Modal
• Notification
• Number Input
• Overflow Menu
• Pagination
• Progress Indicator
• Radio Button
• Search
• Select
• Slider
• Structured List
• Tabs
• Tag
• Text Input
• Tile
• Toggle
• Tooltip
• UI Shell Header
• UI Shell Left Panel
• UI Shell Right Panel
Patterns
• Overview
• Common Actions
• Dialogs
• Disabled States
• Empty States
• Filtering
• Forms
• Global Header
• Loading
• Login
• Notifications
• Overflow Content
• Search
Buttons
Code
• Modifiers
• Kind
• Size
Usage
• General Guidance
• Button Order
• Button Alignment
• Labels
• Icons Usage
• Danger Button Usage
• Variations
• References
Style
• Kind
• Typography
• Structure
• Sizes
Template Structure
Wix Design System
Storybook Examples
Index

Introduction
• Getting Started
• Cheatsheet
• Testing
• Troubleshooting
• Playground
Component API
• Components
• Work In Progress
• Next API
• Styling
Design Guidelines
• Modals
• Foundation
• Layout
• Inputs
• Selection
• Navigation
• Tooltips & Popovers
Others
• Deprecated
Components Cheatsheet 
Foundation
• Typography
• General Use Icons
Layout
• Page Layout
• Card Layout
• Table Layout
Inputs
• Text Input
• Number Input
• Time Input
• Date Input
• Address Input
• Search Input
• Media Input
• Variable Input
Selection
Buttons
Navigation
Tooltips & Popovers
Notification Bars
Modals
Pickers
Avatars
Badges
Tags
Content Widgets
Buttons
• Description
• Import
• Examples (Visual & Code)
• Skin & Priority
• Size
• Affix
• States
• Custom HTML Tag
• API
• Testkit
• Playground
Template Structure
Ideation
Structure & Scope
The specific parts of the design system outline its structure and scope. These sections typically provide guidelines for how design elements should be used and organized within a project or organization.
+ Introduction *Context
+ Getting Started
+ Cheat Sheet *Design Language
+ Troubleshooting
+ Playground
Design Guidelines
+ Design Principles
+ Brand Guidelines
+ User Experience
+ Tone of Voice
+ FAQs
Icons
+ Iconography
Style
• Typography
• Spacing
• Colors
Components
• Buttons
• Dialogs
• Error Messages
• Floating Bar
• Header Bar
• Modals
• Navigations
• Page Header
• Pagination
• Popovers
• Tables
• Tabs
• Tags
• Text Fields
• Time Pickers
• Tooltips
• Selects
• Stepper
• Toast Messages
Users (Personas)
• UX 
• UI 
• FE
Out of Scope
• Dashboard Section
• Widgets
• Charts
• Charts Filters
• Charts Legend
Template: Index
Template: Welcome
Template: How to use the component library
Template: Design Principles
Template: Interface Vocabulary
Template: Component Library (e.g. Button)

You may also like

KARAKTER | A Dog's Life
Illustration | Character Design
2014
Character Design, Illustration, Creative Direction
Kingdom Houses | Website
2015
onic | dualtonic
Brand Identity Design
2013
Branding, Creative Direction, Icon Design
Lench Films
Brand Identity Design
2013
Branding, Creative Direction, Icon Design
SKAATSSTAD | Cape Town Rollergirls
Branding | Graphic Design
2013
Creative Direction, Graphic Design, Branding
Specure | TRA Bahrain
The Telecommunications Regulatory Authority of the Kingdom of Bahrain, in collaboration with Specure GmbH, operates a measurement platform designed to continuously assess and monitor the quality of service (QoS) for the most widely used broadband packages in the country. This includes both fixed and mobile networks.
2022
Visual Communication Design, UX Design, UI Design, Design System, Agile Product Development, Facilitation
Telecommunication, Product, Service, SaaS, Web
AIM | Automotive Information Manager
Brand Identity Design
2013
Branding, Creative Direction, Icon Design
MiX | Track
Desktop Application Design
2013
Creative Direction, UI/UX, Interaction Design
Airbo | Employee Communications Platform
Brand Identity Design
2014
Branding, Creative Direction, Icon Design
JOULE | Optimal Energy
Mobile Application Design
2013
Creative Direction, UI/UX, Interaction Design
↑Back to Top