Honeywell SaaS
Design system
Honeywell SaaS
Design system
Honeywell SaaS
Design system
Honeywell SaaS
Design system
Building a design system for the SaaS APM mobile app
Building a design system for the SaaS APM mobile app
Building a design system for the SaaS APM mobile app
ROLE
Product Designer
IMPACT
60% increase in the design delivery process.
100% consistency throughout Forge products.
2 new components, 230+ variants
ROLE
Led a team of 3, UX Research and Design,
Conceptual testing
IMPACT
60% increase in the design delivery process.
100% consistency throughout Forge products.
2 new components, 230+ variants
Creating the design system
Creating the design system
Creating the design system
What was the need?
Honeywell has mobile apps that are spread across different verticals such as Aero, Building, Plant and Worker assist divisions. Creating a cohesive company-wide design system to elevate the user experience and develop a coherent, robust solutions provide memorable experiences to the end-users.
Global
With more than 4k employees building products, we needed a scalable system that will cater to different portfolio products.
Adaptive
The organization catered to different verticals such as warehouse, industrial plants etc and we had to ensure flexibility while developing these components.
What was the need?
Honeywell has mobile apps that are spread across different verticals such as Aero, Building, Plant and Worker assist divisions. Creating a cohesive company-wide design system to elevate the user experience and develop a coherent, robust solutions provide memorable experiences to the end-users.
Global
With more than 4k employees building products, we needed a scalable system that will cater to different portfolio products.
Adaptive
The organization catered to different verticals such as warehouse, industrial plants etc and we had to ensure flexibility while developing these components.
A quick 1-min overview
A quick 1-min overview
A quick 1-min overview
A quick 1-min
overview
Our goals were to:
Build a robust design system for developers and designers
Build a robust design system for developers and designers
Reduce time consumption and make collaboration
more efficient between the teams.
Reduce time consumption and make collaboration
more efficient between the teams.
Maintain UI consistency and increase user trust.
Maintain UI consistency and increase user trust.
See Solution
UI INVENTORY
No design system = disconnected UX
This process pointed out all the discrepancies across multiple mobile products. All these products have been using different versions or old design systems, hence creating inconsistencies. I also noted down the personas, framework that these apps were using.
UI INVENTORY
No design system = disconnected UX
This process pointed out all the discrepancies across multiple mobile products. All these products have been using different versions or old design systems, hence creating inconsistencies. I also noted down the personas, framework that these apps were using.
UI Inconsistency
UI Inconsistency
Understanding user personas and JBTD!
Understanding user personas and JBTD!
Plant Users: Maintenance Tech
Device: Mobile
Complete inspection rounds and outstanding activities to prepare for the next day.
Aero Users: Aircraft MX tech
Device: Tablet or Mobile
Works either in the hangar or at the gate and performs maintenance on planes.
How did I
approach it?
How did I
approach it?
How did I approach it?
I had to perform certain activities to guide me in the right direction. This helped me to understand the existing design language and the market practices.
I had to perform certain activities to guide me in the right direction. This helped me to understand the existing design language and the market practices.
01
User research
02
Design system benchmarking
03
Defining use cases with internal
team and PMs
Defining use cases with internal team and PMs
04
Outlining UX strategy
So, what was my
strategy forward?
So, what was my strategy forward?
So, what was my strategy forward?
So, what was my strategy forward?
Target Users and devices
Honeywell Forge product has different types of employees using it, and for different JTBD.
UI Development
Should we follow adaptive or responsive design?
Development Effort level
Which framework will suit the best for Honeywell Forge apps?
Component Prioritization
A session was held to prioritize elements that align with the collaborative efforts of both the business and design teams,We employed a combination of Brad Frost's "Interface Inventory" to identify and classify essential products and key individuals for inclusion.
Target Users and devices
Honeywell Forge product has different types of employees using it, and for different JTBD.
UI Development
Should we follow adaptive or responsive design?
Development Effort level
Which framework will suit the best for Honeywell Forge apps?
Component Prioritization
A session was held to prioritize elements that align with the collaborative efforts of both the business and design teams,We employed a combination of Brad Frost's "Interface Inventory" to identify and classify essential products and key individuals for inclusion.
Aah! Let's get to creating
the vision
Aah! Let's get to creating the vision
Aah! Let's get to creating
the vision
Setting the Guiding
Principles
Setting the Guiding Principles
Setting the Guiding Principles
To frame our new direction, we handpicked a set of guiding design principles. These principles would unite all designers while serving as key criteria to measure our work against.
To frame our new direction, we handpicked a set of guiding design principles. These principles would unite all designers while serving as key criteria to measure our work against.
MODERN
Look and feel like we’re
making the future
Look and feel like we’re making the future
Look and feel like we’re
making the future
EMPOWERING
Put the user in control and anticipate their needs
Put the user in control and anticipate their needs
ACCESSIBLE
Make it comfortable
for everyone
Make it comfortable for everyone
Make it comfortable
for everyone
Let's see, how I tackled one
of the components - Bottom sheet
Let's see, how I tackled one
of the components - Bottom sheet
Let's see, how I tackled one
of the components - Bottom sheet
It is commonly used to contain supplementary content that is relevant to the primary content on the main screen.
It is commonly used to contain supplementary content that is relevant to the primary content on the main screen.
1
When do we use Bottom sheet? and when do we use sort option, dropdown?
When do we use Bottom sheet? and when do we use sort option, dropdown?
2
Should we construct bs based on screen size or content?
Should we construct bs based on screen size or content?
3
Do we design different versions for iOS and Android?
Do we design different versions for iOS and Android?
To tackle these challenges, we engaged in ongoing reviews with the team to collectively make design decisions and ensure alignment on details. Biweekly meetings were held to showcase the progress to the entire global design system team, fostering discussions about the direction and advancement of the work. These approaches proved effective in bridging the gap.
To tackle these challenges, we engaged in ongoing reviews with the team to collectively make design decisions and ensure alignment on details. Biweekly meetings were held to showcase the progress to the entire global design system team, fostering discussions about the direction and advancement of the work. These approaches proved effective in bridging the gap.
What were the
Variants - Bottom sheet
What were the
Variants - Bottom sheet
What were the
Variants - Bottom sheet
And what about accessibility??
And what about accessibility??
And what about accessibility??
Each component that were designed was checked for accessibility compliance. I constantly referred the WCAG AA accessibility standards to make sure the designs are meeting them.
Each component that were designed was checked for accessibility compliance. I constantly referred the WCAG AA accessibility standards to make sure the designs are meeting them.
Resizable
It is crucial to design for all the use cases making sure that the content will be visible even on smaller devices. It should also support users who are using larger font sizes on their devices, it might then get difficult for them to get the complete view.
It is crucial to design for all the use cases making sure that the content will be visible even on smaller devices. It should also support users who are using larger font sizes on their devices, it might then get difficult for them to get the complete view.
Touch Target
The top 48dp portion of the bottom sheet is interactive when user-initiated resizing is available and the drag handle is present.
The top 48dp portion of the bottom sheet is interactive when user-initiated resizing is available and the drag handle is present.
SuccessfulResults
What did this project teach me?
What did this project teach me?
Efficient team processes
Led to faster design cycle with less design system support and reduction in code changes.
Enhanced user experience
With fewer UI bugs, the time to completion decreased and all the components were WCAG compliant.
Efficient team processes
Led to faster design cycle with less design system support and reduction in code changes.
Enhanced user experience
With fewer UI bugs, the time to completion decreased and all the components were WCAG compliant.
Don't stop, keep looking!
Don't stop, keep looking!