Botanic was interested in creating a tool to help empower users to develop, deploy, and manage their own conversational interfaces.
Role
Product Designer & UX Researcher
Team
I collaborated with four developers and a content strategist
Deliverables
Research
User Flows
Wireframes
Mockups
Beta Testing
The Challenge
The back end of a conversational interface is an incredibly complicated system. We needed to translate the full functionality of the code while providing an approachable user-facing experience.
The Solution
A non-technical, graphical interface that allows users to create and interact with visual conversation flows, empowering them to build out their own bots with confidence.
Process
Research
Initial research was conducted to gather a greater understanding of the market and potential competitors. Currently, there is a growing number of bot building tools. I explored their UI and UX and found:
• A majority of competitive products have poor usability and are overly complicated.
• These products tend to frontload full functionality and it can feel intimidating to get started.
As for user research, my primary point person was our content writer and strategist, who would be a direct, internal user for the tool. Working with him was an integral part of learning about best practices for writing for bots and product feature requirements. I also spoke to a few people who have used bot builders in the past about their experiences.
Strategy
Following the research phase, I began working closely with our stakeholders to reinforce alignment on next steps. Based on business goals and research, we determined:
• Our users will primarily be non-technical (1) clients and (2) our own internal content writers.
• Our MVP product will empower these users to create and manage their own bots without the use of code.
• We need to provide a graphical interface with a simple user flow to ensure users feel confident moving through the system.
Since writing bot content will inevitably be a new experience for most users, creating a clear product flow was crucial for usability. Our goal was to mirror the way bot content writers develop conversational flows.
Ideation | Wireframes
After determining the flow, I began considerations for how the interface was going to look. While we built our bots in a language called ChatScript, we always started with graphical representations of the flows to communicate with the clients and the team. I used this as inspiration for our UI.
Wireframing began with a series of paper sketches and whiteboarding in collaboration with the team. In order to heighten usability and develop an intuitive, plug and play tool, I focused primarily on:
• Progressive disclosure: The product has a ton of functionality, but a lot of the features are for rare (yet crucial) use cases. Progressive disclosure allowed us to prioritize default settings with the option of added granularity, creating an approachable and uncluttered workspace.
• Consistent modal interactions: Modals contain fields/options and are used throughout the product. The choice of a modal (over a separate page) keeps interactions grounded in the main workspace area while giving focus to specific interactions.
• Functional hover states: Another variation of nesting, many of the components in the tool have hover states that also expose the option to edit/delete. This is a learnable behavior that helps keep the workspace minimal, while also unlocking additional functionality just a click away.
Working on the wireframes was an incredibly iterative and collaborative process. Understanding technical limitations/capabilities as well as bot creation best practices and requirements was crucial to the success of the product development cycle and ultimate result.
Ideation | Mockups
Once the team had a clear understanding of UI direction, the backend developers began their work while I started on a layer of visual design. For the MVP product, I used visual design to enhance the experience through:
• Consistency in visual language: Incorporating a tight color scheme and repetitive visual elements (such as icons and button shapes), allows the product to feel cohesive and straightforward.
• Clear calls to action: The use of bright colors is sparse and used to clearly indicate actionable elements. Hover states on all clickable options are also important as a way to give users immediate feedback on the state of an element.
I developed dozens of visual assets including mockups, design specs, and icon files. I managed the front end development of these mockups and worked closely with backend developers to ensure proper and timely application.
Beta Testing Program & Iteration
Botanic was able to secure a handful of potential customers interested in participating in our beta program. I managed the entire UX / UI research segment of the program.
“What’s amazing here is that I can just start [working] and I didn't have to read instructions” (Rocky, User)
Consisting of a round of usability testing and user interviews, we were able to gather invaluable insights about the strengths and weaknesses of the product with a group of users that were very interested in creating their own bots. These insights were incredibly helpful in determining priorities in terms of product enhancements, feature requests and general design upgrades. Collaborating closely with the development team, iteration is ongoing.
Results
The initial round of wireframes for this product were used in a deck to successfully help secure investment for Botanic. This was a great opportunity for us and gave us the funding to continue to build out the product.
Personally, working through the full-cycle of product design was an awesome challenge. It reinforced the absolute necessity of an open, collaborative, and iterative team in creating successful products.
We’re currently successfully using Botanic Author internally and working on enhancements for the official product launch.
.png)
