AskAda
A Generative-AI chatbot that helps to expedite cybersecurity processes by automating detection and remediations, as well as providing comprehensive reports.
Who
is AccuKnox?
A cybersecurity SaaS company specializing in Zero-Trust CNAPP, AccuKnox aims to safeguard both public and private cloud environments. They leverage open-source solutions, operating on a DevSecOps-forward model.
They adhere to a "Be Proactive, Not Reactive" approach, emphasizing establishing robust security from the ground up.
If you want to learn more about AccuKnox's services and product, check out their website!
Who
is the team?
Team
Christie Lee
Supervisors
Gaurav Misra (Product Manager), Nat Natraj (Co-Founder)
I was the sole UI and UX contributor for AskAda. My responsibilities were to design and integrate basic gen-AI functions into the existing dashboard for feedback.
"Final" Product
Last Iteration
Before the product got handed over to in-house designers, this was my final iteration submission.
👇🏼 The Button
-
Instead of the icon being a generic wand or star, the AskAda activation button is a variation of the AccuKnox logo, with the aim of inserting brand language so end users will associate AskAda with AccuKnox
-
Once clicked, there will be visual feedback on the button and on the toolbar.
-
These kinds of visual feedbacks inform users that something has happened by drawing their eyes toward it.
🪟 AskAda Window Activation
-
User can access AskAda via the now active button on the toolbar.
-
Welcome page greets user with some introductory information:
- Capabilities
- Limitations
- Quick Access Menu
🏃🏻♀️ Query via Quick Access
-
Aim was to make prompts that would be the most commonly used available to the user.
-
These requests are always accessible in the menu.
⌨️ Query via Typing
-
Typical query inputs via typing
-
AskAda replies will have some sort of visual hierarchy to separate necessary information (in this case, the title vs the content)
-
Users have options to give the replies feedback, copy, share and/or save that portion of the chat
💾 Saved Queries
-
By default organized by month
-
Filters can be used to organize by time or by Category (Platform or Data queries)
-
Users will be able to search keywords as well if they know what they are looking for
-
“Save” button will save the User’s query and AskAda's response(s) up to the User’s next query/text input.
📚 Query History
-
UI will essentially be the same as Saved Queries as the method of searching would be similar
-
By default organized by month
-
Filters can be used to organize by time or by Category (Platform or Data queries)
-
Users will be able to search keywords as well if they know what they are looking for
AccuKnox is about to Beta launch AskAda. Check out their video!
Many of the features and reasoning I presented were used for the Beta launch version.
Research
Setting the direction
My task was to design and seamlessly integrate the generative AI chatbot – AskAda – into the existing product dashboard.
Exploration
- starting doing preliminary research into some stats of struggles in e-commerce space (as this was the most easily accessible data)
- found that we were limiting ourselves by keeping our target audience purely digital novices as we found that even digital natives struggle with the current structure of e-commerce sites
- decision to move forward with understanding dark patterns rather than struggles of digital novices
- stakeholder map to gain an understanding of who is "responsible"
Before starting to design, I needed to define AccuKnox's overarching "North Star" and align my design objectives and values accordingly.
AccuKnox's North Star
"We have a 'Be Proactive, Not Reactive' principle, which involves laying down solid security foundations at the granular level."
"We are voracious learners, which has led us to research and implement machine learning to automate security processes not only to alleviate human workloads, but also to detect and mitigate security threats at scale."
Cybersecurity
I knew next to nothing about cybersecurity, but I knew I wanted to get the first design iteration out to get the initial rounds of feedback as quickly as possible.
Zero Trust Security
SQL
Zero Shot Prompting
LLMs, NLPs, GPTs
CVSS Score
API
To avoid the tendency to get stuck in a research rabbit hole, I made the decision to – at least for the first few iterations – prioritize high-level concepts.
Generative AI Chats
I took UI and function inspiration from various Generative-AI examples.
OpenAI's ChatGPT
Sysdig's Sage
Design concepts on Dribbble
Existing Product
It was crucial to thoroughly explore AccuKnox's existing product to understand the environment for integrating the new chatbot.
Insights & Questions
To effectively design this integration, it was essential to quickly prototype with my current understanding and iterate based on feedback.
1
My first pass at seamless integration was to design a chatbot that dynamically interacted with the existing product – ensuring the dashboard adapts in response to queries.
2
Though not prioritized at this stage, I wondered what the edge cases I would inevitably have to consider in this field.
3
Define
What does the chatbot do?
With the research done above, I started brainstorming the high-level user flow of the prototype as well as some content design.
Prototype User Flow
Iterations
First Iteration
My first pass at the design of the chatbot UI as well as its integration into the existing dashboard.
-
AskAda is accessible via a tab that floats on top of the page at all times.
-
Once clicked, the chat slides out. Dashboard is dynamic so user is still able to interact with the dashboard at the same time.
-
User is greeted with a welcome page displaying AskAda capabilities and limitations, as well as a Quick Access menu for convenience.
-
Quick Access will always be accessible in the hamburger menu so users don’t have to go to the welcome page every time.
-
User can directly start typing to ask questions from the welcome page rather than use the Quick Access, similar to OpenAI's ChatGPT that most of us are familiar with.
Feedback from Stakeholders
The dashboard doesn't need to be dynamic and the chat can live in its own window as the aim of AskAda is to provide information that is not shown on the product dashboard.
1
Stakeholders preferred a button that is consistently present yet distinct on every page, enticing users to activate AskAda, instead of a floating overlay button.
2
More examples of prompts, distinctly separated into Platform Queries and Data Queries, with the responses by the AI to include some visual hierarchy between content and sources that it cites.
3
Second Iteration
My aim during the second pass was to adhere much more strictly to the existing design style of the dashboard, as well as incorporating visual branding.
👇🏼 The Button
-
Instead of the icon being a generic wand or star, the button is a variation of the AccuKnox logo, with the aim of inserting brand language so end users will associate AskAda with AccuKnox
-
Placement of button will be generally consistent – at the right-most part of the page, as shown in the examples.
👁️🗨️ Visual Feedback
-
Once clicked, there will be visual feedback on the button and on the toolbar.
-
These kinds of visual feedbacks inform users that something has happened by drawing their eyes toward it.
🪟 AskAda Window Activation
-
User can access AskAda via the now active button on the toolbar.
-
Welcome page greets user with some introductory information:
- Capabilities
- Limitations
- Quick Access Menu
🏃🏻♀️ Query vis Quick Access
-
Aim was to make prompts that would be the most commonly used available to the user.
-
These requests are always accessible in the menu.
⌨️ Query via Typing
-
Typical query inputs via typing
-
AskAda replies will have some sort of visual hierarchy to separate necessary information (in this case, the title vs the content)
-
Users have options to give the replies feedback, copy, share and/or save that portion of the chat
💾 Saved Chats
-
By default organized by month
-
Filters can be used to organize Daily, Weekly, or Yearly as well
-
Users will be able to search keywords as well if they know what they are looking for
-
“Save” button will save the User’s query and AskAda's response(s) up to the User’s next query/text input.
📚 Chat History
-
UI will essentially be the same as Saved Chats as the method of searching would be similar
-
By default organized by month
-
Filters can be used to organize Daily, Weekly, or Yearly as well
-
Users will be able to search keywords as well if they know what they are looking for