Control panel HMI screen
Rapid evaluation
User interview
User journey mapping
Ideation & Concept
High-fidelity prototype
Interaction design
Lead designer
UX/UI as well as project management
Adobe creative suite
Confluence
Figma
internal method and system
Jira / M project planner
Microsoft office tool
Nine months
October 2023
Background
These various control panels offer a wide range of features and functionalities for tailor-made operability. The current platform offers different performance levels including control panels for economic applications, robust standard operator panels, high end multi-touch human-machine interfaces (HMIs) and control panels designed for reliable operation in harsh environmental conditions.
Stack holders word
A modernisation of the user interface for control cabinets is essential to be able to add more functionality and improved ease of use. Existing UI is created without analysis of customer needs and is more than 10 years old. To have a modern, attractive design is also necessary/expected to continue to be a preferred supplier for these type of products.
In my role, I led the initiative to drive, plan, and manage the entire project. I introduced a new approach to design project management and implemented a newly released design system within the company. My responsibilities included coordinating with different departments and ensuring that our strategies aligned with the company’s goals.
Without further delay, I commenced an in-depth discovery and understanding phase, analysing and evaluating the current state of the various types of HMIs. This involved understanding their capabilities and limitations, as well as exploring technical possibilities. To gain comprehensive insights, I conducted interviews with company stakeholders, key personnel, and the existing team across different departments.
Project identification & technical summary
Re-brief
Discovery findings (5W)
Current UI workflows
Target User/ Customer description & Needs
Product value proposition
Initial project requirements
Project risk & dependencies
Project possibilities
initial deliverables
Project estimation and scoping
" The current control panel is outdated from the perspective of user navigation. It makes it much more difficult for users to find, understand, and navigate through the panel in a user-friendly way. Additionally, from a visual standpoint, the panel is not aligned with the current ABB design system and other similar products."
November 2023
To move forward effectively, I prioritised identifying the pain points of the HMI Composer, defining UX tasks, and gaining insights into user needs and expectations. Through thorough research and analysis, we aimed to understand the market, product, and target users more deeply.
Our diverse and rigorous research methods included user interviews, surveys, rapid qualitative evaluations, benchmarking, workshops, and ethnographic studies. This approach ensured we captured authentic user experiences and pain points.
With the data collected, I transitioned to analysing insights, synthesising findings to identify patterns, user behaviours, and key opportunities. Techniques such as affinity mapping, journey mapping, and persona creation effectively visualised the data.
Rapid evaluation
Benchmarking comparison
User/ customer interviews
Stakeholders interview
Target User/ Customer description & Needs (Personas)
User/ customer insight & journey
Users pain points
Updated Problems statements and requirements
Projects & products needs map out
Onboarded new design system
Initial project requirements list (in collaboration with project stakeholders and managers)
Project roadmap, daily tasks, backlogs, sprints (agile methodology)
Use cases & scenarios description
Product's Information Architecture Hierarchy
User flow charts.
Product flow side map
December 2023
Regular workshop using co-creation method
During the ideation and concept iteration phase, we focused on sketching numerous design solutions aimed at addressing user pain points and creating a well-functioning flow. The process began with iterating several concept solutions using Low-Fidelity Wireframes (LFW). These initial concepts were rigorously tested, reviewed, and refined through numerous co-creation workshops, ensuring collaborative input and diverse perspectives.
We gradually honed in on the final design concept, establishing the first-level hierarchy layout. At this stage, interaction behaviours were not yet implemented, allowing us to concentrate on the structural and visual aspects of the design.
To enhance understanding, provide a visual overview, and ensure effective tracking of project tasks and timelines, we developed several key documents and materials:
Affinity mapping based on user interviews
Onboarded the companies new design system
Creation of project component library
Refinement of the final design concept, main use cases, and first-level page hierarchies
Ideation & Concept design sketches
Initial co-creation concept iterations
Design concept review workshops
Concept testing & validation
Daily and weekly Alignment.
January 2024
After completing the research phase and gathering all necessary insights and information, I established the foundation for the project to proceed with the creation and implementation stages. Following the testing of several concepts, we finalised a version that best addressed project needs, stakeholder requests, product and company goals, and end-user pain points. I then refined the chosen concept, focusing on the high-level hierarchy of content, information, and pages. This process included developing a realistic interactive prototype to prepare for usability testing, ensuring the design was ready for the next phase of validation.
Early Validation and Testing
To confirm and validate that the high-level page hierarchy I designed was on the right track, we focused on ensuring our approach to visual communication, navigation, and interaction behaviour was effective. This was within the first draft of the design concept for the new HMI interface. We decided to test the UI at a very early stage to ensure we were addressing the end user's pain points from the outset. This early testing helped us establish a solid foundation for the UI prototype solution.
First Draft of Design Solution: Initial design concepts and layouts.
Pre & Preparation User Testing: Setting up user testing protocols and materials.
Lean User Testing Script, Briefing, Observation & Final Insight Report: Comprehensive documentation for conducting and analyzing user tests.
Refinement of the Prototype Based on Testing Results: Iterative improvements to the prototype following user feedback.
First Draft of Main Pages Interactive UI Design: Development of interactive designs for primary pages.
Conduct the First Usability Testing: Execution of initial usability tests with real users.
Validation & Confirmation of the Design Solution: Ensuring the design met user needs and project goals.
Onboarding the Development Team: Integrating the development team into the project workflow.
Continually project & team management tasks & activities
March 2024
Interactive Prototyping and Final Design Solution
During this phase, I continued developing UI design solutions with interactive prototypes in Figma. These designs were based on user requirements, identified pain points, results from usability testing, and specific use cases and scenarios.
Continuous refinement of tested design concept.
Creation and design of specific UI components.
Developed Interactive Prototypes.
Regular design review workshops, for testing & validation.
Final extended lean Usability Testing
Final Interactive UI Interface.
Ongoing coordination and management of the project & production team.
Integration of UI designs into the HMI software tool.
Finalising & updating all Use cases & scenarios specification.
May 2024
Throughout the implementation phase, the development team continued coding the UI design solution into the required software system, while we managed ongoing changes and additions to the design flow. Concurrently, we maintained project and team leadership activities and prepared for key deliveries.
Onboarding developers into the team: Integrating developers and setting final design and project checkpoints.
Finalised complete product UI interface: Fully developed and integrated UI design for the entire product.
Development of the UI in the required software: Ongoing implementation of the UI.
Incorporating new changes and requests into the final design solution.
Finalising the Basis for Delivery.
Monitoring and Guiding the Team, Overseeing development and testing each use case in a real product environment to validate and confirm production quality.
June 2024
During this phase, we primarily focused on creating and organising all documentation, materials, and assets for handover to the company's internal customer service and large machine department team. This phase centred on documenting the product interface's interaction behaviours, functions, features, project state reports, and the overall performance flow from the user interface perspective. Additionally, I ensured the development team successfully developed and implemented the design interfaces and use cases as well as the assigned scenario tickets.
Final Use Case specification: comprehensive documentation of use cases & scenarios ready for handover.
Delivery and handover of all design materials, Online interactive prototype for easy asses & recordings.
Delivery of development material & files.
Series of Handover, Check-in, Approval & Validation Meetings & Workshops: Coordinated sessions to ensure smooth transitions and validation.
QA testing of the final product: Quality assurance testing to ensure the final product met all requirements.
Delivery & Handover documentation.
