AI Text Generator
CMS Interface Design (web)
BentoBox
Restaurants
B2B
Team
1-PM, 1-Product Designer, 1-Engineer
Role
Sr. Product Designer
Responsibilities
UX/UI Design, Competitive Analysis, High-Fidelity Prototyping, Usability Testing
Challenge
BentoBox is a SaaS platform that builds custom websites for restaurants, including marketing, ordering, and dining tools. However, the process of creating a restaurant's website is delayed due to the time it takes to gather SEO-driven copy from restaurant owners, who lack the time or expertise to provide it. This step significantly impacts the launch timeline, as 12.3% of unlaunched websites are waiting for copy. The challenge is to expedite the content acquisition process by integrating an AI tool into BentoBox, allowing internal onboarding teams to generate and apply copy quickly, reducing delays and enabling faster website launches.
Business Objectives
Decrease the time it takes for restaurant owners to review and approve their custom websites, streamlining the process.
Significantly reduce the time required for BentoBox to launch a restaurant’s website, enhancing efficiency.
Increase customer conversion rates and accelerate restaurant owners’ onboarding into the BentoBox platform, driving faster website adoption.
User Needs
The feature is primarily designed for BentoBox’s internal onboarding team to streamline website creation, however it will also need to be accessible for restaurant owners after site launch for ongoing updates.
Either user group should be able to generate and regenerate text for any page on a restaurant's website using a description prompt, tone of voice, and text length.
After generation and insertion of text, users should be able to add to or replace their existing copy using the feature.
Ideation & Concept Development
Brainstorming
Before greenlightint this project, many competitors had already implemented AI features for website builders and content creation (we assume by using Open AI's source code). Our engineer researched Open AI’s capabilities to determine what was feasible for our feature within BentoBox. We analyzed competitor experiences and adapted them to meet our content team's needs for quickly generating text within BentoBox’s scope.
Wireframing
I created low-fi wireframe designs to visually demonstrate the basic concept and user flow of the AI feature. Together with my engineer and PM, we brainstormed the possibilities of integrating Open AI’s capabilities and engineering solutions, ensuring that we could successfully implement a feature within our scope and technical constraints.
Research & Discovery
user research
There are two primary user groups that will utilize this feature. BentoBox’s internal onboarding team, responsible for adding content before website creation, and restaurant owners, who can access the platform after their website launch. To inform the design, my PM and I conducted a survey via Usertesting.com to assess AI tool familiarity among both groups before deciding how to integrate an AI tool into BentoBox.
competitive Analysis
I conducted competitive analysis to determine how other website builders were creating AI features for users. Through this research I learned that most companies were taking various approaches that suited their brand and primary users. These approaches were largely either simple experience solutions similar to Open AI or confusing, yielding them almost useless.
key insights
We carefully determined that we would need a highly effective tool capable of allowing users to input a detailed description of the specific text they needed, the desired length of the text, and the tone of voice. This tone of voice would be designed to seamlessly align and blend with the unique branding, voice, and style of any restaurant, ensuring consistency across all written content.
Design Approach
The BentoBox platform uses a minimal, clean aesthetic that prioritizes usability while incorporating a Material UI design system for consistency, scalability, and a polished appearance. The AI modal was developed using a combination of new and existing design components to maintain uniformity across the platform. Guided by competitive analysis, user needs, and engineering capabilities, the modal includes options for users to describe their desired text, select the specific webpage, choose the tone and length, and make necessary text alterations for customization.
The modal was carefully designed to be large enough to display all options clearly, along with the generated text. Its placement within the browser was a crucial consideration to ensure seamless usability. After users insert satisfactory text, the modal remains open for further edits. This led to discussions about whether a movable or fixed modal would better suit user preferences.
Given that BentoBox is a desktop-focused platform, accessibility was a critical focus. Each design system component undergoes testing to ensure full compliance with accessibility standards before launch, guaranteeing an inclusive user experience.
Design Principals
Create a user-centered experience to ensure simplicity for both internal BentoBox employees and restaurant owners.
Utizie current and existing design system componenets to create an intuitive interface tailored to the specific needs of each user group.
Prioritize clarity and usability to accommodate different use cases and improve the overall user experience.
Iterative Process
Initial iterations to the experience were made based on the overall scope of the feature, engineering capabilities, and user wants/needs.
impact
The percentage of customers in the ‘Pending Items to Launch’ stage with missing content decreased from 8.9% in June to 7.3% in July post-launch.
On average, 13 users open the modal, 6 generate text, and 4 insert text daily.
60% of users generate content twice before insertion; 37% of users generate content, with 69% inserting it within 5 minutes.
The end Product
Final Solution
The AI Text Generator feature is a user-friendly modal for onboarding teams and restaurant owners to generate tailored website copy quickly.
Users can specify text tone, length, and description, with easy options to regenerate or edit content.
The tool streamlines content creation, reduces delays and contributes to faster website launches, improving efficiency and user satisfaction.
Usability Testing & Validation
Usability Testing
This feature was tested with 10 Usertesting.com contributors using a high-fidelity Figma prototype. Users completed tasks, rated difficulty, and provided feedback on their experience. Based on feedback, I iterated on the modal, adjusting selections, button hierarchy, and allowed users to move the modal within the broswer window.
Success Metrics
After making improvements, the final design was shared with the internal onboarding team for review. Three members of the content team tested the new prototype and provided valuable feedback based on specific usability tasks. The content team expressed satisfaction with the design, finding it effective and user-friendly. As a result, no additional changes were made.
Conclusion
The AI Text Generator has addressed missing website copy by streamlining content creation for BentoBox’s onboarding team and restaurant owners. Its intuitive design and functionality has led to faster website launches, improved user satisfaction, and positive business outcomes.
Because this project was ambiguous from the beginning, as far as how we were going to build it, I think working in a smaller team was very successful. It was a scrappy, fun challenge for myself, my PM and the engineer working on this feature. The curiosity, dedication, and constant communication from the engineer was a large contributing factor to the execution and success of this project <3.
The biggest challenge was knowing that we needed this feature, but initially not knowing how we were going to build it in the beginning.
Leveraging user research early on ensures alignment with actual needs and reduces rework. Close communication between design, engineering, and PM is critical for tackling ambiguous projects.
Explore additional customization options (e.g., industry-specific tone presets). Expand AI capabilities to support more complex content needs, such as menu descriptions or blog posts.
A great addition to the backend! I love how you have options for length & tone, and so far it's been useful.