
Watsonx.data
Put your data to work, wherever it resides, with the hybrid, open data lakehouse for AI and analytics
ABOUT
A hybrid data lakehouse for AI
As one of the UX Designers on IBM's Data Management team, we are constantly looking to align our designs across all products.
I have worked on projects across IBM's Db2 portfolio and our most recently launched watsonx platform. For this project, I was responsible for updating the Data Explorer designs to our latest Carbon Guidelines.
ROLE
UX Designer
DELIVERABLE
End-to-end experience
TIMELINE
August - September 2024
01
Challenge
The struggle for a unified experience
IBM offers 9 core database software and solutions from to help you integrate data from different sources across on-premises and cloud environments. Each one of those products has their own design team.
Amongst all of the separate products and design teams, inconsistencies arise in the handoff from design to development to project management.
Thus, we are not producing a singular experience across all our of our products.

ibm.com
02
Process
Designing for tech that's hard to get 🤓
I am a first-year UX Designer on IBM’s Db2 Warehouse on Cloud platform. Now, unless you’re a database administrator, enterprise architect, or developer, you might not know what Db2 is. So, let’s break it down in IBM’s terms:
IBM Db2 is the cloud-native database built to power low latency transactions and real-time analytics at scale. It provides a single engine for users to keep critical applications running, store and query anything, and power faster decision making and innovation across your organization.
Ok ok... Let's break that down. In other words...
IBM Db2 is a cloud data warehouse solution that helps businesses manage their data in an easier and faster way.
Provided that the Db2 platform has existed and been developed for years, I was presented with a wealth of onboarding materials. I am a very visual person, and I found creating a Mural of the technical terms and analogies were a helpful way to make ideas like
data migration and exploration more tangible in my mind. Have you ever thought of a Cloud Database that serves clients like Exxon Mobile could be compared to a an ice cream shop? Neither did I until designing for them everyday.

Day in the life of a data engineer
Throughout my role as a UX Designer on the Db2 team, part of the challenge of designing has been learning all of the technical terms. That said, I owe it to my team for making the onboarding process as smooth as possible.
I am a very visual person, and I found that creating a Mural of the technical terms and analogies were a helpful way to make ideas like
data migration and exploration more tangible in my mind.
Once I came up with my list of analogies for a given project, I would share it with my team for visibility and feedback. I not wanted to share this board as a resource my whole team, but for them to contribute their own methods of connecting with products.
Empathizing with WHO we're designing for
We had the opportunity to conduct 11 interviews with our sponsor users and stakeholders. Throughout each interview in our design process, we we were able to define our scope and narrow our focus more.
Because we already had an existing, working Conveyor AI prototype, a lot of our work consisted of picking up where the previous design team left off. We were determined to identify the gaps between the previous prototype and AI App builders thrive on the market today.
Click to view full slide show
Synthesis & our hill
After consolidating rounds of grouping (and ungrouping) stickies in Mural, questions & assumptions, empathy maps, journey maps, and as-is scenarios, we were able to create our hill and identify the who, what, and wow of Conveyor AI.
A low-code developer is inspired to try ConveyorAI within 5 minutes of browsing the website.

Do I know any low-code developers?

Click to view full persona card
Great question. Most people with "developer" in their title are thought to be experts in coding. However, in the AI space developers are faced with new challenges.
So, with that... let me introduce you to Maria!
Maria is a developer tasked with integrating different AI models into her team's applications. AI is not her focus, so she's kind of stumped as to where to begin.
Thus, she turns to her trusty friend, the internet.
Ideating the optimum experience
Now that we're all familiar with Maria, what's the best way that we can help her as she discovers Conveyor AI's platform?
We knew the core requirement was to create a landing page and optimize the user's discover experience.
While we had creative freedom over the sites design, there were requirements that were helpful to guide our design process and narrow our scope.
Some of our core requirements included:

Follow the style guide, which is deeply inspired by IBM's Carbon Design System

Design a playful interface to grab user's attention

Have clear call-to-action buttons for people to stay connected with Conveyor AI

Click to view full empathy map
A glimpse into our prototyping iterations
Time to put all of that research to the test and get into Figma! We dedicated the most time to our prototyping and testing process.
As a designer, I am extremely visual and am eager to create wireframes and get feedback as early as possible.
With each iteration of the website header, we were able to fine-tune our designs and meet our sponsor users and stakeholders needs.
None of this would have been possible if it wasn't for the honest feedback that our stakeholders provided.
Prototype 1: Dark Mode
Key features:
-
Dark mode
-
Preview of the Node Editor
Feedback:
-
"The dark design is pretty intimidating."
-
"The call to action draws my attention, but what if I want to sign up right away?"


Prototype 2: Playful
Key features:
-
Playful, colorful UI
-
"Schedule a demo" call to action
Feedback:
-
"I prefer a preview of the Editor in the header. The shapes don't fully encapsulate the power of Conveyor."
-
"This is too bright. I'm overwhelmed."
Prototype 3: Playful with UI
Key features:
-
Preview of the Node Editor interface
-
Visual example of a use case
Feedback:
-
"I don't fully understand what Conveyor AI does in the headline text."
-
"I like the preview of the node editor, but this feels too static.

03
Solution
After many variations of the Conveyor AI site and playbacks to our stakeholders, we arrived at our final design deliverable.
For this case study, my primary focus has been on the website header. This was my first time designing for a product launch, and it is evident that first impressions are everything.
After ensuring that the designs were pixel perfect and made sense to people who were completely new to the AI app space, we presented our site to the VP of Design, Katrina Alcorn and received wonderful feedback.


Design decision breakdown:

Accessibility:
We followed IBM's Accessibility Toolkit and the Nielsen Norman Group's Heuristic evaluation guidelines to ensure that Conveyor AI is used by people of all diverse abilities.

Gif:
This gif combines demonstration of Conveyor AI's UI and use cases while keeping it simple and fun with graphics that don't scream "dense data."

Header text:
After many iterations on our content, we found that "Low code. High Impact" was the most clear phrase to capture low-code developer's attention, while describing what Conveyor AI is.

Call to action:
We decided that "Join the waitlist" is the best way to encapsulate the current status of Conveyor AI - that we are currently in beta. From "Schedule demo" ➡️ "Try a demo" ➡️ "Talk to an expert"... "Join the waitlist" aligns best to IBM Carbon's Design Principles.