I'm proud to have successfully collaborated with an NC client in the AgTech sector, delivering a customized Human/Machine Interface (HMI) that contributed significantly to their recent Series B funding round, which closed at over $35 million. My HMI design, noted for its accessibility and scalability, was well-received by stakeholders and operators alike. This case underscores the importance and potential of investing in scalable, accessible design and software customization, particularly in crafting an HMI design system that meets current needs and is a robust base for future product development.
The client developed a large-scale food production processing machine that is operated by an external user. The operator monitors the process using a touchscreen interface. Before the project started, I observed the existing machines and witnessed a sample process. During this meeting, I noted the operator's workflow, safety concerns, data visualization, and information hierarchy for a successful production run. Our main goal was to design an interface system that aligns with the client's brand identity, adapts to various screens, and ensures user accessibility. Considering the operators' working conditions and undefined level of knowledge, it was crucial for the design to be user-friendly and easily understandable.
After this essential first meeting, I found the following primary problems that I needed to solve.
Issues with Contrast and Hierarchy:
- I observed a lack of contrast and hierarchy among various informational elements, resulting in conflicting information hierarchies. The primary information presented to users did not align with their daily tasks and the information they regularly needed to scan. This was partly due to the development approach, where the client prioritized machine control over user experience. Although not inherently negative, it deviated from best practices, prompting the client to realign the interface with optimal design principles.
Understanding the User:
- It became apparent that the end-user was not the primary consideration during the interface design phase. The client proceeded with HMI development without giving adequate thought to the daily user interactions. Considering the user's needs became a crucial aspect of the project, ensuring a user-friendly, easily adoptable interface that aligns with their regular tasks.
Fresh Perspective and Creative Solution:
- During our discovery meetings, it became clear that they were in need of an external perspective to create a more modern and innovative HMI solution. The branding laid the groundwork for the project's creative direction, with the branding elements adapting to include accessible design elements necessary for an HMI.
Scalable Design System:
- Once the creative direction was set, I needed a scalable design system to smoothly bring my new design concepts to life and replicate screens without my constant involvement. This allowed them to work independently while maintaining consistency across the entire interface.
Now that the client and I were on the same page regarding the user's needs, product, project, and delivery requirements, I could begin the process of conceptualizing the future HMI design. To kick things off, I first examined the branding elements the client had initially shared with me. I find it crucial to grasp all the creative elements that already resonate with the brand and then determine what can be incorporated. For instance, I noticed that the branded colors lacked sufficient contrast and accessibility (WCAG AAA). This step is relatively straightforward since I'm not introducing new elements at this stage but rather reviewing the existing ones and highlighting any necessary changes.
Next, I took screenshots of the development environment before joining the project. I analyzed each element and grouped critical information. This process provided valuable insights into the client's vision for the screen layout and highlighted important details from our initial meeting. I dedicate ample time to this creative process when ideas flow freely at the project's start. When evaluating a pre-existing concept, it's common to find irrelevant information or a presentation that lacks clarity for the intended audience.
Now that I have all the essential elements that must be included in the HMI, I can proceed with the wireframing process. This time, I will craft screens that effectively present the necessary information for users to take action. By following a low-fidelity approach, I can quickly explore ideas and identify layouts that are not well-suited. While not all ideas are necessarily great, finding the optimal solution when designing an interface without direct user input is important, a vital step for moving forward in an efficient manner.
Once I have found the ideal wireframe that presents all the information in an accessible and visually pleasing way, I can begin the conceptualization process. The client had specifically requested multiple options to choose from for a creative direction before finalizing the design system. The key factor, of course, is that all designs must remain accessible. I have divided this request into three primary concepts. However, I underestimated how complex each concept would be, making it a tough task. Sadly, the effort didn't bring much value since the client and their team picked the very first concept I showed them; while having a good vision is important, going into so much detail for each concept was unnecessary given the project's size, timeline, and my workload at the moment.
The initial concept perfectly fit the client's branding, incorporating user-friendly design elements. In the end, this concept was chosen for the final HMI implementation. I also presented two more concepts with a "gamified" design approach. The client wanted an interface that felt welcoming and not intimidating, so they asked for examples with more game-like design elements before making a final decision. Concepts two and three embraced this request, with design three leaning heavily into a video game aesthetic. To achieve this, I used brighter colors and playful iconography to create a lighthearted atmosphere. It's important to note that these concepts weren't meant to create a less professional interface but rather to provide examples that justified sticking with a more branded concept.
I had the privilege of presenting all my prepared concepts to the entire company. Before presenting to the client's 50+ teammates, I carefully crafted a single presentation that effectively conveyed all the concepts, ensuring a comprehensive understanding of the specific design elements. During the presentation, I acknowledged that my "cartoony" design might not be suitable for the operators, considering the serious nature of their daily work environment. The presentation's focus was not to solicit feedback on the UX or interface hierarchy but rather to align on the preferred creative direction before developing the design system.
This process was invaluable, enabling the entire company to visualize the new HMI and rally behind the desired design. Creating a scalable design system for the HMI can be time-consuming, especially to accommodate the client's future products and user base. We finalized the initial design, paving the way for the design system. To create it, I outlined the necessary elements for developers and future designers to scale with my design. This process is challenging, as these elements must be clearly defined and work within an accessible environment. I highly value the resources from designsystemchecklist.com, as they comprehensively outline all the essential elements for a scalable and reproducible design.
Next, I designed several pages within the system that defined the "why" of the project, user profiles, and design comments for creating new screens. Something to note is that I ensured anyone working with the system can maintain maximum accessibility. Merely providing accessible design tokens or UI elements is insufficient, as they can be easily manipulated without proper design justification. I included notes on how to explore new iterations effectively while prioritizing the scalability of the design for the team. Moreover, the guide contained critical elements such as specific typography, color palettes, icons, spacing, and components to use when building the UI.
After about a month of outlining all the design system elements, I was ready to present again. This time, the design system guidelines and the presentation were pretty close to equal, so I was invited back to the client's headquarters to present the final design system and walk everyone through the final design elements.
To close the project, I provided the final screen or HMI concepts that follow the design system, the design system documentation, and a Figma document that included all of the component versions the client might need to recreate new screens. Providing these final assets to the client allowed them to work without one space and continue to use the design elements to craft new screens for development.
After delivering all the final components to the client, I made myself available to address any questions or revisions the development team might have had during the implementation process. Ultimately, the team successfully integrated the HMI with their machine, resulting in a more accessible experience for operators. This positive outcome significantly impacted the client's series B fundraising round, which closed with over $35 million! While the client's innovative production machines were the primary contributing factor, I received numerous compliments from stakeholders and operators who reviewed the execution of the HMI design system. Overall, I am delighted with the result and proud to have provided comprehensive documentation, UI assets, design direction, design systemization, and prototyping for the successful deployment of the HMI in collaboration with the engineering team.
Thanks to this process, I could now utilize and present a case-specific example to justify investing in scalable and accessible software design. Without customized software, the company falls short of meeting the needs of its staff, everyday users, and stakeholders. By investing in a custom HMI design system, the client can continue to develop new products with an accessible design foundation, eliminating the need to repeat the same process for each new physical product they plan to create in the future.
Key takeaways from this article:
1. Consider investing in customized software: One of the most significant takeaways from this article is the value of investing in custom software, particularly in Human/Machine Interfaces (HMI). As exemplified by the client's success, a customized HMI design can significantly contribute to a product's usability and operator satisfaction, improving operational efficiency.
2. Embrace data-driven methodology: A data-driven approach is fundamental to iterating quickly and making informed revisions. This methodology allows teams to gather user feedback and use it to enhance the product experience, thereby ensuring that the end product aligns with user needs and preferences.
3. Prioritize accessibility in design: When it comes to UX design, and specifically HMI design, prioritizing accessibility is crucial. By designing interfaces that are accessible to all, businesses can guarantee a more inclusive user experience, resulting in greater satisfaction and positive user feedback.
4. Scalability is key: Scalability is the justification for a design system. With a scalable design, businesses are prepared for future growth and can repeatedly add new features or products without overhauling the entire system. This approach saves time and significantly reduces costs in the long run.
Are you curious to know how I assisted a local AgTech client in crafting their HMI from scratch, leading to a remarkable $35M funding round? Explore the comprehensive case study through the provided link for intricate insights into this achievement.
Follow me for a wealth of resources, valuable insights, and lessons I've acquired throughout my decade-long journey in creating user experiences. Appreciate your time in reading my case study!
