CodeBaby: A Usability Study on Trial Conversion Flow
CodeBaby is an AI-driven platform that creates interactive, human-like digital avatars to guide users through online experiences. By combining conversational intelligence with expressive 3D characters, CodeBaby helps businesses improve engagement, onboarding, and customer support across websites and applications.
Role
Product Designer Consultant
Tools
Figma, PanelFox
Timeline
March - May 2025
Skills
UI/UX, User Testing, Usability Testing,
Instead of following a rigid framework like the Double Diamond, this project used a flexible, iterative design process focused on uncovering and solving real user problems. The goal was to understand how people move through CodeBaby’s trial experience and where they get stuck before subscribing. By researching user pain points, testing key moments in the flow, and refining the design based on feedback, I created a smoother, more intuitive path from trial to subscription that encourages engagement and conversion.
Introduction
This project began when CodeBaby reached out to the Center for Digital Experiences for research-driven insight into improving their product’s trial experience. During our initial meeting with CodeBaby’s Chief Operating Officer, the team shared a key challenge they were facing:
Problem
Despite strong trial sign-ups, only about 3% of users converted to paid subscriptions, revealing a major gap between initial interest and continued use.
The CodeBaby team wanted to understand why users were not completing the transition from trial to paid, and how the overall experience could be improved to encourage conversion. Our objective was to uncover usability barriers, identify points of confusion or friction in the trial flow, and redesign the process to create a smoother, more engaging journey.
Research
User Profile
To understand the barriers users faced during the trial experience, our first step was to identify who CodeBaby’s primary users were. Through conversations with the CodeBaby team, we learned that their users primarily fell into two groups:
Business Decision-Makers
Customer Support Professionals
These personas helped guide both our recruitment strategy and our usability testing objectives. We recruited participants who represented this mix of roles, individuals familiar with evaluating SaaS tools, onboarding digital products, and testing free trials. Each participant was asked to go through the trial account creation and setup flow as they naturally would, from sign-up to the point of deciding whether to subscribe.
Moderated Usability Testing (MUT)
We conducted a series of 8 moderated usability tests where participants were asked to complete the trial sign-up and setup process. Each session was observed live, allowing us to note where users hesitated, expressed confusion, or showed uncertainty about the next steps. Participants were encouraged to think aloud, describing what they expected at each point and what factors might influence their decision to subscribe.
Following the sessions, we reviewed all recordings, notes, and user feedback to identify recurring themes. We noticed consistent patterns around a few areas.
Key Takeaways
Unclear Onboarding Cues
Misunderstanding Full Product Value
Lack of Guidance
These findings became the foundation for our next phase, translating observed pain points into specific design recommendations aimed at improving clarity, confidence, and conversion.
Recommendations
Following the moderated usability testing, our team synthesized the insights gathered from participant sessions and identified several key opportunities to improve the trial-to-subscription flow. The goal was to remove friction, build user confidence, and clearly communicate CodeBaby’s value before the point of purchase.
One of the first recommendations that I suggested was to align the left-hand navigation with users’ mental models and expected tasks. In the original design, participants frequently toggled between tabs, unsure where to find specific settings, an issue observed across all eight usability sessions, especially among non-technical users unfamiliar with the dashboard’s terminology. By reorganizing the navigation to clearly distinguish between tabs that affect the avatar’s appearance (Design), behavior (Develop), and overall settings (Avatar), the updated structure reduces guesswork, increases user confidence, and accelerates onboarding by making it immediately clear where to go for specific tasks.
My Avatars
Account
Collaborators
Pro
AVATAR
General
Analytics
DESIGN
Character
Interface
Studio
DEVELOP
Conversation
Before
After
Another recommendation that I made was to redesign the Preview Page to create a more streamlined and user-friendly experience by removing barriers that previously hindered customization. In the earlier version, changing the background image was hidden behind a small lightbulb icon with little context, causing most users to overlook the feature entirely. The updated design surfaces this option more clearly, eliminating unnecessary steps and making it easier for users to personalize their preview without confusion or delay. To further guide them through the process, the new Preview Page intentionally avoids appearing as a finalized product, instead using a minimal, open layout that signals ongoing customization. A clearly labeled call-to-action now invites users to upload an image, reinforcing that further edits are both expected and encouraged. These updates improve clarity, enhance discoverability, and foster a more welcoming experience—particularly for first-time users.
Before
After
Another strong recommendation I pushed for was to redesign the Training page to better communicate its purpose and importance, as the original version left users uncertain about why avatar training matters or what actions to take. The phrase “scrape your page for information” was overly technical and unclear, failing to explain how the data would be used or how it contributed to the avatar’s development. As one participant noted, “Filling out the name and description was easy, but I’m not sure what to do with the training content,” underscoring the need for clearer language and guidance throughout the process.
The phrase here is not comprehensive of the training capabilities.
Results
In the closing meeting with CodeBaby, I presented key usability findings that highlighted challenges non-technical users faced across navigation, avatar training, and customization workflows. While participants found the platform’s playful design and avatar creation features engaging, they struggled with unclear terminology, limited system feedback, and a lack of guidance during setup and interaction. The CodeBaby Design team agreed with and acknowledged all the usability concerns and recommendations discussed, including reorganizing navigation, clarifying the training process, and streamlining the Preview Page. About a month later, CodeBaby successfully launched a redesigned website that incorporated many of these recommendations, resulting in a clearer, more intuitive experience for new users.
