Butternut AI Cohort 18

Butternut AI is a generative AI platform that transforms a text prompt into a fully functional website in 20 seconds, empowering small business owners to establish an online presence.

At Butternut AI, we reimagined the core editor experience for an AI-powered website generation platform, making it more intuitive, efficient, and visually cohesive. Our work focused on refining user flows, defining key Jobs to Be Done, and building a scalable design system that addressed both user needs and business goals. Through iterative research, testing, and collaboration, we transformed a broad client request into a polished, development-ready solution that streamlined the website creation process.

We refined the client’s vision & and broad request through extensive user research, iteration, and clear design goals.

We built Butternut’s first design system, streamlining UI inconsistencies and creating a lasting source of truth for designers and engineers.

We redesigned Butternut’s AI interface, highlighting the importance of human-like interaction in AI conversations.

Why we're excited

Working on Butternut AI was an exciting challenge because, as an early-stage startup, our team had to quickly adapt to evolving design requests, often redefining the product as we went. With no established design system, we had the opportunity to build one from scratch while enhancing the platform’s overall user experience. One key lesson we learned was that even though it’s an AI-powered tool, incorporating human-like interactions is essential for a seamless user experience. It was rewarding to help small business owners easily establish their online presence while navigating the complexities of blending cutting-edge technology with intuitive design.

The how

01
02
03
THE BEGINNING | Our first 3 weeks
In the first three weeks at Butternut AI, we focused on refining our broad client request into a clear project scope. We iterated on “How Might We” statements, conducted extensive user interviews, and continuously adjusted our approach based on new insights. To further ground our direction, we also conducted competitive analysis and visual research, especially since there was no clear brand design language to reference. Synthesizing this research helped us identify key patterns, gaps in the market, and opportunities for differentiation. By distilling our findings, we shaped a focused project statement and foundational design principles. This iterative process ensured our work was both user-centered and strategically aligned.
ideate, constrain, & test
For weeks 4-7, we refined user flows, defined key Jobs to Be Done, and translated our visual research into mid-to-high-fidelity wireframes for the landing page and product platform. This phase was about bridging strategy with execution—ensuring the redesigned experience was both functional and visually cohesive. As part of this, we also began structuring a more detailed design system, defining core components, typography, and interaction patterns to create a more consistent UI. A/B user testing and weekly client reviews were key to refining our work. We gathered feedback through usability tests, iterating on interactions, layout, and design consistency. Each round of testing helped us improve clarity and usability while solidifying our design system. By the end of this phase, we had a polished, well-structured experience with a stronger design foundation
innovate, spec, & ship
In the last few weeks of the cohort, we focused on refining our designs, documenting specifications, and ensuring a smooth handoff for implementation. With a solid foundation and design system in place, we explored innovative solutions to enhance the user experience, fine-tuning micro-interactions, accessibility, and a few edge cases. Our design system evolved, solidifying reusable components and interaction patterns to maintain consistency across the platform. To prepare for development, we created detailed design specs, annotating user flows, component behaviors, and responsive states.

The what - impact & shipped

Change Theme - some features of our theme design panels got implemented. There’s now a clearer distinction between website design, brand colors, and typography.
What is the future of AI native interface and how do we bridge the gap?

• Designing workspaces that morph based on context vs static documents

• Canvas adapts in real-time to your workflow - not just another doc editor

• Content self-organizes based on relationships vs manual folder structures

• Information flows between blocks naturally, like liquid vs rigid containers

• Elements reshape and connect based on AI understanding of your work

• Built for flow state - content appears where needed, then vanishes
Adding Pages - some aspects of our redesign for adding pages were implemented.
Editor Interface - changed the editing layout to be more cohesive, designed to have a more minimal aesthetic, and reorganized to be as unobtrusive to the website as possible.
AI Assist - designed their AI interactions to be more conversational and collaborative, while also adding some prompt suggestions to help users generate ideas.

Some of our team memories

last group meeting we had a nice reflection hangout call
don’t have pictures from hanging out with Jen at her office but there are reels/videos
presenting our project to 300+ people!

Apply for the next cohort

apply
Applications open april 25th