Raul. J
Rasu AI
Building the Search Screen for RASU AI
Project Type
Product Design (AI Search Feature)
Role
UI Designer
Industry
Health & Wellness / Coaching
Introduction
🛑 Before You Dive In
Some screens and content have been hiddend in this case study for privacy reasons.
The Product
Rasu AI is an AI powered software that helps users quickly search for content and save their results for future use. The primary goal of this project was to design screens that allow users to search for anything they like, with an integrated save search feature.
🏆 Business Goals For Product
Rasu AI saw the rise of artificial intelligence and set out to create a chat-based AI model that could search content seamlessly. Their goal was to have build a chat-based model themselves, with the user needs in mind.
What I Worked On
I designed a clean and efficient search interface with a strong focus on usability. The design included an input field for searches, a structured layout for displaying results, and a save search results feature.
Discovery & Research
⁉️ Kickoff Meeting
I got on a call with both product owners to get more information on the project and to align on some research goals. The goals were:
- Understand how users interact with AI-powered search tools
- Identify what users value most in a search-and-save experience
- Analyze the flow of similar products like Notion AI, Perplexity, and Google Search
Methods Used
- Competitive Analysis: Reviewed key features, UI patterns, and strengths/weaknesses of top search tools
- Task Scenarios: Simulated real-world use cases to identify pain points and must-have features
Key Findings
- Users prioritize speed, clarity of results, and the ability to easily revisit saved searches
- Clean, minimal interfaces with clear visual hierarchies are preferred
Design & Iteration
Design System
To maintain visual consistency and support scalability, I established a lightweight design system tailored to the Rasu AI interface. The lightweight design system included colors, components, and more.
Insight Generation
The collected data revealed trends in user engagement patterns, indicating which features were most popular and which were underutilized. This information guided our decision-making for future updates and enhancements.
Although not many components were requested, I ensured that all necessary components were provided, including different variations and states.
I designed a search screen featuring a collapsible side navigation bar, providing users with easy access to key sections while maximizing screen space for search results.
The version with the expanded side navigation bar, gave users full visibility of all navigation options while maintaining a clear and organized layout for search results.
Search screen with expanded side navigation bar, including example of user search.
Once a search is submitted, the user is taken to a results page that displays content clearly and allows for saving and organizing.
Layout & Experience:
- Result Cards: Each includes a title, snippet, source, and a "Save" icon
- Save Panel: Saved results appear in a panel or tab for quick reference
- Hover & Tap States: Provide visual feedback when interacting with results or icons
- Content Consistency: All results use the same visual structure to reduce cognitive load
Handoff
🤝 Handoff File
To ensure a smooth transition from design to development, I created a structured hand-off file that included all visual components, styles, and interaction notes in a developer-friendly format (for privacy reasons some notes were excluded from image).
The handoff file included all screens, user flows, notes, and more.
Impact & Learnings
🎇 Impact
The Rasu AI search interface design successfully met the project's core goal. The interface was clean, responsive, and easy to navigate, receiving positive feedback from initial reviewers for its simplicity and usability.
👨🎓 Learnings
I learned to balance clean minimal design with Functionality: I deepened my understanding of how to keep interfaces clean without sacrificing clarity or discoverability of features. I also learned more about AI in the UX/UI world.
Raul @2025
jraul2723@gmail.com
Navigation
Home + Work
About Me + Contact
Creative Space
Resume
Projects
Comm Program
HMS Software
DHC Website
Rasu AI
90 Day App
Design System
Raul. J
Home + Work
About Me + Contact
Creative Space
Resume
Rasu AI
Building the Search Screen for RASU AI
Project Type
Product Design (AI Search Feature)
Role
UI Designer
Industry
Software / AI / Productivity Tools
Introduction
🛑 Before You Dive In
Some screens and content have been hiddend in this case study for privacy reasons.
The Product
Rasu AI is an AI powered software that helps users quickly search for content and save their results for future use. The primary goal of this project was to design screens that allow users to search for anything they like, with an integrated save search feature.
🏆 Business Goals For Product
Rasu AI saw the rise of artificial intelligence and set out to create a chat-based AI model that could search content seamlessly. Their goal was to have build a chat-based model themselves, with the user needs in mind.
What I Worked On
I designed a clean and efficient search interface with a strong focus on usability. The design included an input field for searches, a structured layout for displaying results, and a save search results feature.
Discovery & Research
⁉️ Kickoff Meeting
I got on a call with both product owners to get more information on the project and to align on some research goals. The goals were:
- Understand how users interact with AI-powered search tools
- Identify what users value most in a search-and-save experience
- Analyze the flow of similar products like Notion AI, Perplexity, and Google Search
Methods Used
- Competitive Analysis: Reviewed key features, UI patterns, and strengths/weaknesses of top search tools
- Task Scenarios: Simulated real-world use cases to identify pain points and must-have features
Key Findings
- Users prioritize speed, clarity of results, and the ability to easily revisit saved searches
- Clean, minimal interfaces with clear visual hierarchies are preferred
Design & Iteration
Design System
To maintain visual consistency and support scalability, I established a lightweight design system tailored to the Rasu AI interface. The lightweight design system included colors, components, and more.
Insight Generation
The collected data revealed trends in user engagement patterns, indicating which features were most popular and which were underutilized. This information guided our decision-making for future updates and enhancements.
Although not many components were requested, I ensured that all necessary components were provided, including different variations and states.
I designed a search screen featuring a collapsible side navigation bar, providing users with easy access to key sections while maximizing screen space for search results.
The version with the expanded side navigation bar, gave users full visibility of all navigation options while maintaining a clear and organized layout for search results.
Search screen with expanded side navigation bar, including example of user search.
Once a search is submitted, the user is taken to a results page that displays content clearly and allows for saving and organizing.
Layout & Experience:
- Result Cards: Each includes a title, snippet, source, and a "Save" icon
- Save Panel: Saved results appear in a panel or tab for quick reference
- Hover & Tap States: Provide visual feedback when interacting with results or icons
- Content Consistency: All results use the same visual structure to reduce cognitive load
Handoff
🤝 Handoff File
To ensure a smooth transition from design to development, I created a structured hand-off file that included all visual components, styles, and interaction notes in a developer-friendly format (for privacy reasons some notes were excluded from image).
The handoff file included all screens, user flows, notes, and more.
Impact & Learnings
🎇 Impact
The Rasu AI search interface design successfully met the project's core goal. The interface was clean, responsive, and easy to navigate, receiving positive feedback from initial reviewers for its simplicity and usability.
👨🎓 Learnings
I learned to balance clean minimal design with Functionality: I deepened my understanding of how to keep interfaces clean without sacrificing clarity or discoverability of features. I also learned more about AI in the UX/UI world.
Raul @2025
jraul2723@gmail.com
Navigation
Home + Work
About Me + Contact
Resume
Projects
Comm Program
HMS Software
DHC Website
Rasu AI
90 Day App
Design System
Raul. J
Home + Work
About Me + Contact
Creative Space
Resume
Rasu AI
Building the Search Screen for RASU AI
Project Type
Product Design (AI Search Feature)
Role
UI Designer
Industry
Software / AI / Productivity Tools
Introduction
🛑 Before You Dive In
Some screens and content have been hidden in this case study for privacy reasons.
🖥️ The Product
Rasu AI is an AI powered software that helps users quickly search for content and save their results for future use. The primary goal of this project was to design screens that allow users to search for anything they like, with an integrated save search feature.
🏆 Business Goals For Product
Rasu AI saw the rise of artificial intelligence and set out to create a chat-based AI model that could search content seamlessly. Their goal was to have build a chat-based model themselves, with the user needs in mind.
👨💻 What I Worked On
I designed a clean and efficient search interface with a strong focus on usability. The design included an input field for searches, a structured layout for displaying results, and a save search results feature.
Discovery & Research
⁉️ Kickoff Meeting
I got on a call with both product owners to get more information on the project and to align on some research goals. The goals were:
- Understand how users interact with AI-powered search tools
- Identify what users value most in a search-and-save experience
- Analyze the flow of similar products like Notion AI, Perplexity, and Google Search
Methods Used
- Competitive Analysis: Reviewed key features, UI patterns, and strengths/weaknesses of top search tools
- Task Scenarios: Simulated real-world use cases to identify pain points and must-have features
Key Findings
- Users prioritize speed, clarity of results, and the ability to easily revisit saved searches
- Clean, minimal interfaces with clear visual hierarchies are preferred
Design & Iteration
Design System
To maintain visual consistency and support scalability, I established a lightweight design system tailored to the Rasu AI interface. The lightweight design system included colors, components, and more.
Although not many components were requested, I ensured that all necessary components were provided, including different variations and states.
Starting The Designs
Once I was ready to begin with the design phase, I started with the main search screen, which is where the user’s first interaction begins with Rasu AI. The design goal was to create a welcoming, minimal interface that encourages user to search without feeling intimated by the technology.
Key Objectives:
- Provide a clean and distraction-free entry point
- Visually establish Rasu AI’s brand
- Direct the user’s attention to the primary action, initiate a search
Core Elements:
- A bold, centered search bar with a subtle prompt with “Ready to search? Start anytime.”
I designed a search screen featuring a collapsible side navigation bar, providing users with easy access to key sections while maximizing screen space for search results.
The version with the expanded side navigation bar, gave users full visibility of all navigation options while maintaining a clear and organized layout for search results.
Search screen with expanded side navigation bar, including example of user search.
Once a search is submitted, the user is taken to a results page that displays content clearly and allows for saving and organizing.
Layout & Experience:
- Result Cards: Each includes a title, snippet, source, and a "Save" icon
- Save Panel: Saved results appear in a panel or tab for quick reference
- Hover & Tap States: Provide visual feedback when interacting with results or icons
- Content Consistency: All results use the same visual structure to reduce cognitive load
Handoff
🤝 Handoff File
To ensure a smooth transition from design to development, I created a structured hand-off file that included all visual components, styles, and interaction notes in a developer-friendly format (for privacy reasons some notes were excluded from image).
The handoff file included all screens, user flows, notes, and more.
Impact & Learnings
🎇 Impact
The Rasu AI search interface design successfully met the project's core goal. The interface was clean, responsive, and easy to navigate, receiving positive feedback from initial reviewers for its simplicity and usability.
👨🎓 Learnings
I learned to balance clean minimal design with Functionality: I deepened my understanding of how to keep interfaces clean without sacrificing clarity or discoverability of features. I also learned more about AI in the UX/UI world.
Raul @2025
jraul2723@gmail.com
Navigation
Home + Work
About Me + Contact
Resume
Projects
Comm Program
HMS Software
DHC Website
Rasu AI
90 Day App
Design System