Userbot
I worked at Userbot, a small Italian company specializing in AI-powered chatbots that help businesses enhance their customer experience on websites. During my time there, the company launched a new product called Ovy for Sales on Product Hunt, a B2B tool designed to assist sales teams in identifying, engaging, and converting users on their websites.
In my role as a designer, I was part of the development team, collaborating daily with frontend and backend developers, supported by the product owner.
Ovy Saas Onboarding
The first task I was assigned was to create a new onboarding flow for the new SaaS product, enabling users to set up their bots and use the product autonomously. I began by designing low-fidelity wireframes to define and test the flow.
Specifically, I structured the subscription flow for the SaaS product, covering everything from personal data collection to chatbot customization, and ending with the integration into the personal/company website. This process aimed to ensure a seamless experience for users as they moved through each step of the setup.
To validate the design, I conducted several user tests through video call interviews with our sales team. I instructed them to interact with the product and describe their experience with each part of the interface, while refraining from asking leading questions. This allowed users to freely perceive the interface and provide honest feedback without any influence from the design team.
I later made wireframes, designed a UI, and prototyped it with Figma.
Tutorial Homepage
The main challenge was that the product is quite complex and typically used by users with a technical background, as it also includes sections dedicated to AI training. This complexity can make it difficult for new users, especially those without technical expertise, to navigate the platform.
To address this, I designed a new tutorial homepage aimed at guiding users through the platform. This homepage includes video tutorials that showcase key features and best practices for using Ovy effectively, making the interface more accessible to all users, regardless of their technical experience.
New Design System
The challenge I faced was creating visual consistency across the design. To address this, I started organizing a new design system.
I designed a new icon set, a color palette, and a typography scale, all implemented with design tokens. This helped restore visual coherence across the product and create a more unified user experience.
Following are some examples of structuring design system items organized with Figma's multiple components and shown in tables to map all dimensions, states, and extra configurations.
Redesign sidebar
The challenge I faced was ensuring consistency across the design, particularly with the sidebar, which had become cluttered and lacked a clear structure. To address this, I redesigned the sidebar using an 8px grid for better alignment and consistency.
I grouped all user-related tools, such as profiles, workspaces, settings, and support, at the bottom for better organization.
Additionally, I merged similar navigation items into a single entry, allowing users to expand or compress the section with a plus or minus symbol. This improved both the clarity and usability of the sidebar.
