CodeBaby – Identifying Friction Points for Non-Technical Users
A platform that generates real-time AI-powered interactive avatars to streamline workflows across businesses, education, healthcare, and more.
Role
Product Designer Consultant
Tools
Figma, PanelFox
Timeline
March - May 2025
Skills
UI/UX, User Testing, Usability Testing,
CONTEXT
Our team conducted a kickoff meeting with CodeBaby, along with other key team members. During this session, we aligned on business goals, explored current challenges, and defined the focus of our research to ensure it addressed real user and product needs.
THE PROBLEM
Non-technical users were dropping off during the trial experience, struggling to understand the platform and never reaching its core value, resulting in a low trial-to-subscription conversion rate.
Research Methodology – From Insight to Impact
We conducted 8 moderated usability tests, each with the same task and scenario to ensure consistency. All participants were either current or aspiring startup founders, ranging from non-technical entrepreneurs to software engineers, reflecting CodeBaby’s target audience. Insights from these sessions were synthesized afterwards into a report highlighting key friction points and opportunities to improve trial-to-subscription conversion.
Key Findings – What Shaped Our Direction
CodeBaby provides an engaging platform for creating AI-powered avatars. Users found it easy to get started, with clear entry points and playful, customizable avatar options that were well-received.
Usability testing revealed areas of friction, particularly for nontechnical users. Participants struggled with unclear navigation, limited system feedback, and technical language. Many were unsure when avatar creation was complete, how to preview it, or how to embed it on a website.
Based on these insights, our recommendations focused on improving clarity, guidance, and feedback throughout the user journey. Users were often unclear on their progress during avatar setup, leading to frustration and uncertainty. To address this, we suggested adding a visible progress indicator to help users understand what they’ve completed and what comes next. We also recommended clearer explanations to help users understand why training their avatar matters and clearer call-to-action buttons for overwhelming pages. Our suggestions aimed to create a more cohesive, informative, and confidence-building experience.
Recommendations – Bridging Those Gaps
The following sections outline key usability issues and design recommendations to improve clarity, reduce friction, and support confident user adoption:
The back, forward, and “x” buttons are the only navigating controls
Users were unclear on their status during the avatar set up process, causing them feel frustrated due to a lack of feedback.
Add a visible timeline or progress status to give users a visual roadmap of what is previous and next.
The phrase here is not comprehensive of the training capabilities.
The Training page lacks context and fails to communicate the purpose or importance of avatar training, leaving users uncertain about why it matters.
The description is too vague for non-technical users who don’t understand how to code
The Launch step is only nested in the settings and not a part of initial avatar setup
The process of launching the avatar is disconnected from the avatar setup experience.
Provide clear instructions for launching an avatar and Integrate it within a guided path.
Misc Controls: Accessibility is compromised when controls are blocked by avatar movements
Floating Chat Box: The Wizard Assistant Chat box and floating text box both appear simultaneously creating user confusion
Chat Icon: Users don’t know to click on this to view chat mode, due to the floating text box
The chat experience was unclear and inconsistent, causing users to feel confused about about how to navigate the conversation.
Differences in chat interaction features from Wizard vs. Preview
Inconsistent placement of the control icons from the wizard portal
Inconsistent Microphone positioning compared to the wizard portal
Chatbox is in a different position than in wizard portal
Simplify and unify the chat experience to reduce confusion and improve usability.
It takes time to get a reply from the avatar. So users thought that they had internet issue.
6 out of 8 noted uncertainty due to lack of feedback while the avatar processed their input
Add animating dot while the avatar processes the questions
Your Avatar
Just say or type “hello” to start a conversation.
Add an animated typing indicator to the chat interface to to provide visual feedback during response processing.
Users are overwhelmed by long results.
5 out of 8 users mentioned that they don’t fully understand the purpose or value of the avatar preview.
Your Avatar
Just say or type “hello” to start a conversation.
Avatars created in this app serve a variety of purposes ranging from personal to profession uses.
What more would you like to learn?
Can I customize my avatar’s voice and personality?
Can I use this avatar to teach a class or give a tutorial?
What are some successful examples of avatars used professionally
The chatbox was updated to include brief default responses and suggested follow-up questions, helping users stay engaged and confidently continue the conversation.
Icon is hidden and not a significant CTA button
Users believe this is a “result page” due to the amount of colors and graphics
Multiple steps required to change background
Several participants found the preview page confusing, with difficulties navigating key actions such as exiting the preview and changing the background
Streamline the process to upload an Image and change the preview page
Users struggled to find key features because the left-hand navigation lacked clear organization.
My Avatars
Account
Collaborators
Pro
AVATAR
General
Analytics
DESIGN
Character
Interface
Studio
DEVELOP
Conversation
Restructure the left navigation bar to clearly separate features by purpose, one for general, one for design, and one for develop.
Results – The Outcome at a Glance
Our usability study revealed critical insights into how CodeBaby performs from both a user experience and business perspective. Quantitatively, the trial-to-subscription conversion rate showed significant potential for improvement, especially among non-technical users who faced friction points that slowed or stalled their progress. Qualitatively, participants consistently reported confusion and frustration around specific tasks, confirming challenges the team had suspected but could not fully validate due to limited data.
Our clients shared that these findings validated many of their initial hypotheses, providing much-needed evidence to guide future product development.
The most pressing issues included:
Image Upload and Preview Confusion: Several users found the preview page difficult to navigate, struggling to exit preview mode or change background settings.
Unclear Navigation: The left-hand navigation bar lacked clear organization, causing users to miss or overlook key features.
To address these, we recommended:
Streamlining the Image Upload Process: Simplify steps and improve feedback to reduce user uncertainty.
Redesigning the Preview Page: Make controls intuitive and easy to find, allowing users to confidently review and adjust their avatars.
Restructuring the Navigation Bar: Organize features into clear categories—General, Design, and Develop—to help users quickly locate tools relevant to their needs.
These actionable fixes aim to reduce cognitive friction, improve user confidence, and ultimately increase the trial-to-subscription conversion rate.
For a deeper dive, you can review our full research report and presentation slides.
Conclusion – What This Meant for CodeBaby
The client appreciated the depth of our findings and the clarity of our recommendations, which gave them confidence to prioritize design changes focused on improving navigation, feedback, and user flow. These changes are expected to make the platform more intuitive and boost trial-to-subscription conversions.
If we were to continue working on this project, the next steps would include implementing and testing the recommended design changes, followed by A/B testing to quantitatively measure improvements in user engagement and conversion rates. Further research could also explore onboarding experiences and post-subscription user journeys to create a more holistic user experience.
The major takeaway from this project is the power of user-centered research to uncover hidden pain points and validate assumptions. It reinforced the importance of clear communication, feedback, and simplicity in design, especially for complex products aimed at diverse user groups.
This case study stands as a reminder that even well-designed platforms benefit from continuous testing and iteration to truly meet their users’ needs.
