Low-Code App Player UI
TL;DR: To push for an implementation of a new UI design system, I created a prototype using React.js, Sytled Components, and Heroku. The demo was used to showcase a new UI system based on WCAG standards, and human factors on shop floors settings.
Introduction
I developed a prototype for a new UI design system for the Tulip App Player, a core component of Tulip Interfaces—a B2B SaaS platform for manufacturing. The goal was to modernize the App Player's outdated UI, improve functionality, and align it with WCAG 2.0 accessibility standards while optimizing for human factors in shop floor environments.
Design Approach
The design was influenced by shop floor ergonomics, specifically the large, intuitive buttons commonly found on industrial machinery.
Considered the diversity of devices used with the App Player, ensuring responsiveness across different screen sizes.
Prioritized high-contrast elements and simple navigation to enhance usability in complex manufacturing environments.
Development Stack
React.js and Typescript for building dynamic, responsive UI components.
Styled Components for modular, maintainable styling and seamless theme management.
Heroku for rapid prototyping, deployment, and showcasing the demo to stakeholders.
Focused on component reusability to support future scalability and maintainability.
Key Features
WCAG 2.0 compliant design for improved accessibility.
Responsive UI optimized for shop floors with both touch and desktop interactions.
Prototype-driven development to gather feedback quickly from stakeholders.
Before and After Pics:
