Conveyor AI
A low-code AI development platform that bridges the gap between AI, software development, and
operations to build end-to-end solutions.
ABOUT
Design at the heart of AI
With Conveyor AI, what previously took weeks can now be completed in mere minutes. Conveyor AI’s low-code platform allows users to connect ML models from industry leaders like Google and Microsoft as well as IBM Watson. You choose the model and Conveyor AI bridges the gap between inputs, AI models, and outputs; and features a one-click “Deploy” to take care of the DevOps.
I began my time on the Conveyor AI team to create an incredible discover experience in July, 2022 with
IBM's Pattern's program. Through collaboration with our team of designers, developers, and users, we have made the AI field more equitable and accessible for all.
ROLE
Product designer
DELIVERABLE
Website
TIMELINE
July - October 2022
1
Challenge
Conquering AI Barriers
Developing AI models requires deep AI knowledge, experienced technical teams, and long periods of time to train those models. Even once built, connecting those AI models into a seamless end-to-end AI application takes further time and effort. A single engineer working on a proof of concept of 8 weeks costs over $8,000.
With Conveyor AI, we were determined to tackle the fierce barrier to entry for people with low-code backgrounds, and create an introductory AI experience for everyone.
2
Process
How did we get there?
Let's set the scene: you're assigned to an innovative project on AI, and you are new to the AI App space 😧
In the moment, it's easy to wonder if you're even qualified to design a landing page for this incredible team?! However, like anything, once you start asking questions, your heart rate goes down and the scope begins to narrow.
Project kickoffs are one of my favorite parts of the design process: you have an entirely new perspective on the challenge that will be your night and day for the next few months.
That said, after reviewing our onboarding materials I had a lot of questions when we had our kickoff meeting with the Conveyor AI team. Some of which being...
Our design journey
Following IBM's Enterprise Design Framework, we were able to address these questions with a human-centered focus to design an AI app builder that would create meaningful user outcomes.
A Deep dive into the AI market
As someone who was new to AI apps, I knew this phase of our process was essential to getting my feet on the ground.
I was immediately fascinated by the level of innovation to produce AI apps. Companies such as internal.io, Amazon SageMaker, and Obviously.ai have made an impact in the market.
Mental note: be wary of projects that nudge your curiously and creativity too much... it stops feeling like work 🤓
To best understand the challenge at hand, we divided our research into 3 main areas:
Competitive Research
What makes our competitors successful?
AI Market Research
What’s the future of AI app builders?
Conveyor AI
What are the painpoints with the existing Conveyor AI site?
Walking in a low-code developer's shoes
Our team conducted 11 interviews with our sponsor users and stakeholders to create a continuous cycle of observing, reflecting and building. Throughout each interview in our design process, we collected a vast amount of research on competitive analysis and use cases for AI applications.
Because we already had an existing Conveyor AI prototype, we were picking up where the previous design team left off. We identified the gaps between the previous prototype and AI App builders that thrive on the market today.
Click to view full slide show
Defining our hill
We discovered that users needed an AI application builder, Conveyor AI, to efficiently and effectively justify the value AI brought to their organization. And this starts at the beginning, with a memorable discovery experience.
To create a strong first impression our design team decided to build an engaging and playful product landing page that would break down the intimidating barriers that most AI builders carry.
We created User Journey Maps, As-Is Scenarios and Empathy Maps to lead us to our Hill and identify the who, what, and wow of Conveyor AI.
This led us to our value proposition: A low-code developer is inspired to try ConveyorAI within 5 minutes of browsing the website.
Do I know any low-code developers?
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.
Click to view full persona card
Ideating the optimum experience
Now that we've met 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 discovery 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 user journey
A glimpse into our prototyping iterations
Putting pen to virtual paper, our design team worked in Figma to craft various low-fidelity prototypes on what a product landing page for Conveyor AI could be, reflecting the information we gleaned from our UX research.
We created 12 separate mockups to illustrate different ways to visualize the power of Conveyor AI. We focused on the hierarchy of information, the voice and tone, and focussed on relevant call-to-action buttons, all while keeping our user’s needs at the forefront of every design decision.
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?"
Then, we conducted 4 interviews with “Sponsor users” (a program that enables external clients to be involved throughout the lifecycle of the product) to test the usability and accessibility of the redesigned Conveyor AI website.
Through each iteration, we refined the hierarchy of information, the content design, and the call-to-action buttons, carefully considering all design decisions. Through several iterations and validation from stakeholders and users, we felt confident in crafting a delightful and intuitive Discover experience.
Prototype 2: Color block
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: Editor preview
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.
3
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.
Engaging Gifs:
We created a cartoon gif that illustrates the Conveyor AI development process in the header. This gif combines a demonstration of Conveyor AI's use cases, while tackling the intimidation barriers.
Intuitive Language:
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.
Clear 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.
4
Impact
Launch and Next steps 📝
Entering the AI Market
On October 4th, 2022 we officially launched our Conveyor AI website! After sharing the ConveyorAI.com link on LinkedIn and IBM Slack channels, we received an overwhelming amount of positive feedback on the site with over 2000 impressions. Upon posting our site, hundreds of people joined the waitlist and are actively waiting for Conveyor AI’s official release!
Launch the editor view
Now that our site is live, our team has been hard at work launching our AI orchestration tool, which will officially release in February 2023. With Conveyor AI, we’ve proven that design and UX research infused into a highly-technical product can go a long way to making AI accessible for users of different skills and backgrounds.
Reflection 🧠
Startups within IBM?!
This was my first HyperBlue project at IBM. I really enjoy working with the HyperBlue team because it mirrors a start-up environment: you are designing and developing digital solutions so fast, and you see almost immediate outcomes of your work. On the other hand, my projects with my Db2 team have a slower production cycle on larger platforms such as Db2 Warehouse on Cloud.
We get the best of both worlds at IBM: as designers we experience the fast-pace buzz of a start-up while encountering the longer timeline with each quarterly release!
