Design System
SenseHub Design System (MSD)
A global pharmaceutical company that manufactures
a wide range of healthcare products
Design System
SenseHub Design System (MSD)
MSD is a global pharmaceutical company that manufactures a wide range of healthcare products
Overview
SenseHub is at the forefront of innovation in livestock management, offering cutting-edge solutions to help farmers make data-driven decisions. By harnessing advanced sensor technology and real-time analytics, SenseHub enables dairy and beef farmers to closely monitor the health, fertility, and overall well-being of their herds.
I helped with the creation of a comprehensive design system which unified the product’s design language, improved handoff to developers, and ensured responsive design across various screen sizes.
My Role
UX Research, Visual Concept, Component building, Prototype, Dev Handoff
Team
Peleg D., Design Lead
Daphna K., Design Ops
Efrat K., Product designer
Eytan E., Product designer
Timeline
July 2023 – Ongoing
Context
The SenseHub Umbrella
Unification of all products
Each field within the animal category was assigned with a distinctive color.
The organization began conducting a thorough inventory of all the digital products, cross-platform, mobile, dashboard and web. All stakeholders, including designers, marketing, developers and product managers were informed of the important decision: Design unification.
The meaning would be design integrity and scalability across their ever-evolving products and platforms.
1.0 SenseHub logos by species
Problem Statement
Putting all the pieces together
Different design languages
Each species category had its own product designer, and there was a notable absence of design consistency across these different categories. This lack of cohesion made it challenging to establish an efficient workflow for the development teams.
New products kept on coming in the work flow but there was an absence of guidelines helping to integrate them into the system.
Lack of design system
Each product category had its distinct collection of design components and templates for every design element, from fields and tables to typography, etc. Unfortunately, these resources lacked consideration for development constraints and responsive design. every time a new design component was required, individual product designers made their own design decisions, leading to inconsistencies and variations between designers.
Insight
We needed to build a design system that would be capable of supporting 8 category species –
each with their own teams of designers and PMs.
Step #1
Research and Planning
Inspiration and approach
Researching industry leading brands design systems such as Atlassian, Sales Force, Airbnb, and mapping out all of our components, from simplest to most complex.
Identifing User Groups
The users of the design system who will use it eventually to create the interface are the designers, developers and product managers.
However, we also needed to understand the end users; the customers who will ultimately interact with the product’s interface.
Step #2
Establishing a design system
UX and design researches
The process of building components and establishing decisions which would be cross categories was informed by in-depth UX researches. I was lucky enough to be part of a corporation that encourages deep thinking processes and researches.
Every research included the exploration of all potential variations for a component, icon, or interaction behavior. This involved not only identifying these possibilities but also integrating them into the interface and subjecting them to rigorous testing.
Foundations
Objects agnostic definitions such as typography, colors, shadows & icons.
Navigation
Elements used to navigate the app such as app bar, tabs, headers and global menu.
Buttons
All the button types such as floating button, text buttons and standard buttons
Elements
All general elements such as tooltips, chips, toggle, checkbox and more.
Lists
Content lists types like navigation & configuration lists with different features.
Forms
Building blocks like search, input and text fields, lists items and dropdowns.
Foundations
Objects agnostic definitions such as typography, colors, shadows & icons.
Navigation
Elements used to navigate the app such as app bar, tabs, headers and global menu
Buttons
All the button types such as floating button, text buttons and standard buttons
Elements
All general elements such as tooltips, chips, toggle, checkbox and more.
Lists
Content lists types like navigation & configuration lists with different features.
Forms
Building blocks like search, input and text fields, lists items and dropdowns.
Step #3
Developing a design concept
The approach
The development of the design concept and the establishment of the design system were a back-and-forth process since they were intertwined. As we crafted the design, we simultaneously identified the tasks at hand. This included determining the essential components, deciding on color usage across different areas, and repeatedly iterating on these decisions. Every element and conclusion required thorough testing and adaptation to cater to all categories.
2.0 SenseHub branding language and design elements.
The goals of the concept
Suitable
Create a harmonious and efficient design concept that suits the individual products with different colors and unique features.
Ease of maintenance
Making developing, maintenance and updates more straightforward while reducing the risk of inconsistencies or errors.
Scalability
Integrating new products and updating existing ones for ever-evolving products is essential for the long-term success.
The goals of the project
Suitable
Create a harmonious and efficient design concept that suits the individual products with different colors and unique features.
Ease of maintenance
Making developing, maintenance and updates more straightforward while reducing the risk of inconsistencies or errors.
Scalability
Integrating new products and updating existing ones for ever-evolving products is essential for the long-term success.
2.1 Mobile Design Concept
2.2 Web Design Concept
Step #4
Developing a system of variables
Color Semantic
We established a color system based on design tokens that describe the function of a value. These names helped the designers to understand the purpose and meaning behind the variable, and allowed for easy modifications and thematic adjustments across all products.
3.0 Showcase of the semantic system on the general brand.
Thematic adjustments
The design system’s elements, such as nav bars, buttons, tags and other graphic elements, were based on a semantic color scheme. Each product was assigned a core color scheme that incorporated the category color, following the logo’s color.
3.1 A showcase of the design concept applied on various species through variables
Step #5
Documentation
Dev Handoff
Each component (e.g., buttons, modals, form fields) is documented with its variations, interactions, and guidelines on when and how to use them.
We also mapped all component tokens (colors + sizes).
4.0 Documentation examples from Figma
Bonus Project - Icons
I personally was assigned to design all the icons of the design system. It required a lot of planning and research before I approached the design.
Working with templates and grids
I designed icon templates that take into account various shapes, optical illusions, and alignments. These templates helped optimize the icon placement.
I utilized a 0.25-pixel grid to ensure the optimal rendering process for exporting the icons.
Work process
Taking in count artistic and functional considerations was crucial in order to create a family of icons which maintains consistency and alignment but overcomes optical illusions at the same time.
The icons were tested in 3 ways:
– Next to each other
– Next to text
– On screen context
Building a design language
In order to achieve a unique and cohesive appearance within our overall design system, we decided as a team to incorporate a blend of sharp and rounded corners, so I had to decide what was the most effective way to merge these styles in my design on each and every icon.
Next project:
Agam Liderim
One year B2B project of redesigning complex dashboard interface of insurance.
Agam Liderim
One year B2B project of redesigning complex dashboard interface of insurance.
