Tamás Fergencs
BotSupply is a chatbot management system for creating and publishing chatbots. The company wanted to transform the MVP-state product into a fully mature software by establishing a brand identity and introducing a consistent visual language within the product.
I joined the company as the second product designer, becoming the only one soon after.
The product was visually inconsistent and had an unintuitive layout and navigation system, which made BotSupply seem less trustworthy and poor quality. The development of new features also took a long time due to a lack of reusable components and patterns.
My first task was to review the product and identify ways to improve the UI. I found several problems across the interface:
I conducted an interface inventory to gather all the existing elements and patterns across the UI. This helped to point out inconsistencies and served as a basis for a unified visual language.
Across the interface, I found...
...and many other inconsistencies. A lack of standardization across components (e.g. buttons) made it difficult to build a mental model of the interface.
After seeing these inconsistencies, stakeholders were also fully convinced that we needed a visual revamp from the ground up.
The founders wanted a visual language that communicates #professionalism, but is #non-corporate. Since chatbots allow anthropomorphic communication with the system, the product had to emphasize the #human aspect of the interaction, and appear #friendly. Therefore, I opted for a soft, rounded visual style across the interface.
After several brainstorming sessions with stakeholders, we decided to use Nunito as our brand font due to its rounded terminals. I consolidated the color palette using a color ramp with defined lightness values, and created a brand-new icon library in a style that matches Nunito's rounded typeface.
I built the UI elements upon the previously established foundations, including standalone components (e.g. buttons, dropdown menus, or text fields) and compound elements (e.g. data tables or modals).
I looked at other chatbot management systems for inspiration, to see how they structure their layouts and navigation.
Seeing a clear pattern, I designed a double-layered, collapsible navigation drawer anchored to the left, where the primary and secondary destinations are next to each other for easier scanning. With the help of our front-end developer, we set up a Bootstrap grid to make the content area responsive.
I redesigned all screens across the platform according to the new visual guidelines and coordinated the implementation with our developers. Using the newly established design system, creating hi-fi design deliverables for new features was much easier and faster.
1
Better perceived quality of the product and company.
The consistent visual language increased the perceived professionalism of the product and helped BotSupply establish itself as a mature company.
2
Reduced design and development cycles.
The reusable components and layouts made it much faster to implement new screens; especially for the Integrations module, where the UI for all 11 integrations (and more to come) had the same repetitive elements.
3
A scalable foundation for brand material.
Besides our product development team, our Customer Success consultant also made good use of the design system to create marketing material much faster than before.
