case study
case study
case study
My Role
• I enhanced the existing design files by creating a system of organization and providing detailed documentation.
• I executed the tasks such as identifying issues, defining problem scopes, prioritizing tasks, designing solutions, conducting testing, and overseeing the implementation process
• I educated fellow business partners on UX best practices and proper design thinking
• I envisioned new ideas for the existing designs
Project overview
Project overview
As the UI/UX Designer for CIMON Automation, I was tasked to take lead on all UX/UI efforts for their software that was in it’s final stages of development before commercial launch. Then afterwards, continue working with the engineers to develop new features.
The main challenges were:
• Time constraints
• Steep learning curve in a new industry
• Lack of user research
I diligently worked to quickly familiarize myself with the intricacies of industrial automation and examined the work that was left behind by the previous designer.
As the UI/UX Designer for CIMON Automation, I was tasked to take lead on all UX/UI efforts for their software that was in it’s final stages of development before commercial launch. Then afterwards, continue working with the engineers to develop new features.
The main challenges were:
• Time constraints
• Steep learning curve in a new industry
• Lack of user research
I diligently worked to quickly familiarize myself with the intricacies of industrial automation and examined the work that was left behind by the previous designer.
impact
Remarkably increased the team workflow efficiency by 20%.
Streamlined the Dev + Design process by creating a design system.
Designing the UI for the Human Machine Interface design tool called Canvas and maintaining future development of new features.
Designing the UI for the Human Machine Interface design tool called Canvas and maintaining future development of new features.
Designing the UI for the Human Machine Interface design tool called Canvas and maintaining future development of new features.
The global industrial automation services market is experiencing substantial revenue growth, primarily driven by the increasing adoption of automation and smart manufacturing in manufacturing sectors worldwide. Additionally, the growing imperative to cultivate new business strategies and enhance core manufacturing capabilities is positively influencing market development.
The global industrial automation services market is experiencing substantial revenue growth, primarily driven by the increasing adoption of automation and smart manufacturing in manufacturing sectors worldwide. Additionally, the growing imperative to cultivate new business strategies and enhance core manufacturing capabilities is positively influencing market development.
To craft effective and user-friendly designs, I quickly familiarized myself with industry-specific terms like Human Machine Interfaces (HMI) and Programmable Logic Controllers (PLC) and their relevance in the realm of industrial automation. I started with an extensive market research phase, which served as the bedrock for my subsequent endeavors in identifying and addressing user pain points.
To craft effective and user-friendly designs, I quickly familiarized myself with industry-specific terms like Human Machine Interfaces (HMI) and Programmable Logic Controllers (PLC) and their relevance in the realm of industrial automation. I started with an extensive market research phase, which served as the bedrock for my subsequent endeavors in identifying and addressing user pain points.
UNDERSTAND
UNDERSTAND
UNDERSTAND
Industrial Automation?
Industrial
Automation?
Industrial automation involves the application of control systems, including computers and robots, along with information technologies, to manage various industrial processes and machinery, thereby reducing reliance on human labor. It represents the next level beyond mechanization in the realm of industrialization.
Industrial automation involves the application of control systems, including computers and robots, along with information technologies, to manage various industrial processes and machinery, thereby reducing reliance on human labor. It represents the next level beyond mechanization in the realm of industrialization.
industry 4.0?
industry 4.0?
industry 4.0?
Steam drove the inception of the first Industrial Revolution; electricity ignited the second; preliminary automation and machinery defined the third; and now, the Fourth Industrial Revolution is being shaped by cyber-physical systems, characterized by intelligent computers.
Steam drove the inception of the first Industrial Revolution; electricity ignited the second; preliminary automation and machinery defined the third; and now, the Fourth Industrial Revolution is being shaped by cyber-physical systems, characterized by intelligent computers.
$147.06
Billion USD
in 2019
$147.06
Billion USD
in 2019
$147.06
Billion USD
in 2019
$264.69
Billion USD
in 2026
$264.69
Billion USD
in 2026
$264.69
Billion USD
in 2026
Expected growth in market size at a compound annual growth rate (CAGR) of 8.9%.
Expected growth in market size at a compound annual growth rate (CAGR) of 8.9%.
what is an hmi?
what is an hmi?
A Human-Machine Interface (HMI) serves as a user interface or dashboard, enabling the connection between an individual and a machine, system, or device. While the term can encompass any screen facilitating user-device interaction, HMI finds its most frequent application within the realm of industrial processes.
A Human-Machine Interface (HMI) serves as a user interface or dashboard, enabling the connection between an individual and a machine, system, or device. While the term can encompass any screen facilitating user-device interaction, HMI finds its most frequent application within the realm of industrial processes.
what is a PLC?
what is a PLC?
A programmable logic controller is an industrial computer that has been ruggedized and tailored for the precise control of manufacturing processes. It is commonly used in contexts such as assembly lines, machinery, robotic devices, or any activity demanding high reliability, straightforward programming, and the ability to diagnose process faults.
A programmable logic controller is an industrial computer that has been ruggedized and tailored for the precise control of manufacturing processes. It is commonly used in contexts such as assembly lines, machinery, robotic devices, or any activity demanding high reliability, straightforward programming, and the ability to diagnose process faults.
CIMON's Canvas represents a cutting-edge HMI programming software, empowering users to seamlessly create, edit, and oversee HMI projects. This innovative platform is designed to supplant their legacy software, Xpanel Designer, while complementing their enhanced Xpanel devices. The introduction of these products reflects CIMON's strategic push into the US market, with the aim of securing a significant market share.
CIMON's Canvas represents a cutting-edge HMI programming software, empowering users to seamlessly create, edit, and oversee HMI projects. This innovative platform is designed to supplant their legacy software, Xpanel Designer, while complementing their enhanced Xpanel devices. The introduction of these products reflects CIMON's strategic push into the US market, with the aim of securing a significant market share.
what is canvas?
what is canvas?
industries served
industries served
• Food and Beverage
• Power & Energy Management
• Food and Beverage
• Power & Energy Management
• Healthcare Facilities
• Farming & Agriculture
• Pharmaceutical
• BAS & HVAC
• Pharmaceutical
• BAS & HVAC
• Manufacturing & Assembly
• Water & Wastewater Processing
• Healthcare Facilities
• Farming & Agriculture
• Manufacturing & Assembly
• Water & Wastewater Processing
define
define
define
Target audience
Target audience
I've identified two primary target user profiles: Controls Engineers and System Integrators. These professionals are pivotal in enhancing production efficiency by assessing performance and spearheading improvements. Within the US both roles share very similar demographics, 90% of all engineers being men with an average age of 40 years old.
With the information I gathered, I crafted a persona to assist the development team gain some insight into the end-users we are designing for.
I've identified two primary target user profiles: Controls Engineers and System Integrators. These professionals are pivotal in enhancing production efficiency by assessing performance and spearheading improvements. Within the US both roles share very similar demographics, 90% of all engineers being men with an average age of 40 years old.
With the information I gathered, I crafted a persona to assist the development team gain some insight into the end-users we are designing for.
Steven thompson
Steven thompson
Age
39
System Integrator
Job Title
In a relationship
Status
Chicago, IL
Location
Steven Thompson is a highly skilled system integrator with over a decade of experience in the field. Steven has developed a deep understanding of industrial automation systems and their integration into manufacturing processes. He is a key contributor to organization's mission of improving efficiency, productivity, and safety in industrial environments.
Steven Thompson is a highly skilled system integrator with over a decade of experience in the field. Steven has developed a deep understanding of industrial automation systems and their integration into manufacturing processes. He is a key contributor to organization's mission of improving efficiency, productivity, and safety in industrial environments.
Using the Jobs-to-be-Done theory by Anthony Ulwick, I employed this basic persona to identify and define the core functional jobs and their associated desired outcomes. This method has been instrumental in directing my attention to the broader context, allowing me to comprehend how Canvas seamlessly integrates into an engineer's workflow.
Using the Jobs-to-be-Done theory by Anthony Ulwick, I employed this basic persona to identify and define the core functional jobs and their associated desired outcomes. This method has been instrumental in directing my attention to the broader context, allowing me to comprehend how Canvas seamlessly integrates into an engineer's workflow.
core functional jobs
core functional jobs
Perform in-depth analysis of existing industrial automation systems, identifying their strengths and weaknesses.
Seamlessly integrate various industrial automation systems, ensuring they work cohesively to optimize manufacturing processes.
Identify bottlenecks and inefficiencies in manufacturing processes and propose strategies for improvement.
Quickly diagnose and resolve problems within the automation systems to minimize downtime.
Ensure the automation systems meet quality standards and regulatory requirements.
Perform in-depth analysis of existing industrial automation systems, identifying their strengths and weaknesses.
Seamlessly integrate various industrial automation systems, ensuring they work cohesively to optimize manufacturing processes.
Identify bottlenecks and inefficiencies in manufacturing processes and propose strategies for improvement.
Quickly diagnose and resolve problems within the automation systems to minimize downtime.
Ensure the automation systems meet quality standards and regulatory requirements.
desired outcomes
desired outcomes
Increased production rates, reduced labor costs, and improved overall productivity in the industrial environment.
Successful integration and optimization of automation systems should lead to reduced operational costs and higher profitability.
Ensure that all systems meet regulatory and safety compliance standards, avoiding costly fines and disruptions.
High satisfaction among stakeholders, from management impressed with cost savings to workers benefiting from a safer, more efficient work environment.
Increased production rates, reduced labor costs, and improved overall productivity in the industrial environment.
Successful integration and optimization of automation systems should lead to reduced operational costs and higher profitability.
Ensure that all systems meet regulatory and safety compliance standards, avoiding costly fines and disruptions.
High satisfaction among stakeholders, from management impressed with cost savings to workers benefiting from a safer, more efficient work environment.
emotional & related jobs
emotional &
related jobs
Doesn't want to worry about the reliability and functionality of the software.
Doesn't want to get hung up on spending a considerable amount of time trying to design a project.
Doesn't want to worry about the reliability and functionality of the software.
Doesn't want to get hung up on spending a considerable amount of time trying to design a project.
problem statement
problem
statement
In an open forum with customers I discerned a consistent trend characterized by a shared sentiment among users.
The prevailing need is for the software to be streamlined, providing conveniences that reduce the time required for project completion.
In an open forum with customers I discerned a consistent trend characterized by a shared sentiment among users.
The prevailing need is for the software to be streamlined, providing conveniences that reduce the time required for project completion.
Upon my involvement in the project during its later stages of development, I had the opportunity to assess a nearly finished product with a fresh perspective. This allowed me to gain a comprehensive understanding of the design choices that had been made.
Before embarking on any redesign efforts, I dedicated several months immersing myself in the program, effectively becoming well-acquainted with every feature and approaching it from the perspective of a system integrator. This immersive experience enabled me to identify minor inconveniences and areas in need of redesign. In addition, I examined competitor software to take note of common design patterns and trends.
Upon my involvement in the project during its later stages of development, I had the opportunity to assess a nearly finished product with a fresh perspective. This allowed me to gain a comprehensive understanding of the design choices that had been made.
Before embarking on any redesign efforts, I dedicated several months immersing myself in the program, effectively becoming well-acquainted with every feature and approaching it from the perspective of a system integrator. This immersive experience enabled me to identify minor inconveniences and areas in need of redesign. In addition, I examined competitor software to take note of common design patterns and trends.
design
design
design
xpanel designer
xpanel designer
xpanel designer
canvas
canvas
canvas
redesign
redesign
old layout
old layout
old layout
tool bar
tool bar
I was tasked to explore possibilities for a comprehensive redesign of the program's appearance and layout, guided by UI/UX best practices.
Armed with the insights gained from firsthand experience with the software and guided by the initial problem statement, I the following objectives in mind:
Enhance efficiency of use
Minimize the user's cognitive load
Maximize recognition over recall
Maintain a clean and aesthetic design
Adhere to Jakob's Law
I was tasked to explore possibilities for a comprehensive redesign of the program's appearance and layout, guided by UI/UX best practices.
Armed with the insights gained from firsthand experience with the software and guided by the initial problem statement, I the following objectives in mind:
Enhance efficiency of use
Minimize the user's cognitive load
Maximize recognition over recall
Maintain a clean and aesthetic design
Adhere to Jakob's Law
DISCOVERY
DISCOVERY
Given the nature of HMI programs, there is a demand for easy access to essential details, and the challenge lies in presenting these details in a clear and uncluttered manner.
Within the landscape of HMI software available in the market, a select few have risen to prominence:
• Inductive Automation - Ignition
• AVEVA - InTouch
• Weintek - Easy Builder Pro
Given the nature of HMI programs, there is a demand for easy access to essential details, and the challenge lies in presenting these details in a clear and uncluttered manner.
Within the landscape of HMI software available in the market, a select few have risen to prominence:
• Inductive Automation - Ignition
• AVEVA - InTouch
• Weintek - Easy Builder Pro
In addition to HMI software, I examined other design software to gain more inspiration and references for patterns.
• Photoshop
• Illustrator
• Indesign
• Figma
In addition to HMI software, I examined other design software to gain more inspiration and references for patterns.
• Photoshop
• Illustrator
• Indesign
• Figma
Firstly, I deconstructed all the pieces that make up the main workspace and by isolating each component, I tried to find opportunities for minor improvements.
Firstly, I deconstructed all the pieces that make up the main workspace and by isolating each component, I tried to find opportunities for minor improvements.
The current tool bar has become loaded with a variety of different tools that user can use and there is a loose method of organization. I decided to break it up into three parts based on functionality and intent and rearrange it in a way that encourages memorization.
The current tool bar has become loaded with a variety of different tools that user can use and there is a loose method of organization. I decided to break it up into three parts based on functionality and intent and rearrange it in a way that encourages memorization.
I moved the zoom icons and the connection setup icons to the bottom bar because those functions already existed down there, so it made sense to group them together.
All the drawing and object icons are moved in their own vertical tool bar.
I placed the icons for the main functions in a static sidebar alongside clear labels. I made this choice because each user must access one of these editors to configure their project, making it essential for these core functions to be readily accessible and prominently visible. I included the option to collapse this bar to increase the working space for those that need it.
The top toolbar now only includes the icons for configuring and handling drawn objects.
I moved the zoom icons and the connection setup icons to the bottom bar because those functions already existed down there, so it made sense to group them together.
All the drawing and object icons are moved in their own vertical tool bar.
I placed the icons for the main functions in a static sidebar alongside clear labels. I made this choice because each user must access one of these editors to configure their project, making it essential for these core functions to be readily accessible and prominently visible. I included the option to collapse this bar to increase the working space for those that need it.
The top toolbar now only includes the icons for configuring and handling drawn objects.
I moved the zoom icons and the connection setup icons to the bottom bar because those functions already existed down there, so it made sense to group them together.
All the drawing and object icons are moved in their own vertical tool bar.
I placed the icons for the main functions in a static sidebar alongside clear labels. I made this choice because each user must access one of these editors to configure their project, making it essential for these core functions to be readily accessible and prominently visible. I included the option to collapse this bar to increase the working space for those that need it.
The top toolbar now only includes the icons for configuring and handling drawn objects.
project tree
project tree
The project tree originally displayed all pages and object layers together in a single long view, which became problematic when dealing with numerous pages and object layers. It often proved challenging for users to select the correct layer on the appropriate page via the project tree. To address this issue, I made the decision to segregate pages and layers, ensuring that users only encounter layers relevant to the current working page.
The project tree originally displayed all pages and object layers together in a single long view, which became problematic when dealing with numerous pages and object layers. It often proved challenging for users to select the correct layer on the appropriate page via the project tree. To address this issue, I made the decision to segregate pages and layers, ensuring that users only encounter layers relevant to the current working page.
Object properties
Object properties
The object properties were originally divided into four separate tabs, but this layout was found to be space-inefficient, especially for objects with fewer properties.
In response, I reorganized the tabs by grouping the three related to appearance properties and keeping the action tab separate. Based on user interactions with Canvas, it became apparent that certain properties were rarely used by most users. To address this, I introduced an 'advanced' tab to hide these less frequently used properties, resulting in a cleaner and simpler user interface with fewer visible properties.
The object properties were originally divided into four separate tabs, but this layout was found to be space-inefficient, especially for objects with fewer properties.
In response, I reorganized the tabs by grouping the three related to appearance properties and keeping the action tab separate. Based on user interactions with Canvas, it became apparent that certain properties were rarely used by most users. To address this, I introduced an 'advanced' tab to hide these less frequently used properties, resulting in a cleaner and simpler user interface with fewer visible properties.
The top toolbar now only includes the icons for configuring and handling drawn objects.
I placed the icons for the main functions in a static sidebar alongside clear labels. I made this choice because each user must access one of these editors to configure their project, making it essential for these core functions to be readily accessible and prominently visible. I included the option to collapse this bar to increase the working space for those that need it.
All the drawing and object icons are moved in their own vertical tool bar.
I moved the zoom icons and the connection setup icons to the bottom bar because those functions already existed down there, so it made sense to group them together.
With the proposed redesigns in place, the next crucial step is to conduct user testing to validate whether these solutions indeed enhance overall readability and make it easier for users to swiftly locate the necessary tools, ultimately boosting their efficiency.
Following successful testing, the subsequent phase will involve the development of each page listed in the sidebar to complete the comprehensive redesign.
With the proposed redesigns in place, the next crucial step is to conduct user testing to validate whether these solutions indeed enhance overall readability and make it easier for users to swiftly locate the necessary tools, ultimately boosting their efficiency.
Following successful testing, the subsequent phase will involve the development of each page listed in the sidebar to complete the comprehensive redesign.
next steps
next steps
next steps
