Speed of iteration was one of the core values at HappyFox. We had created a proof-of-concept for the Chatbot with the business logic living in a hand-coded JSON file. This was enough to validate the solution with prospects and get some early-paying customers to work with. However as the offering started to gain traction, we had to quickly develop a Chatbot Builder application to allow rapid development of customer solutions.

Typical Chatbot Builders use a hierarchical tree view to represent the conversation flow of the chatbot. Every competitor at that time had a similar collapsible tree view for the customer to create and customize the bot. During our research, we realized that such a builder UI was neither useful to the customer nor easy to build.

A hierarchical tree view with collapse/expand interactions is fairly complex to build from a web frontend point of view. It would require expertise in either Canvas or SVG to draw the branches and CSS animations to execute the collapse/expand functionality. We were hesitant on taking such an engineering-heavy approach that allowed little early iteration.

The UI design breakthrough came from imagining the hierarchical data structure as a nested file structure. We would expose one level of the data at a time and add a new column to drill down into the conversation flow. Each column would perfectly capture a single stage or step in the chatbot's conversation logic.

This approach helped us ship an MVP in a very short time, without having to fully implement every functionality of the chatbot. For advanced chatbot functions, we relied on editing the JSON directly.

The Chatbot widget was a fairly straightforward project. The widget could be considered as a platform that allows both first-party and third-party support modules. The most challenging aspect in the design of the widget was retaining the unique HappyFox look while allowing the customer to customize the appearance with CSS.

HappyFox Workflows is a no-code business process automation platform. It allows customers to create "workflows" – a series of instructions to execute which is triggered either manually or via a webhook.

The challenge in this project was to create a no-code programming environment that is simple enough to use by the customers while powerful enough to build complex workflows. We took the approach of an indented UI design – an homage to writing algorithms. It is a two-pane layout where the left pane showed the series of conditional steps to be executed while the right pane is a contextual detail pane that shows the currently selected workflow step.

HappyFox Workflows, being a no-code programming tool, had a steep initial learning curve. The longer it took for the customer to realize value, the lesser the chance of them converting to a paying customer. To improve the product trial experience for customers, we build two features – Savings Dashboard and Workflows Library.

The Savings Dashboard showed the current workflows execution statistics as well as the ROI savings calculated using an internal formula. This helped put a dollar value to the apparent benefits seen by the customer and largely improved our conversion.

The Workflows Library is a collection of pre-built, ready-to-use workflows. This helped customers get up and running in minutes rather than days. This also helped increase the number of active workflows per customer thus increasing the revenue per customer on average.

When I joined HappyFox, they had native iOS and Android apps that hadn't been updated in over a year with one lagging behind the other in terms of features. Having a mobile app was starting to become essential to close mid-market and some enterprise deals.

We decided to rely on the in-house React engineers and form a small team to rebuild the apps with React Native – the assumption was that with a single codebase, we could have consistent releases across both the mobile platforms.

This project was a refreshing break from designing for the web. I worked with a small team of designers to deliver mobile and tablet designs for the app.

HappyFox had a considerably small product and marketing footprint when I had joined the company back in 2019. With the launch of 4 new SaaS offerings, both the product and marketing footprint increased to a significant extent. We had to scale the team and the processes to keep up with the growth.

I initiated the HappyFox Design System project with all the designers in the company contributing to it. I was able to apply my learning from GitLab, having worked with similar constraints. The design system and standards took over a year to complete. I facilitated the collaboration with the engineers to adopt the new standardized elements and components in a series of incremental releases.

The scope of the design system expanded from product to marketing, from visual to interactive, and from UI to voice and tone.