Switch to PC/Tab to know the design process
Switch to PC/Tab to know the design process
Switch to PC/Tab to know the design process
Switch to PC/Tab to know the design process
AI-Chatbot for FourKites
Fin AI - Chatbot
FourKites planned an AI bot to enhance user interaction. I was tasked to design UI, visuals, and defined use cases for Fin AI.
Problem
Designed the UI and visuals with adaptive components for seamless Fin AI interaction.
Solution
First ever integration of A.I. products within company.
Impacts
1 week (First release in Sep - 2023)
Duration
Kevin Miranda (Sr. UXD) Me (UXD)
My Team
Visual and interaction designer / UI designer / Research.
My Roles
FourKites planned an AI bot to enhance user interaction. I was tasked to design UI, visuals, and defined use cases for Fin AI.
Problem
Designed the UI and visuals with adaptive components for seamless Fin AI interaction.
Solution
First ever integration of A.I. products within company.
Impacts
1 week (First release in Sep - 2023)
Duration
Kevin Miranda (Sr. UXD) Me (UXD)
My Team
Visual and interaction designer / UI designer / Research.
My Roles
FourKites planned an AI bot to enhance user interaction. I was tasked to design UI, visuals, and defined use cases for Fin AI.
Problem
Designed the UI and visuals with adaptive components for Fin AI interaction which was the first ever A.I. bot integration within company.
Solution and Impacts
1 week (First release in Sep - 2023)
Duration
Visual designer / Interaction and UI designer / Research.
My Roles
Opportunity and context
Opportunity and context
Opportunity and context
Context
With fast-moving A.I. trends in 2023, FourKites had planned to launch its own A.I. bot. This bot needed to provide an helpful and informative experience on the screen whenever users needed it. However, it was just an idea, not a visual, yet.
Context
With fast-moving A.I. trends in 2023, FourKites had planned to launch its own A.I. bot. This bot needed to provide an helpful and informative experience on the screen whenever users needed it. However, it was just an idea, not a visual, yet.
Context
With fast-moving A.I. trends in 2023, FourKites had planned to launch its own A.I. bot. This bot needed to provide an helpful and informative experience on the screen whenever users needed it. However, it was just an idea, not a visual, yet.
Constraint, deliverables and its deadline
Constraint, deliverables and its deadline
Constraint, deliverables and its deadline
Deadline
Fin was set to be a major milestone for FourKites since the very beginning, marking its entry into the A.I. world. With a 20-day deadline for the global visibility conference, I had 7 days to deliver the visuals and UI which would be showcased to top companies such as Coca-cola, 3M, Unilever, Nestle and 115 more.
Deadline
Fin was set to be a major milestone for FourKites since the very beginning, marking its entry into the A.I. world. With a 20-day deadline for the global visibility conference, I had 7 days to deliver the visuals and UI which would be showcased to top companies such as Coca-cola, 3M, Unilever, Nestle and 115 more.
Deadline
Fin was set to be a major milestone for FourKites since the very beginning, marking its entry into the A.I. world. With a 20-day deadline for the global visibility conference, I had 7 days to deliver the visuals and UI which would be showcased to top companies such as Coca-cola, 3M, Unilever, Nestle and 115 more.
Tasks
At this stage, the bot’s functionality was undefined. My primary task was to design a flexible visual pattern that could be showcased immediately and adapted later with minimal changes, despite unclear goals.
Tasks
At this stage, the bot’s functionality was undefined. My primary task was to design a flexible visual pattern that could be showcased immediately and adapted later with minimal changes, despite unclear goals.
Tasks
At this stage, the bot’s functionality was undefined. My primary task was to design a flexible visual pattern that could be showcased immediately and adapted later with minimal changes, despite unclear goals.
Visual language and goal
Visual language and goal
Visual language and goal
What experience do we wanna give out?
While the UI patterns needed to align with FourKites' design system, understanding the intended user experience was crucial. I engaged with a few internal teams and analyzed the PRD to define the experience we aimed to deliver.
What experience do we wanna give out?
While the UI patterns needed to align with FourKites' design system, understanding the intended user experience was crucial. I engaged with a few internal teams and analyzed the PRD to define the experience we aimed to deliver.
What experience do we wanna give out?
While the UI patterns needed to align with FourKites' design system, understanding the intended user experience was crucial. I engaged with a few internal teams and analyzed the PRD to define the experience we aimed to deliver.
Detail driven
Detailed data and informative designs.
Detail driven
Detailed data and informative designs.
Detail driven
Detailed data and informative designs.
Clarity
Clean, clear and straightforward designs.
Clarity
Clean, clear and straightforward designs.
Clarity
Clean, clear and straightforward designs.
Consistency
Uniformity in screen, with very little learnability.
Consistency
Uniformity in screen, with very little learnability.
Consistency
Uniformity in screen, with very little learnability.
Data driven
Ability to view sufficient data upfront.
Data driven
Ability to view sufficient data upfront.
Data driven
Ability to view sufficient data upfront.
The basic needs of the users and habits
The basic needs of the users and habits
The basic needs of the users and habits
What experience do we wanna give out?
Building the wireframe for chatbot was easy with many online patterns and familiar visuals. After understanding the user insights and preferences, a rough skeleton was created to serve as the base.
What experience do we wanna give out?
Building the wireframe for chatbot was easy with many online patterns and familiar visuals. After understanding the user insights and preferences, a rough skeleton was created to serve as the base.
What experience do we wanna give out?
Building the wireframe for chatbot was easy with many online patterns and familiar visuals. After understanding the user insights and preferences, a rough skeleton was created to serve as the base.
How did our users perceive data?
Users relied on FourKites' data, shown as graphs, data-lists, and maps. List view, and card view were selected as the 2 main sources of data that Fin A.I. would use since these formats were the ones users used.
How did our users perceive data?
Users relied on FourKites' data, shown as graphs, data-lists, and maps. List view, and card view were selected as the 2 main sources of data that Fin A.I. would use since these formats were the ones users used.
How did our users perceive data?
Users relied on FourKites' data, shown as graphs, data-lists, and maps. List view, and card view were selected as the 2 main sources of data that Fin A.I. would use since these formats were the ones users used.
Iterations on the visual language
Iterations on the visual language
Iterations on the visual language
Within design system
While identifying use cases, I reviewed the design system to understand the color options. Though it limited creativity, it provided the necessary elements to align the product with the company's style and would further help me.
Within design system
While identifying use cases, I reviewed the design system to understand the color options. Though it limited creativity, it provided the necessary elements to align the product with the company's style and would further help me.
Within design system
While identifying use cases, I reviewed the design system to understand the color options. Though it limited creativity, it provided the necessary elements to align the product with the company's style and would further help me.
Final Design
Final Design
Chatbox in the corner
Fin A.I. is a chatbox in the bottom right corner, handling human-like conversations, generating reports, data tables, and graphs.
Chatbox in the corner
Fin A.I. is a chatbox in the bottom right corner, handling human-like conversations, generating reports, data tables, and graphs.
Chatbox in the corner
An automated system to create, and mail the reports directly to customers, eliminating the need for users to create them manually.
Impact of the prototype
Impacts
1st ever integration of an A.I. element into the company and laying the foundations of UI for future A.I. related projects. and ofcourse...
1st ever integration of an A.I. element into the company and laying the foundations of UI for future A.I. related projects. and ofcourse...
1st ever integration of an A.I. element into the company and laying the foundations of UI for future A.I. related projects. and ofcourse...
Tons of branding and showoff at the visibility conference 2023 in front of big clients such as Coca-cola, Nestle, Unilever, Bestbuy etc.
Tons of branding and showoff at the visibility conference 2023 in front of big clients such as Coca-cola, Nestle, Unilever, Bestbuy etc.
Tons of branding and showoff at the visibility conference 2023 in front of big clients such as Coca-cola, Nestle, Unilever, etc.
It was a little more chaotic process. Curious? Let’s talk. 🤓
It was a little more chaotic process. Curious? Let’s talk. 🤓
Wanna know more? Let’s talk. 🤓