Home
Home
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.
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
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 in this case study ran through usability testing to analyze initial user sentiment.
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 in this case study ran through usability testing to analyze initial user sentiment.
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
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
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
Number of projects created
Reduction in user queries
User journey
User journey
It was crucial to prioritize research findings, as not everything could be addressed at once. While the How Might We statement guided the overall design, a strategic approach was needed to avoid overwhelming current users.
I mapped the user journey for targeted improvements, which identified that 'Exploration' and 'Implementation' stages are most critical touch points.
It was crucial to prioritize research findings, as not everything could be addressed at once. While the How Might We statement guided the overall design, a strategic approach was needed to avoid overwhelming current users.
I mapped the user journey for targeted improvements, which identified that 'Exploration' and 'Implementation' stages are most critical touch points.
Immediate design fixes
Immediate 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 changes made.
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 changes made.
Immediate 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.
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.
Before
After
Immediate design fixes
Making 'Help' accessible
120 conversations in a span of 3 days using the Help bot.
Making 'Help' accessible
120 conversations in a span of 3 days using the Help bot.
Immediate design fixes
Moved 'Share' option to header
User queries related to 'How to share' reduced significantly (I wish I had a number)
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 design system
Evaluating & Updating the design system
While designing for quick fixes, I realized that there is a need to update the design system, which was in AdobeXD. I transferred the design system 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 design system to Figma and introduced components, auto-layout and variants that improved the consistency across products and screens.
Conducted Ideation session
Conducted Ideation session
Post addressing quick changes, I conducted an ideation session with the design team. I formed 'How might we statements' for major recommendations and findings from the research. Discussed design ideas with the developer and leadership team that led to aligning teams and saving time.
Post addressing quick changes, I conducted an ideation session with the design team. I formed 'How might we statements' for major recommendations and findings from the research. Discussed design ideas with the developer and leadership team that led to aligning teams and saving time.
Facilitated card sorting
Facilitated card sorting
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 to analyze how they mentally categorize features.
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 to analyze how they mentally categorize features.
Top categories post analyzing the session:
Create a project
Model
Knowledge base
Project behavior
Public
Top categories post analyzing the session:
Create a project
Model
Knowledge base
Project behavior
Public
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.
Refined Information Architecture: Reorganized content and tabs based on users' mental models from the card sorting session.
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 pop-ups, to present information contextually.
Enhanced Input Experience: Improved input fields and set default values to minimize user effort.
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.
Refined Information Architecture: Reorganized content and tabs based on users' mental models from the card sorting session.
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 pop-ups, to present information contextually.
Enhanced Input Experience: Improved input fields and set default values to minimize user effort.
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
The split screen redesign
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 reasons for this decision:
Reduced Visual Clutter: Separated content into distinct sections for better organization.
Aligned with Familiar Patterns: Mimicked ChatGPT’s interface to ensure intuitive navigation.
Improved Feature Categorization: Dedicated areas for different functions:
Left: Preview area
Right: Configuration panel
Right-side horizontal bar: Quick access to frequently used features
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 reasons for this decision:
Reduced Visual Clutter: Separated content into distinct sections for better organization.
Aligned with Familiar Patterns: Mimicked ChatGPT’s interface to ensure intuitive navigation.
Improved Feature Categorization: Dedicated areas for different functions:
Left: Preview area
Right: Configuration panel
Right-side horizontal bar: Quick access to frequently used features
The Results
The Results
In comparison to current dashboard data
In comparison to current dashboard data
Users appreciated the clarity of "Create, Build, Launch" as intuitive and easy-to-understand categories. The 1-2-3 flow made the user journey clear, reinforcing a logical progression.
Key insights from user feedback:
Guided Decision-Making: Recommendations helped users improve their projects.
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 customized system prompt on the right, making it more likely to be utilized.
Users appreciated the clarity of "Create, Build, Launch" as intuitive and easy-to-understand categories. The 1-2-3 flow made the user journey clear, reinforcing a logical progression.
Key insights from user feedback:
Guided Decision-Making: Recommendations helped users improve their projects.
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 customized system prompt on the right, making it more likely to be utilized.
8/8
Participants like the onboarding section
Participants like the onboarding section
40%
Increase in feature utilization
Increase in feature utilization
80%
Increase in understanding features
Increase in understanding features
Next?
Improving the current conceptual design post user feedback
Addressing other research findings such as creating awareness amongst users on the cost associated with the product, usability challenges with other areas of the interface
Improving the current conceptual design post user feedback
Addressing other research findings such as creating awareness amongst users on the cost associated with the product, usability challenges with other areas of the interface
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
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
Feedback Form
I would love to hear your feedback
Please share your thoughts—whether it’s about my portfolio overall, a specific project, or anything else you'd like to mention
Feedback Form
I would love to hear your feedback
Please share your thoughts—whether it’s about my portfolio overall, a specific project, or anything else you'd like to mention
Feedback Form
I would love to hear your feedback
Please share your thoughts—whether it’s about my portfolio overall, a specific project, or anything else you'd like to mention
Feedback Form
I would love to hear your feedback
Please share your thoughts—whether it’s about my portfolio overall, a specific project, or anything else you'd like to mention
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
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