The web has always been about navigation. Although menus, pages and linear information hierarchies have been the dominant design protocol over the past decade, AI has fundamentally changed how users expect to find and interact with information. Instead of clicking through multiple pages to find what they need, people now expect to have natural conversations that adapt to their specific questions and goals.
After deploying 2,500 agents and building agentic AI platforms for 800 clients, Satisfi Labs decided it was time to practice what we preach, showcasing our conversational AI expertise through our own website experience. We recently redesigned our entire web presence around this shift, placing an AI chatbot at the center instead of relegating it to a corner widget. Here’s what we learned from building a chat-first website that still respects traditional web conventions.
How to Design a Conversational Website
Starting With Chat as the Main Interface
When we decided to put chat at the center of our website, I had some hesitation about shifting away from established web design patterns. After I started sketching, wireframing and prototyping in Figma, however, the balance between chat-first and traditional web experience quickly took shape.
The Layout Solution
I settled on a two-column design with navigation on the left and a chat experience on the right. This layout gave chat the power to seamlessly shift into classic site pages when needed.
The key was reimagining the chatbot in this larger format. I collaborated closely with product and marketing teams to refine all the visual elements. Our customization tools, such as our page theme editor studio, let them customize the chat and make branding updates easily.
Adding Injectors for Flow
We created special CTAs with the power to inject predefined questions or requests into the chatbot. We embedded these injectors throughout the site to keep conversations going as users explore the classic pages.
For example, a case study page might have an injector asking “How could this work for your business?” The question appears in chat, maintaining the conversation flow.
Technical Setup
Moving to Webflow was an easy decision. The platform’s visual builder and complete access to HTML, CSS and JavaScript made everything straightforward, from building classic site pages to manipulating chatbot behaviors through custom code.
I also built CMS-driven pages to enable our marketing team to easily publish new blogs, case studies and more directly from Webflow. My team was able to test everything in real time through a live staging site.
Common Design Challenges
There were plenty of troubleshooting hurdles along the way. Bringing the responsive navigation design to life proved complex. After prototyping various navigation concepts and placements in Figma, we decided early on to place a fixed navigation on the left of the site, rather than a traditional top dropdown navigation. Having a static, always visible navigation created a smoother user experience in which users could easily navigate between the chatsite and classic site pages. Given the vertical nature of mobile, we decided to keep navigation more traditional at the mobile breakpoint with a top-of-screen dropdown and a unique mobile homepage, effectively creating a new website design layout at the mobile breakpoint.
Due to the non-traditional navigation placement and the interaction between the full page chat and classic site pages, we ran into some strange scrolling behaviors as the site was being developed. Fine-tuning the transition from the chat interface to classic site pages required multiple iterations. Through trial and error tweaking across the Webflow backend, we were able to adjust layout specs at the desktop and mobile breakpoints that fixed the issues, creating a more seamless scrolling experience whether users were using a desktop mouse or a phone touchscreen.
These fixes and troubleshooting hurdles, especially the small wins like fine-tuning code that allowed for classic site injector buttons to successfully communicate with the chatsite, were highly rewarding, becoming one of my favorite parts of the entire process.
Practical Takeaways for Designers
Best Practices for Designing a Conversational Website
- Keep familiar navigation.
- Design chat for prominence.
- Create conversation bridges.
- Test interaction flows extensively.
- Focus on user goals.
1. Keep Familiar Navigation
Preserve standard website patterns while introducing conversational elements. Users need familiar structures during the transition. While we weren’t afraid to go non-traditional with a left-side navigation, we wanted the traditional SaaS classic site experience to be an always-visible click away at all times on the chatsite. The balance of maintaining a familiar, easy-to-navigate UX while breaking some rules along the way created a new kind of web experience.
2. Design Chat for Prominence
Stepping away from a traditional chat widget to create a full-page chat meant rethinking the design from both visual UI and functional UX perspectives. Rather than simply scaling the traditional chat up, we redesigned everything from typography, margins and spacing to image treatments from the ground up. Keeping the chat visually and conversationally engaging through infographics, explainer videos and nudges was essential.
3. Create Conversation Bridges
Injectors are my favorite element of the site. Creating a site where both the chat and classic pages use injectors to keep users engaged in both experiences not only helps new users ease into the chatsite concept but also maintains a seamless balance between the two sites. This “choose your own adventure” experience is perfect for any type of user.
This format works for users who want information quickly and directly, or those who like to dig deeper and immerse themselves in as much information as possible. Injectors or similar mechanisms help users transition from browsing to conversing naturally.
4. Test Interaction Flows Extensively
Along with the natural questions that users bring to the chat, injectors, quick reply buttons and conversational nudges play a considerable role in driving chat conversation. Our team was highly focused on the user experience, extensively testing the many conversational roads and experiences both new and veteran users might explore.
5. Focus on User Goals
With Satisfi Labs’ advanced content scraping capabilities, we could easily flood users with chat content. By curating information more directly and intentionally, however, we’re giving users the information they want and helping them accomplish the goals they set when they visit. Chat works better when it helps users accomplish specific tasks rather than simply providing information. For example, we provide users with the information they need for their specific industry or to initiate demo requests.
Why Conversational Sites Succeed
We’ve seen this approach work particularly well in sports and entertainment venues, tourism destinations and higher education institutions. These industries naturally lend themselves to conversational experiences because fans, visitors and students arrive with diverse, context-specific questions: “Where’s the nearest restroom?” “What time does the game start?” “When are campus tours available?” “What dining options do you have?” A chat-first interface can handle this variety far more efficiently than forcing users to navigate through multiple pages.
The approach also requires chat technology capable of handling complex conversations. Basic FAQ bots that simply match keywords to canned responses won’t provide sufficient value to justify making chat your primary interface. You need AI that can understand context, remember conversation history, guide users through multi-step processes and seamlessly transition to other agents and human team members when appropriate.
As conversational AI becomes more sophisticated, more sites will likely experiment with conversation-centric designs. The key is finding the right balance for your specific use case and user needs.
