Switch to pc/tab to view design process.
Visuals of Fin
Fin AI is FourKites' chatbot, assisting users with queries, data handling, and link submissions, tailored to FourKites' platform.
FourKites planned an AI bot to enhance user interaction. I was 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
Problem
FourKites planned an AI bot to enhance user interaction. I was to design UI, visuals, and defined use cases for Fin AI.
Solution and Impact
Designed the UI and visuals with adaptive components for seamless Fin AI chatbot for the first ever A.I. integration into products.
Duration
1 week (First release in Sep - 2023)
My Team
Kevin Miranda (Sr. UXD)
Me (UXD)
My Role
Visual and interaction designer / UI designer / Research
Video of FourKites' CPO introducing Fin A.I
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.
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.
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
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.
Detailed data and informative designs.
Detail driven
Clean, clear and straightforward designs.
Clarity
Uniformity in screen, with no/ little learnability.
Consistency
Ability to view sufficient data upfront.
Data driven
Wireframing and needs
of the users
First cut - Skeleton
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.
Iterations on
the visual language
Understanding 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.
And there were dozens more iterations.
All UI elements to the atom and molecular level were restricted to company's design system.
Iterating on both dark mode and light mode contrasting colors.
Adding and minimizing few functionalities and icons
Final Design
Fin A.I. is a chatbox in the bottom right corner, handling human-like conversations, generating reports, data tables, and graphs.
Generate an Excel report using A.I
Predict Disruptions
Obtain data in List view
