Presentation layer of the Pattern and Asset Library initiative that consolidates UX patterns and UI components for building cohesive and consistent AI apps.
As part of the architectural modernization of all IBM AI Applications portfolio, it became necessary to come up with more consistent visual and UI design standards. The goal was not only to unify the whole ecosystem, but also follow the global movement into Carbon Design System.
While each product worked independently, in most of the cases the customers were the same. Business analysts, reliability engineers, work technicians, among others, face complex and critical problems everyday, so relying on different high learning curve softwares is challenging.
High complexity issues, health risk and safety environments, asset management and maximum optimization, mass production lines, subject matter experts mastering edge technologies. The artificial intelligence industry requires specific UX patterns that goes beyond bits and bytes.
The next step was to align our strategy to the overall IBM, combining the IBM Design Language, Carbon Design System and Watson Brand guidelines, to have a basis for defining the AI Applications flavor.
The team split into exploration fronts and redesigned key product screens based on the different themes provided by the Carbon Design System, such as White, Gray 10, Gray 90 and Gray 100.
It became clear for us that the Gray 10 would be the right choice once it allows better contrast for complex dashboards, data visualizations and tables on top of white tiles which, in turn, could be separated from each other over the darker gray background. Also, its resemblance to some current product screens was important not disrupt existing users.
Gray 10 theme color palette with the blue-purple gradient for AI moments
Simplification of the IBM Productive type set, with minimum variations
Sample of login screen design pattern
Variation of login screen for different product
Sample of dashboard with complex data visualizations