Global Search and Commanding with AI
Empowering users with intelligent search and actionable insights.
Savi Finance
Global Search and Commanding with AI
Problem
The existing website lacked a specific search bar design and did not incorporate AI-driven search functionalities, making it difficult for users to find relevant information quickly and effectively.
Solution
I designed and implemented a global search bar integrated with AI features. This solution merged traditional search functionality with advanced AI, offering users intelligent search suggestions and convenient access buttons for a more streamlined and intuitive search experience.
How might we ensure a seamless integration of global search and AI-powered commanding to enhance the overall user experience?
Step 1:Kick-Off Meeting
The project began with a detailed meeting with the manager, where the key goals and challenges were outlined. We discussed the need for a more intuitive global search feature and the integration of AI for enhanced commanding.
Project Requirements
Intuitive Global Search Functionality
Develop a global search feature that enables users to efficiently and effortlessly find information across the platform.
AI-Powered Commanding
Integrate AI technology to enable users to execute commands using natural language.
Enhanced User Experience
Improve the overall user experience by seamlessly integrating search and commanding functionalities.
Technical Feasibility
Ensure that the designs are feasible from a technical perspective and align with existing system constraints.
Step 2: Research
Competitive Analysis
1
2
Important Findings
Before
Enhanced Filtering and Predictive Search
Provide robust filters, sorting options, and intelligent autocomplete with predictive suggestions.
Action-Oriented Forms
Unlike WallyGPT’s purely conversational style, Savi Finance can enhance functionality by adding forms for direct user actions.
3
Easy Access Tabs
Unlike Monarch Money, Savi Finance can enhance user experience by adding easy access tabs for quicker navigation.
4
Personalization
Offer personalized AI recommendations and insights.
Step 3: Ideation
User Jobs
From the user jobs, the main outcomes prioritize implementing real-time search for immediate feedback and advanced transaction search filters for quick review, enhancing user efficiency and experience.
User Flow
Collaborative Review of High-Fidelity Screens
I conducted three meetings with my team to review and refine the high-fidelity screens. I embraced design feedback, exploring various solutions and making adjustments to align with project goals and user needs. This iterative approach ensured the screens were user-centered and met our design objectives.
Before
Sketches
Strategic Placement of the Search Bar
Next, I explored the best placement for the search bar. While I initially considered the left side panel for consistency, I ultimately chose to place it above the graph on the opposite side. This positioning keeps the left panel unobstructed, providing a balanced and user-friendly design that integrates the search functionality seamlessly into the user's workflow.
Defining Search Result Requirements
Finally, I outlined the specific requirements for displaying search results. This involved determining how results should be presented, including the filters and sorting options available, and ensuring that AI-generated responses are clearly differentiated from traditional search results. The objective was to create an organized and user-friendly interface that provides users with the most relevant and comprehensive information, helping them find what they need quickly and efficiently.
From Search to Action: Immediate Goal Setting Through Integrated Forms
Additionally, I integrated a form that appears when a user searches for a query that could turn into a plan or goal. This form allows the user to immediately create a goal, encouraging them to take action right away. This feature was inspired by insights from user research, highlighting the importance of facilitating quick transitions from intent to action.
Hi-Fi Wireframes
I created a user flow where users set a goal using AI commands. Users who ask the AI for a vacation plan receive an automated goal page that encourages action, rather than just providing plain information. This approach helps users take action based on their plan.
Step 4: Design
In my sketching process, I focused on addressing four key questions to develop effective solutions:
Exploring Structure: Separate or Combined Tabs
My initial focus was on finding the most intuitive structure for global search and AI commanding. I considered separate tabs but ultimately chose a combined interface for a seamless user experience. This unified approach allows users to switch between traditional search and AI commands effortlessly, ensuring all functions are accessible from a single point, enhancing usability and efficiency.
Step 5: Meeting with Team
After
The search bar initially displayed a standard icon, which didn’t clearly indicate that it was combined with AI functionality. To address this, I redesigned the icon to better represent the integrated AI feature.
After
The amount section in the form was difficult to edit when it was positioned on the left. To improve usability, I moved it to the center and added a frame around it, giving users a clear visual cue that the field is editable.
Before
Step 6: Final Solution
Unified Global Search with AI Commanding
From Search to Action: Goal Setting via Integrated Forms
Key Learnings
Unified Design Enhances Usability: Combining global search and AI commanding into a single interface simplifies the user experience, allowing seamless switching between functions without the need for separate tabs.
Strategic Placement Matters: The placement of the search bar significantly affects user interaction. Positioning it in a way that doesn’t obstruct other key information ensures a more intuitive and balanced interface.
User-Centric Enhancements Drive Engagement: Integrating features like a form for immediate goal creation directly from search results helps users move from intent to action quickly, improving overall engagement and satisfaction.
After
The form field initially had three dots that users had to click to access the edit and remove options, which added unnecessary steps. To streamline the process and reduce clicks, I replaced the three dots with visible edit and remove icons directly on the form. This change makes it quicker and easier for users to make adjustments.
Next Steps
Conduct Usability Testing: Validate the combined global search and AI interface by testing it with real users to gather feedback on its usability and effectiveness.
Refine the Design Based on Feedback: Use insights from usability testing to make further adjustments, ensuring the design meets user needs and expectations.
Implement Iterative Improvements: Continuously monitor user interactions with the search and AI commanding features, making iterative improvements to enhance functionality and user experience.