Designing intuitive AI products for the non-technical users
Designing intuitive AI products for the non-technical users
Designing intuitive AI products for the non-technical users
Working on multiple AI based SaaS products created by Arizona State University, enabling users to create their own AI projects.
Working on multiple AI based SaaS products created by Arizona State University, enabling users to create their own AI projects.
Reading time : 3 min
What is MyAI Builder?
What is MyAI Builder?
MyAI Builder is a SaaS product with multiple LLMs developed by Arizona State University that allows users to create customized AI solutions using their uploaded data and configurable model settings. It provides tools for users to build AI assistants tailored to their specific needs by integrating pre-existing knowledge, documents, and settings to guide responses.
MyAI Builder is a SaaS product with multiple LLMs developed by Arizona State University that allows users to create customized AI solutions using their uploaded data and configurable model settings. It provides tools for users to build AI assistants tailored to their specific needs by integrating pre-existing knowledge, documents, and settings to guide responses.
MyAI Builder is a SaaS product with multiple LLMs developed by Arizona State University that allows users to create customized AI solutions using their uploaded data and configurable model settings. It provides tools for users to build AI assistants tailored to their specific needs by integrating pre-existing knowledge, documents, and settings to guide responses.
Scenario
Scenario
User research on MyAI Builder revealed key usability challenges—users found the interface cluttered, overly technical, and misaligned with their expectations, leading to high task completion times and lower success rates.
User research on MyAI Builder revealed key usability challenges—users found the interface cluttered, overly technical, and misaligned with their expectations, leading to high task completion times and lower success rates.
Goal
Goal
The goal was to streamline the experience and bridge the gap between technical and non-technical users, ensuring the platform is intuitive, user-friendly, and efficient to improve engagement and usability for both personas.
The goal was to streamline the experience and bridge the gap between technical and non-technical users, ensuring the platform is intuitive, user-friendly, and efficient to improve engagement and usability for both personas.
Industry & Team Overview
Industry & Team Overview
Industry
Industry
Edtech, Artificial Intelligence
Edtech, Artificial Intelligence
Team
Team
3 UX Designers
2 UX Researchers
1 Product Manager
3 UX Designers
2 UX Researchers
1 Product Manager
Timeline
Timeline
5 months
5 months
Role
Role
UX Design
UX Research
UX Strategy
UX Design
UX Research
UX Strategy
What did I do?
What did I do?
Immediate design fixes
Information architecture, conducting design ideation and card sorting sessions
Conceptual designs, Interaction design and testing
Design components (Evolving Figma design system)
Defined Visual identity
Entire Dashboard design (Onboarding optimization - first screen a user lands on)
Results
Results
Multiple iterations were and are created with a focus on addressing the findings and recommendations made by the research team post UX research. The current iteration results were found from the product's analytics platform.
Multiple iterations were and are created with a focus on addressing the findings and recommendations made by the research team post UX research. The current iteration results were found from the product's analytics platform.
300%
Increase in product usage
Increase in product usage
40%
Reduction in Steps needed
Reduction in Steps needed
60%
Reduction in User queries
Reduction in User queries
Overall research statement
Overall research statement
Users are excited about MyAI Builder's potential and eager to integrate it into their workflows, but they often feel overwhelmed by its extensive feature set, using only 40% of its capabilities. Simplifying the user experience and prioritizing the visibility of key features could drive higher adoption and better engagement.
Users are excited about MyAI Builder's potential and eager to integrate it into their workflows, but they often feel overwhelmed by its extensive feature set, using only 40% of its capabilities. Simplifying the user experience and prioritizing the visibility of key features could drive higher adoption and better engagement.
90% of issues stemmed from the product being designed for technical users, while 70% users were non-technical.
60% problems found because of confusing information architecture
30% minor issued due to cluttered space and overwhelming terminologies
90% of issues stemmed from the product being designed for technical users, while 70% users were non-technical.
60% problems found because of confusing information architecture
30% minor issued due to cluttered space and overwhelming terminologies
How might we statement
How might we statement
"How might we enable non-technical users to create and interact with bots effortlessly, without requiring any training and technical knowledge?"
Design
Goal
Design goal
Intuitive interface for the non-technical, empowering them to create personalized AI projects.
Intuitive interface for the non-technical, empowering them to create personalized AI projects.
Business
Goal
Business goal
Integrate the product into users' daily routines, encouraging them to explore diverse use cases that will drive long-term engagement.
Integrate the product into users' daily routines, encouraging them to explore diverse use cases that will drive long-term engagement.
Key performance indicators
Number of projects created
Reduction in user queries
Number of projects created
Reduction in user queries
Number of projects created
Reduction in user queries
Quick design fixes
Quick design fixes
Before initiating a major redesign, I prioritized small, quick fixes to address minor usability issues. These incremental improvements provided immediate value while we worked on a larger redesign to align with research findings and effectively solve the "How might we" statement.
Below are few of the quick fixes.
Before initiating a major redesign, I prioritized small, quick fixes to address minor usability issues. These incremental improvements provided immediate value while we worked on a larger redesign to align with research findings and effectively solve the "How might we" statement.
Below are few of the quick fixes.
Quick design fixes
Reducing number of steps needed to start a projects
Steps reduced from 3 to 1, reducing time to reach the goal and start exploring the interface.
Making 'Help' accessible
120 conversations in a span of 3 days using the Help bot.
Moved 'Share' option to header
User queries related to 'How to share' reduced significantly (I wish I had a number)
Before
After
Quick design fixes
Making 'Help' accessible
120 conversations in a span of 3 days using the Help bot.
Moved 'Share' option to header
User queries related to 'How to share' reduced significantly (I wish I had a number)
Quick design fixes
Moved 'Share' option to header
User queries related to 'How to share' reduced significantly (I wish I had a number)
Before
After
Quick design fixes
Reducing number of steps needed to start a projects
Steps reduced from 3 to 1, reducing time to reach the goal and start exploring the interface.
Making 'Help' accessible
120 conversations in a span of 3 days using the Help bot.
Moved 'Share' option to header
User queries related to 'How to share' reduced significantly (I wish I had a number)
Before
After
Quick design fixes
Reducing number of steps needed to start a projects
Steps reduced from 3 to 1, reducing time to reach the goal and start exploring the interface.
Making 'Help' accessible
120 conversations in a span of 3 days using the Help bot.
Moved 'Share' option to header
User queries related to 'How to share' reduced significantly (I wish I had a number)
Quick design fixes
Reducing number of steps needed to start a projects
Steps reduced from 3 to 1, reducing time to reach the goal and start exploring the interface.
Making 'Help' accessible
120 conversations in a span of 3 days using the Help bot.
Moved 'Share' option to header
User queries related to 'How to share' reduced significantly (I wish I had a number)
Before
After
Evaluating & Updating the style guide
Evaluating & Updating the style guide
While designing for quick fixes, I realized that there is a need to update the design system, which was in AdobeXD. I transferred the style guide to Figma and introduced components, auto-layout and variants that improved the consistency across products and screens.
While designing for quick fixes, I realized that there is a need to update the design system, which was in AdobeXD. I transferred the style guide to Figma and introduced components, auto-layout and variants that improved the consistency across products and screens.
Conducted Ideation session and card sorting
Conducted Ideation session and card sorting
Post addressing quick changes, I formed 'How might we statements' for major recommendations and findings from the research. Discussed design ideas with the developers and leadership team that led to aligning teams and saving time.
Post addressing quick changes, I formed 'How might we statements' for major recommendations and findings from the research. Discussed design ideas with the developers and leadership team that led to aligning teams and saving time.
The ideation session revealed that even the team was unfamiliar with all the technical terms. I collaborated with the developer to understand each feature's functionality and its relevance to the users. Leveraging content strategy and information architecture principles, I then conducted an open card sorting session with 13 users.
The ideation session revealed that even the team was unfamiliar with all the technical terms. I collaborated with the developer to understand each feature's functionality and its relevance to the users. Leveraging content strategy and information architecture principles, I then conducted an open card sorting session with 13 users.
Iterations
Based on insights from the above steps and research, I went through multiple iterations, systematically refining the content strategy and user interactions to enhance usability.
Based on insights from the above steps and research, I went through multiple iterations, systematically refining the content strategy and user interactions to enhance usability.
The PIVOT
The PIVOT
Despite breaking down complex categories and using drop downs, the panels still felt cluttered due to limited space. Recognizing this constraint, I stepped back from the existing layout and explored alternative designs, starting with sketches to reimagine the structure.
Despite breaking down complex categories and using drop downs, the panels still felt cluttered due to limited space. Recognizing this constraint, I stepped back from the existing layout and explored alternative designs, starting with sketches to reimagine the structure.
The split screen redesign iterations and concept testing
The split screen redesign iterations and concept testing
I implemented the split-screen design to enhance usability and reduce clutter. This approach aligned with users' mental models, as 100% of them were familiar with ChatGPT’s layout.
Key insights from initial user feedback:
Alignment with user journey: Guided project creation process because of hierarchy
Intuitive Interaction: A question-based format made features easier to understand and use
Visibility Drives Engagement: Users engaged with features they could see, such as the manage knowledge base on the left, making it more likely to be utilized
I implemented the split-screen design to enhance usability and reduce clutter. This approach aligned with users' mental models, as 100% of them were familiar with ChatGPT’s layout.
Key insights from initial user feedback:
Alignment with user journey: Guided project creation process because of hierarchy
Intuitive Interaction: A question-based format made features easier to understand and use
Visibility Drives Engagement: Users engaged with features they could see, such as the manage knowledge base on the left, making it more likely to be utilized
The design
The design
Refined Information Architecture: Reorganized content and tabs based on users' mental models from the card sorting session (Left navigation bar)
Optimized User Flow: Structured features to align with user behavior, prioritizing hierarchy and input sequence
Streamlined Interactions: Reduced steps for key actions, enhancing efficiency and usability
Decluttered UI: Used progressive disclosure, such as drop down menus, to present information contextually
Enhanced Input Experience: Improved input fields and set default values to minimize user effort (Toggle buttons, adding character limit, templates, microcopy, notifications)
The dashboard design
The dashboard design
Banner design: Added a prompt area for new users to ask questions and find value
Templates: For the new user who feel creating a new project overwhelming
Getting started: New users who prefer reading documents and articles to start
Clear CTAs: Finding 'Create project' accessible and easier to find
In-product user feedback: Easier to capture user feedback and report a problem
Compare before and after designs
Dashboard results
Results captured through multiple data points (Product data analytics, Customer support channels, User interviews, Surveys)
70%
Users used the prompt area
90%
New+Old users used templates at least once
" This has come lightening years, it now feels inviting to start using it."
-MyAI Builder user
Overall design results
Multiple iterations were and are created with a focus on addressing the findings and recommendations made by the research team post UX research. The current iteration results were found from the product's analytics platform.
300%
Increase in product usage
40%
Reduction in Steps needed
60%
Reduction in User queries
More AI projects I worked on at AI Acceleration
More AI projects I worked on at AI Acceleration
More AI projects I worked on at AI Acceleration
What would I do differently?
Avoiding time invested in developing designs restricted by the current layout, as the platform is still in its initial phase where making these decisions are affordable.
Creating a design system earlier and adding structure to it for collaboration
Reaching out to the developers earlier to understand each feature and align UX and developer priorities
Avoiding time invested in developing designs restricted by the current layout, as the platform is still in its initial phase where making these decisions are affordable.
Creating a design system earlier and adding structure to it for collaboration
Reaching out to the developers earlier to understand each feature and align UX and developer priorities
Challenges?
Balancing design decisions with technical priorities in an engineering-driven environment
Adapting to new technology and technical jargon for effective collaboration
Transitioning from Adobe XD to Figma while maintaining design continuity
Designing a platform that worked seamlessly for both technical and non-technical users
Balancing design decisions with technical priorities in an engineering-driven environment
Adapting to new technology and technical jargon for effective collaboration
Transitioning from Adobe XD to Figma while maintaining design continuity
Designing a platform that worked seamlessly for both technical and non-technical users
Learnings?
Developing a deeper understanding of agile methodologies and how to work efficiently within an agile framework, creating clear JIRA tickets for developers and improving team alignment
Presenting qualitative findings quantitatively to drive targeted design improvements
Attaching user stories to Hi/Lo fidelity prototypes for clear design rationale
Aligning user needs, business goals, and scalability to support long-term organizational vision
Developing a deeper understanding of agile methodologies and how to work efficiently within an agile framework, creating clear JIRA tickets for developers and improving team alignment
Presenting qualitative findings quantitatively to drive targeted design improvements
Attaching user stories to Hi/Lo fidelity prototypes for clear design rationale
Aligning user needs, business goals, and scalability to support long-term organizational vision
LET'S CONNECT
I am everything design! I am resilient to the core.
Get in touch to find out more about how I create digital experiences to effectively reach and engage audiences.
Email: shailees0406@gmail.com
Phone: +1 (602) 576-4588
LET'S CONNECT
I am everything design! I am resilient to the core.
Get in touch to find out more about how I create digital experiences to effectively reach and engage audiences.
Email: shailees0406@gmail.com
Phone: +1 (602) 576-4588
LET'S CONNECT
I am everything design! I am resilient to the core.
Get in touch to find out more about how I create digital experiences to effectively reach and engage audiences.
Email: shailees0406@gmail.com
Phone: +1 (602) 576-4588