Botbonnie is a no-code instant messaging solution for brands to automate interactive conversations to grow their business and provide onsite and offsite marketing tools across multiple channels. I led the design of Botbonnie across Facebook, Instagram, LINE, WhatsApp, and Webchat (like a messenger on the web) since the initial stage of the acquisition by Appier in Jun 2021. Since the acquisition, I have been able to build a design system for Botbonnie and integrate it with other Appier products to create synergy.
The information presented in this case study is for job application purposes and has been modified to comply with a non-disclosure agreement. The views and opinions expressed are solely those of the author and not of any entity. This case study is not intended for commercial use.
%20-%20Light.png)
I played a crucial role in evolving Botbonnie, a no-code instant messaging solution for brands, from July 2022. I took a highly collaborative approach and involved engineers and leadership throughout the process to ensure that the service addressed customer pain points and was technically viable, all while staying aligned with the direction of the company and market.
I collaborated with project managers to define the product and balance customer and business goals. I also prioritized and negotiated features for launch and ongoing development, ensuring a successful outcome.
I designed the user experience across multiple channels to ensure a unified and consistent experience. I created journey maps, wireframes, prototypes, and design specifications to bring the design to life.
Designed for multiple platforms in collaboration with UI designers, PMs, and tech writers, ensuring product features were translated effectively for each platform's context.
As a UIUX designer at Botbonnie, I tackled a challenging aspect of the project: integrating chatbots into onsite and offsite marketing scenarios. This involved addressing key questions such as how to help customers maintain focus on a conversation and avoid being overwhelmed by volume, how to maintain a human touch in conversations, and how to assist marketers in delivering interactive conversation experiences.
I tried to deliver an omnichannel experience for the no-code instant messaging solution. A key challenge was to design an interface that would allow marketers to seamlessly manage interactions across multiple platforms while still taking into account each platform's unique limitations. To address this, I designed an interface that provided clear hints to users about which functions were available on each platform while also allowing for scalability. This task required a thoughtful approach to design, carefully considering the users' needs on each platform and ensuring that the interface provided a consistent, unified experience across all channels.
To ensure ease of use, I took great care in designing Botbonnie's onboarding process to strike a balance between complexity and simplicity. For example, in WebChat onboarding, customers can effortlessly personalize colors, icons, and their launcher image. Additionally, they can connect their existing social media accounts, such as Facebook and LINE, allowing end users to link to their preferred channel easily and allowing us to associate the user with our database. Settings are, therefore, a crucial aspect of the overall experience.
Furthermore, during the Webchat setup process, it can be challenging for marketers to determine the precise location of the launcher. To make the process more intuitive, I designed a modal that allows marketers to preview precisely where the launcher will appear by simply entering the URL. This makes the setup process more intuitive and helps marketers better anticipate the outcome.
In SaaS products, complex concepts often challenge users to comprehend through text alone. To mitigate this, I utilize visuals and imagery in the design to effectively convey the intended functionality and make it easier for users to understand.
To effectively communicate the function of the condition group, I utilized the familiar concept of a shopping cart. This design allows marketers to quickly understand the number of users they can broadcast by visualizing the addition or removal of conditions, just as they would with items in a shopping cart. The changes in the user count are immediately reflected on the right-hand side of the interface.
According to interviews with CSMs and marketers, marketers place great importance on the user experience, including the flow that end-users take and the final result presented in each channel. With this in mind, Botbonnie has incorporated previews wherever possible to assist marketers. The example below, showcasing a preview of a story on Instagram, effectively illustrates the benefits of this feature.
The below example showcases a menu function in LINE, where marketers can add multiple menus for end-users to switch between, enhancing the marketing context. The interface for editing menus mirrors the end-user experience, allowing marketers to preview the final result while reducing the learning curve.
%20-%20Light%201-1.png)
To further enhance the experience, the function allows marketers to intuitively select and arrange interactive areas on the images they have uploaded. This presentation is in line with reality, allowing users to directly see the effect of the editing actions in real life and reducing uncertainty about the final result by making it more tangible.
In the product of Botbonnie, I strive to explain complex concepts through imagery, as understanding images is more straightforward than understanding text alone. As seen in the functionality mentioned above, tooltips were used to describe the meaning of menu switching through visual aids.
The shared system provides a unique opportunity to create innovative visual styles and update aging UI components in the product. In addition, this offers the chance to infuse the product with new and distinct styles imbued with more personality.
I built up the structure of the Botbonnie’s design system and refined components in Figma.
