App Library Part I: UI Templates & Guidelines

Introduction

Tulip Interfaces is a leading B2B SaaS platform for manufacturing, designed to empower companies by capturing, analyzing, and optimizing operational data. The Tulip ecosystem consists of four core components:

• No-Code Visual App Builder: Enables the creation of manufacturing applications.

• App Player: Facilitates the use of these apps while capturing operator data.

• Machine Monitoring Hub: Collects machine data from various sensors.

• Digital Factory Dashboard: Provides tools to analyze and visualize operational data.

As Tulip expanded, the need for shareable content and collaborative growth opportunities became evident. This led to the creation of the Tulip App Library, a platform where Tulip’s citizen developers can share, discover, and build upon existing applications, fostering innovation across the customer base.

Challenge

During an organizational restructuring, I was offered the unique opportunity to lead the development of Tulip Library V.0 in a new role, where I acted as both a UI/UX Designer and a Software Developer. The primary challenge was to design a scalable UI Design System and develop accompanying guidelines tailored to diverse user personas:

1. Tulip Experts & Contractors - Advanced users familiar with Tulip’s ecosystem.

2. Manufacturing Engineers - Users integrating apps into operational workflows.

3. Factory Workers & Managers - The end-users interacting with these applications daily.

Key questions that guided the project:

• What language and structure would make the guidelines accessible to non-designers and non-engineers?

• What are the technical limitations of Tulip’s App Builder when creating UI?

• How can we ensure the design system meets the needs of a broad spectrum of user personas?

Research & Discovery

1. Data Collection

I compiled a comprehensive set of UI samples from both internal teams and customers. This helped identify:

• The most frequently used App Builder Widgets and their functionalities.

• A list of common manufacturing UI patterns required in the guidelines.

2. Usability Testing

To understand the capabilities and constraints of the App Builder, I conducted a controlled test with six participants.

• Participants were tasked with building sample apps based on two pilot UI systems.

• I measured performance based on: Color contrast decisions ,Typography and sizing accuracy ,Dimensional precision, and Time efficiency

These insights helped refine:

• The language and structure of the guidelines.

• UI patterns that minimized friction for end-users.

• Design practices that yielded the best visual and functional outcomes.

3. Accessibility & Inclusivity

While creating the guidelines, I incorporated:

• WCAG 2.0 accessibility standards to ensure usability for all individuals.

• User stories to address the needs of each persona, enhancing inclusivity.

System Design & Execution

The final UI Design System included:

• Detailed design guidelines for app builders.

• Reusable templates to streamline the app creation process and reduce redundancy.

• Best practices for layout, color schemes, typography, and widget usage.

These components ensured consistency, efficiency, and scalability across all Tulip applications.

Results & Impact

The implementation of the UI Design System and guidelines delivered significant improvements:

• 47% reduction in the time required to build manufacturing applications.

• Facilitated the creation of 60+ manufacturing apps deployed across factories worldwide.

• Enhanced collaboration and knowledge sharing within the Tulip community.

Following the success of the design system, I transitioned to designing and developing the Tulip App Library to house and distribute these applications.