KAIZEN

Redesigning the navigation experience of Kaizen, an AI software testing tool


As the lead product designer at CloudCode AI (now BrowserAI), I was responsible for a redesign of our core product Kaizen to increase user engagement and decrease user churn. I started with the platform’s navigation, which was perceived as unintuitive by users.  

Company: CloudCode AI (now BrowserAI) // Timeline: Aug 2024 (2 weeks)
Role: Lead Product Designer // Collaborators: CEO, CTO, Lead Engineer
Tools: Figma // Skills: User Research, UI Design, Product Management 
Home screen with final version of the navigation




While sign ups were growing, engagement with the platform remained low

Two months after CloudCode AI launched the first version of Kaizen (I was not involved in the design of this version), we noticed that our user sign-ups continued to grow, but engagement with the platform remained low. Looking at the numbers, 38% of users did not engage with our platform after signing up.  






Result from User Interviews: Users found it difficult to navigate the web app.


 To identify the reason for the low engagement, I conducted interviews with several users, half of whom had engaged with the platform several times and the other half of whom had never visited the platform again after signing up. 

From these interviews, I synthesized three main issues: 
01 Users found it difficult to navigate the app
02 Users didn’t know how to get started after signing up
03 Users were unsure about the app’s key features

Since our team was planning to introduce new features to the app soon, I decided to start with the platform’s navigation.



Previous version of the web app with side- and topbar navigation 


How might we enable users to navigate the platform more efficiently? 

01 Identify specific issues and areas of improvement
02 Identify necessary elements to include
03 Analyze the navigation bars of similar tools
04 Create the design system for elements of the navigation bar
05 Defining the layout and placement of elements 



Findings from user interviews (red) and internal discussion (black)


Identifying specific issues and areas of improvement

To identify more specific issues and opportunities for improvement, I interviewed three existing users about their top pain points in navigating the platform. Additionally, I gathered input from my team on problems they were already aware of and their expectations for an updated version. 





Collection of elements to include in updated version 


Identifying necessary elements to include in a new navigation bar

Based on my collection of issues and areas for improvement, I compiled the list of items that should be included in the new navigation element. I distinguished between links to pages, items that would require sub-navigation, action triggers, and non-interactive items. I further marked them as either must-haves, or nice-to-haves. 






Analyzing the navigation bars of similar tools 

I identified four web app based tools, two well-established competitors of our product (Sentry, Keep) and two popular productivity tools (Notion, Keep) to analyze the positioning of common objects within their navigation bars. 

Based on this analysis, I decided to include all navigation elements, except for the breadcrumb, within the sidebar. This allows users to focus their attention on a specific area of the page as they navigate, and allows us to free up the top-right space previously occupied by buttons for account settings and light/dark mode for important usage status bars and pop-up notifications.




Design system of individual elements used for the navigation bar and top bar 


Creating a design system for elements of the navigation bar

To increase development speed and reduce the risk of bugs, our team decided to use shadcn/ui as the technical foundation for the navigation bar design system. Rather than seeing this decision as a limitation on the visual design, I used it as an opportunity to be inspired by its clean styling while complementing it with our platform's visual identity. 






Defining the layout and placement of elements

I presented four layout options to my team. We chose option 3 based on the following key factors:

01 As a new tool, positioning our logo at the top allows us to increase brand recognition with users.

02 By placing 'Settings' closer to the home button, we hope to enable users to set up important integrations and customizations more quickly.

03 By reducing the number of titles used, we can increase the compactness of elements in the collapsed version. 



Final Design


Navigation live on kaizen.cloudcode.ai
Final design of side bar including main and sub-navigation 

Analysis of results

Three weeks after implementing the new navigation in our kaizen.cloudcode.ai web app, we saw an increase in the number of users who navigated to pages other than Home after signing in, as well as an increase in returning users.


Users navigating to a page other than home after login 
62% -> 76% (+14%)

Users returning to the platform after registration (28-day retention rate): 
26% -> 35% (+35%)



Reflection & Next steps 

While these numbers represent great results compared to the previous version of the web application, they do not quite meet our more ambitious goals (40% retention rate, 60% active installation rate). Looking back at the user interviews conducted at the beginning of this project, we see that two main feedback points were not addressed with this update:

01 Users found it difficult to navigate the app
02 Users didn’t know how to get started after signing up
03 Users were unsure about the app’s key features

In order to meet our quarterly product KPIs, we decided to take the following next steps:

01 Create a more intuitive onboarding flow for users to get started more easily 

02 Improve product messaging on our website and other common marketing channels to more clearly communicate the core features and benefits of our product.  





JOHANNA SCHNEIDER
Johanna Schneider
schneider.johanna[at]outlook.com