The AI Applications pattern and asset library (PAL) is a growing set of design standards, documentation, and principles, along with a toolkit to achieve those standards. It helps guide AI Applications product teams to prototype and deliver user experiences that have consistent interactions, workflows, and aesthetic.
The AI Applications pattern and asset library (PAL) is a growing set of design standards, documentation, and principles, along with a toolkit to achieve those standards. It helps guide AI Applications product teams to prototype and deliver user experiences that have consistent interactions, workflows, and aesthetic.
The AI Applications pattern and asset library (PAL) is a growing set of design standards, documentation, and principles, along with a toolkit to achieve those standards. It helps guide AI Applications product teams to prototype and deliver user experiences that have consistent interactions, workflows, and aesthetic.
The AI Applications pattern and asset library (PAL) is a growing set of design standards, documentation, and principles, along with a toolkit to achieve those standards. It helps guide AI Applications product teams to prototype and deliver user experiences that have consistent interactions, workflows, and aesthetic.
The AI Applications pattern and asset library (PAL) is a growing set of design standards, documentation, and principles, along with a toolkit to achieve those standards. It helps guide AI Applications product teams to prototype and deliver user experiences that have consistent interactions, workflows, and aesthetic.
Role
When
Where
UX & UI
2020 - present
IBM
The problem space
IBM's enterprise design system can be too expansive and generic to be used to align domain-specific teams. The AI Applications PAL provides designers with the resuable assets they need from the enterprise design system, but with an specific focus on products in the AI Applications portfolio.
My role
Day-to-day I am identifying gaps and working to deliver frequent updates and additions to interaction patterns and other assets for use by the entire portfolio of products. My bigger-picture responsibilities include displaying leadership within UI & UX patterns and innovation for the creation, governance and improvements to design systems.
Extending the Design System
At IBM, Carbon is the company-wide design system that we use to build our products. It is built in a way that is to be identifiable as IBM, but open enough to support the gamut of products we offer. While this is a good thing for wide adoption, it opens a gap for products in the same domain space to reinvent the wheel everytime a common user interaction or flow is needed. This is what prompted the creation of the AI Applications PAL, an opinionated extension of the company design system.
Not to be confused as a design system for the design system, but rather the design system when it comes to products in the AI Applications portfolio. This library uses all the building blocks of Carbon, getting updates and changes upstream. This enables AI Applications designers to stay aligned with brand, while also speeding up their workflow with commonly used, and user-validated, composed components and user flows pertaining to products similar to theirs.
I collaborated with the consulting arm of IBM (Global Business Services, GBS) to make some early UI concepts for the iOS app Visual Inspector.
This work started at the wireframe level where the team and stakeholders rapidly spun up a flow together, while adding assumptions and questions directly on the flow. I've found this is the easiest way to get everyone talking the same language around an abstract subject. To quote my friend and colleage Gabriella Campagna Lanning, "no prototype, no meeting". Having a prototype, even at the wireframe level, gives cross-collaborative teams an anchor point to talk around.
WIth no official standards for iOS applications, it fell upon me to imagine what IBM's design system, Carbon, would look like and function inside of a mobile app.
Adoption process
10 days
14 days
10 days
Ongoing
Collaborate + collate
Iterate
Guide + publish
Evangelize
Finding order in chaos
Even though the scope of the AI Applications PAL is smaller than that of Carbon's, 38+ products is still a large pool to try and align with each other. We started the alignment effort by getting plugged into every product and sitting in on critique sessions. It was important for us to understand the space each of our teams were working in so that we didnt over-genericize a flow or component, rendering it unsuable to the designers and antithetical to our library.
After identifying a common flow or component, I establish a workgroup with designers currently using the interaction pattern and those looking to implement it. On a virtual whiteboard, we add the use cases we have for the interaction pattern as well as any similar patterns from other teams and products. Having all the instances laid out lets the group identify commonalities and weigh pros and cons of different iterations.
Taking a 10-day sprint to identify and collaborate, the workgroup and I have a 1st iteration of the interaction pattern to stress test inside each product. From those results I am able to garner guidance and best practices when using the pattern which is written and published to the PAL with the component after it is finalized. In tandem with publishing the usage guidance we work with our development team to make sure the pattern is implemented, following the design from end-to-end.
A sample of some common flows from the PAL library: data exploration, order optimization, service linking, detailed view, and database setup
Outcomes
The end result is a resource that enables designers and developers to move faster and spend more time on the work that needs discovery. The library is ever-growing too. By following an open contribution model, any designer in AI Applications can submit their interaction pattern and I'll work with them to get it into the PAL through the adoption process.
Components
23
Page flows
22
Contributions
78
Teammates
Teammates
Design lead
Visual Design
Content Design
Diana Tran →
Najil Kunnathur
Robin Rock
Keep reading
