ROLE

Lead Product Designer

RESPONSIBILITY

Design research, design project management, UX and UI design

OWNERSHIP

Zinier

Zinier AI Model Builder

Background
Zinier is a field service automation platform, and its AI model builder is one of its key features aimed at addressing the unique challenges faced by Zinier clients in their business use cases.
AI Models builder enables businesses to create their own configurable AI solutions tailored to their specific needs.
Challenge
Designing an AI Model Builder has been quite a challenge because not many people have used such a tool before, and there aren't many examples to learn from.
So I needed to learn about basic AI Models to get a good grasp of what AI models are and how they work.
Design Process

The design process for this project is quite straightforward, I started by defining the project scope and goal and continue with research for AI Models and the user.

I do quick prototyping and some iteration before go to high fidelity prototype and handover to the developer. In total it took a month to complete the project. 

design-process
IMG_0279-1
Understanding what is AI Model? How does it work?

After defining the project's goals with stakeholders, I spend my first week understanding how AI models work with guidance from our AI expert. During this session, we also explore initial concpts for the user flow of the AI Model Builder.

This session is crucial because it's where I begin to consider possibilities and the best approach to tackle the challenge.

Look at those numbers! :)


Ok, so what is AI Models?
An AI model is like a smart computer program that has been trained to do specific tasks, like recognizing pictures or answering questions. It learns from lots of examples and uses what it's learned to make decisions or predictions. Think of it as a trained robot brain inside your computer.

Solution exploration

I created clickable prototype with the help of our AI expert, this help me ironing my understanding of building AI Models and the prototype is also usefule for the user testing.

The primary goal of this user testing is to gather feedback and assess knowledge gaps about AI Models among our users. This would help define the end solution.

Who is the user?
The primary user of this feature is a Zinier developer who will utilize it to optimize or automate specific workflows based on client requests. The next user group comprises the client's IT team, who will serve as superusers.

IMG_0278-1
Synthesize user testing

Based on user testing, we have identified that a majority of users encounter difficulties when building AI Models, often spending a significant amount of time on the process.

Overall, it appears that constructing AI Models is perceived as complex, even by users with experience in similar products.

Problem statement

How can we simplify the process of building AI models for new users while retaining its functionality for experienced ones?

Solution
So to tackle this problem, we focus on creating an intuitive interface with step-by-step guidance for beginners. Advanced features can be made available but not mandatory, ensuring they're accessible to experienced users without overwhelming newcomers. 

I organised each steps of building AI Models into different page, so user user is not overwhelemed with the long process and complexity. Each page will be contained only 2 or 3 individual tasks. User is able to back and forth between steps and they can also save the progress.

user-flow-2
ai-models-builder-3
New design system and components

To enhance users' understanding of the AI model creation process, we are introducing new design system and components for this feature.

Unlike other features in the Zinier platform, the AI Models Builder occupies an entire page with left navigation, offering a comprehensive, step-by-step guide to building AI models. We also included descriptions for each term, ensuring that users understand their meanings and the intricacies involved in creating AI models.

Page structure
Controller and status

This section serves as a page control, allowing users to navigate back and forth between pages, save their progress or exit the builder.

Configuration pages

This left panel shows pages of building AI Models. User can back and forth between these pages.

Content and result window

This content page is designed to hold different type of parameter that is need it to setup the AI Model.

AI-Models-builder-1
Final design and user flow
Step 01:
Select AI Model template

When user create AI Model, they need to select AI Model template, AI Model template is a pre-defined framework or structure that serves as a starting point for building AI Models. These templates are designed to streamline the development process of AI models.

User then enter information about the AI Model such as name and description.

AI-Model-template-4
AI-Model-data-source
Step 02:
Select data source and define target column

User need to select the data set source, from which the training data for the model is obtained. It's the primary reservoir of data that the AI model will learn from. Data can be take from various source, such as from existing data set, specifiying from data query or from workflow.

After data has loaded, user need to select Target Column that is compatible with AI model template. In short target column is refers to a specific column or attribute in a dataset that represents the variable you are trying to predict or understand


Step 03:
Train and test the AI Models

When ready, user can start training their model and evaluate the results. We provide tools and parameters to test their model.

Users are able to go back to previous steps to update their data if needed.

 

ai-model-training-evaluate
ai-model-published
Final step:
Save and publish!

Finally, when the user has achieved their desired result with the AI model, it's time to publish the AI model.

This AI model can be embedded into different features within the platform. For example, the AI model can be used to provide recommendations for task duration, image verification, and more.

Impact

1. The layout and components used for this feature have also been reused for other features, opening up new possibilities and improvements throughout the Zinier platform.

2. The design make it easy for new user/client to on-board with this AI Model builder, user quickly utilise it and implemented in their project.

all-components

This feature has become an important milestone for Zinier to become field service automation platform. It is featured on the Zinier website with only minor improvements since the first iteration.

More information about this features: zinier.com/platform/configurable-ai

Screenshot-2023-09-25-at-3.56.52-PM

Let's talk!
istiko[at]gmail.com

DESIGNED BY ISTIKO RAHADI