C3.ai is a leading provider of big data and AI applications. Together with our customers‚ we build applications that solve some of their most complex‚ data-driven problems. Creating these applications involves a wide range of steps including data discovery‚ data modeling‚ data integration‚ development of machine learning algorithms‚ and AI deployment. One crucial step in this process is developing the user interface that governs end-user interaction and experience with these applications.
As we scale to serve more and more customers‚ we are upgrading our UI framework to help us deliver the best application experience to our customers and make it faster and easier to deploy enterprise AI at scale. In the process of defining the requirements for this next-gen UI framework‚ we have identified three crucial ingredients: best-in-class front-end technology‚ a set of reusable UI components built using a standardized design language‚ and a no-code UI design tool.
Best-in-Class Front-End Technology
We initially built the C3.ai UI framework on Bootstrap. With the emergence of React/Redux‚ we are upgrading our UI framework to use this best-in-class technology. Our UI development team uses React to develop our interactive user interfaces and Redux to manage the application state. Using these technologies‚ we are creating our own set of user interface components that fulfill the needs of end-users who want to visualize outputs of big data and AI algorithms and navigate through intuitive workflows to get their job done. Our UI framework is tightly integrated with the C3.ai model driven architecture. This means that every component we build is a C3.ai Model and can be configured as such‚ and thus can leverage the power of the C3 AI Platform by allowing developers to use all of its prebuilt functionality. This integration also allows customers to integrate their own prebuilt React components by declaring their configurations in C3.ai Models so that they don’t need to rely solely on the library of components that we have created.
Standardized Design Language (SDL)
Alongside building our upgraded UI framework‚ we embarked on a journey of creating our own design system: C3.ai’s standardized design language (SDL). This effort involves designing a common and reusable front-end look and feel‚ and a large number of user interface components that have extensive functionality and are integrated with the rest of the C3 AI Platform. All our UI components are designed using SDL and will be the building blocks of every application UI we create. Our Design Innovation Lab has done extensive user research and prototyping to come up with components that allow us to build the most modern user interfaces. These components (such as big data analysis charts‚ geospatial maps‚ tables‚ and so on) are designed to meet the needs of customers looking to build rich application user interfaces. Our SDL will allow us to achieve a number of objectives:
- Scale – To manage the growing number of applications that we and our customers are building‚ we need to be able to manage application design at scale. Having a series of components that can be reused in different combinations allows us to develop a large number of diverse‚ rich‚ and fit-for-purpose applications.
- Consistency – Not only do we want to build a large number of rich applications‚ but we want these applications to have a consistent look‚ feel‚ and user experience. Using SDL‚ we created a large set of components and will maintain and update them to meet new functional requirements. These components look‚ feel‚ and perform in the same way regardless of the application‚ but they can be configured to fulfill the specific needs of a particular application.
- Efficiency – With a standardized system of reusable components that are easily configurable‚ we can drastically reduce the time and effort required to build our applications.
Starting with this standardized set of components‚ customers can configure them to fit their specific application needs and customize them to meet their company’s brand guidelines.
No-Code UI Designer
Our ultimate goal is to enable anyone with basic development skills—visual designers‚ product managers‚ or business analysts—to configure rich user interfaces for C3 AI Platform applications. Our first major step to meet this goal is our UI Designer. It is an intuitive UI builder that allows users to leverage our SDL components and upgraded UI framework without the need to code. Dragging and dropping components onto a page‚ configuring these components and pages‚ and selecting data to be visualized is all done through a visual interface powered by the C3.ai model-driven architecture on the back end—all the configurations are stored as metadata and are easily editable outside of the UI Designer as well‚ using a developer’s favorite IDE.
Through UI Designer‚ users building the application UI can leverage all the work done by developers and data scientists in defining the data model and machine learning outputs‚ without having to delve into the complexity themselves. UI Designer equips these users with the underlying C3 AI Platform capabilities to develop an AI–based application in a matter of days. This can have a truly transformational impact on how enterprises design‚ develop‚ and deploy AI applications at scale.
