top of page
Header.png

Db2 on Cloud

Designing for a cloud-native database built to power low latency transactions and real-time analytics at scale.

ABOUT
Designing for data warehouses

As one of the UX Designers on IBM's Db2 team, we are constantly looking to align our designs across all products.

For my first full-time project, I was responsible for updating the Data Explorer designs to our latest Carbon Guidlines.

ROLE

UX Designer

DELIVERABLE

User flow

TIMELINE

August - September 2022

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 products.png

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. 

Our journey toward product alignment

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.

Process.png

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? 

Maria persona.png

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

Maria Journey.png

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?"

proto 1.png
Proto 2.png

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. 

Proto 3.png
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.

Computer
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.

bottom of page