Self-Service Onboarding
Responsive Web Design
BentoBox
Restaurants
B2B
Team
1-PM, 1-Product Designer, 3+ Engineers
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, diner, and (soon to be) POS tools. The current process for onboarding new customers requires multiple teams (sales, onboarding, and content) to manually gather over 108 data points that results in frustration and delays for customers. With 108 data points collected across various teams (42% of which were duplicative) and only 56% being essential, this manual process lacks efficiency and takes too much time to complete. Customers often experience unclear timelines, lack of ownership transparency, and delayed platform access, leading to elevated churn rates. The goal is to create a seamless onboarding experience to enhance customer satisfaction and reduce churn.
Business Objectives
Reduce first-year churn from 3.46% to below the 2.4% average.
Decrease onboarding completion time by 30%.
Increase operational efficiency by automating manual tasks by 50%.
Enhance customer satisfaction with a 15% improvement in Net Promoter Score (NPS) during onboarding.
User Needs
Internal Teams need: Centralized management of onboarding assets in one place for our internal teams for better collaboration and transparency.
Customers need: Clear communication of timelines, tasks, and next steps as well as immediate platform access after payment.
Both: Streamline non-redundant data collection in one place at one time, regardless of the product(s) purchased at time of sale.
Ideation & Concept Development
Brainstorming
I collaborated with my PM during ideation sessions to create low-fi wireframe flows to address the customer’s journey from payment to account creation and onto onboarding to obtain all of the data points from each customer (regardless of the product(s) they have purchased). We also created wireframes to address the backend tooling our internal teams would be using to track a customer’s status and journey within the onboarding flow. We explored solutions like a self-service onboarding portal, automated notifications, and centralized asset management.
Wireframing
I created medium-fidelity wireframes in Figma and iterated based on feedback from internal stakeholders. I validated the customer journey flow via usability testing with 10 contributors in UserTesting. The prototype showcased a streamlined data collection flow across 7 pages, a visual progress tracker to show how far along a customer was in the process, automated notifications for next step, and automatic saving so customers didn’t lose valuable time or information. The backend tooling for internal teams was not prototyped, but instead flows were transparently shared and integrated on in real time when meeting with teams for feedback.
Research & Discovery
user research
Conducted interviews with 20 first-year customers and analyzed survey data to uncover pain points in the onboarding process. We met with content managers, onboarding managers, and engineers to understand technical constraints, user requirements, and operational goals for both customers and our internal teams.
competitive Analysis
My PM benchmarked the onboarding processes of competitors in the restaurant SaaS industry (Toast & Clover). She identified best practices such as self-service portals, progress trackers, and integrated asset management that we could leverage for this feature.
key insights
Customers expressed a strong desire for clarity and access to their purchases after payment. Additionally, internal teams required improved tools to track progress effectively and reduce the reliance on manual effort, underscoring the importance of streamlining operations and reducing redundant information.
Design Approach
For the onboarding flow, I created a modern, intuitive interface with a consistent color palette, typography, and interaction patterns aligned with the existing design within the BentoBox platform. I did this to ensure consistency and build familiarity as customers navigate from purchase to platform use. Because customers need to fill out information on multiple pages, I wanted the layout for each page to be the same to account for the placement of the progress tracker and navigational CTAs as well as develop an 'easy-to-follow' UX pattern. This layout allows for the right side of each page to be dedicated to the content a customer needs to fill in as well as the primary CTAs a user needs to navigate through the flow. Because this is one of the first interactions a customer will have with BentoBox, the left side of each page has the same branded logo and GIF image to add brand personality as well as promote continued progress.
The internal tooling was designed using similar UX/UI that our teams use today. Improvements were made to text styling and page layout to help team members better identify where customer accounts are in the onboarding flow as well as provide direct links to account content uploaded for quicker access. A new dashboard was also created for internal teams in order to better track how many accounts are within the flow, the contact information of the account users going through the flow, and where those users are in the flow as well as how long they have been in the flow.
Design Principals
A user-centered design approach was implemented to prioritize and address customer needs effectively.
Emphasis was placed on clarity and simplicity to minimize cognitive load and enhance usability.
Scalability was ensured to support future features, integrations, and expanding functionality seamlessly.
Iterative Process
The prototypes were meticulously refined through three comprehensive rounds of usability testing, during which feedback was carefully incorporated. This process ensured enhanced clarity in communication and improved efficiency in the user flow, focusing on collecting only the most meaningful and relevant data from new customers.
impact
Churn rate was significantly reduced, dropping from 3.46% to 2.1%, indicating improved customer retention and satisfaction.
Net Promoter Score (NPS) saw a 20% improvement, reflecting a positive shift in customer loyalty and overall experience.
Operational efficiency dramatically increased, marked by a 50% reduction in manual tasks, streamlining processes and saving valuable time for internal teams.
The end Product
Final Solution
Gain immediate access to the platform upon completing payment, ensuring a seamless and efficient transition for new customers without unnecessary delays.
Follow a clear, step-by-step guided onboarding flow designed to simplify the setup process and enhance the user experience.
Manage, organize, and upload all necessary assets in a centralized, user-friendly location, enabling easy access and streamlined content management.
Usability Testing & Validation
Usability Testing
I conducted testing using UserTesting with 7 contributors, focusing on ease of navigation, clarity of steps, and functionality of the asset upload portal. Findings led to improvements in labeling, copy, and data entry. We also collected input from internal stakeholders during weekly reviews and incorporated suggestions to enhance functionality and alignment with business goals.
Success Metrics
To measure success we tracked the average time required for contributors to complete the onboarding flow. We asked contributors to rate the level of difficulty on each page within the flow to determine improvements to copy or UX. To determine if ‘next steps’ after flow completion were clear, we ask contributors to describe in their own words what they think the next steps in the onboarding process would be.
Conclusion
By redesigning the onboarding process with a self-service portal, we addressed key pain points for customers as well as internal team members, reduced churn, and improved customer satisfaction. This project demonstrated the value of user-centered design and cross-functional collaboration.
Collaborative ideation sessions sparked innovative solutions, bringing fresh ideas to the forefront. Usability testing played a crucial role in ensuring the final design was user-friendly and intuitive. This approach was complemented by a clear alignment between the design and business objectives.
Balancing technical constraints with user needs required creative problem-solving. Tight timelines necessitated prioritization of key features and primary data points for the initial launch.
Early stakeholder involvement was critical for alignment and buy-in. Iterative testing and refinement ensured a product that met customer and internal user needs effectively.
A setup checklist feature will be added within the BentoBox platform to empower customers to personalize and configure their products independently, reducing reliance on internal teams later in 2025. To enhance the onboarding experience, the portal should be expanded to include additional integrations, providing users with more comprehensive functionality. Continuous monitoring of performance metrics will help identify areas for optimization, ensuring the platform remains efficient and user-focused.
This has improved the customer acquisition experience drastically. My team is operating SO much faster now and new customer seem to be much happier than previous customers!