Easing account setup for chatbots
2018 UI UX Design Internship
Cashbot.ai is a startup that was part of the 2018 cohort at Skydeck, a Berkeley startup acceleration program. Cashbot.ai is a free tool that enables developers to make affliate-based product recommendations, and brand endorsements in their chatbots.
I worked there as a UI UX design intern for Summer 2018. All projects were created with Rachel Lin and overseen by Stephanie Ludwig, cashbot.ai lead designer.
I worked on various projects for cashbot.ai, including:
revamping the website
sign up redesign
Unify the sign up and dashboard with the website redesign. Develop a style guide for future features.
Redesign the sign up and dashboard so users have a seamless experience, integrations are more recognizable, and the process is all around less time consuming and confusing.
To better understand the flaws in the current design, we completed an audit of the site’s current experience. We also conducted usability tests with our users, complete with recordings and screen captures to fully understand the user’s experience.
The previous design relied on articles and videos to walk users through the setup process. This shows how confusing the dashboard and sign up process was for users. Ideally, the directions in the sign up and dashboard pages themselves would be sufficient for users to understand. Jumping back and forth between two tabs (the dashboard and an article) felt frustrating for users.
Comparative experiences were also used as inspiration, including Chatfuel and Outbrain, both services that work with chatbots.
Editing the Flow
We broke up the account setup into two parts, Sign up and Dashboard.
Sign up includes an introduction to cashbot services and a quick overview of the chatbot setup for the dashboard. As with most signups, Facebook and email options were included.
Dashboard flow is a bit more complicated. Users have three main actions they can perform through the dashboard, editing their profile, creating a new chatbot agent, and viewing their existing chatbots and agents.
Mid fidelity mockups allowed us to test different on-boarding methods and formats. One aspect we wanted to explore during this stage was how to communicate additional information.
We tested two formats
having a small chatbot icon in the margins with a chat bubble
the more traditional “i” information button.
Ultimately, people found the simple i button favorable because of its professional tone and intuitive interface.
Another aspect we wanted to test was the product description view and editing page. This is where people would free and edit all their product titles, images, and descriptions for their chatbots.
We explored numerous options for this, under two main categories.
1. grid view - displays more product at a time, with more emphasis on the photos, good for viewing product recommendations holistically.
2. list view - displays more text at a time, with more emphasis on the written description.
Based on the feedback, we decided to give users both options and allow them to toggle between displays.
There were some serious changes to be made for the form style guide.
Transparency - make the form more digestible by breaking up instructions into bullet points when needed, separating up some pages into multiple sections, and adding a progress bar with clear titles. CTA buttons were edited to have more action oriented copy as well. Overall, these changes helped clarify what step users were on and how to move onto the next one.
Contextual Guidance - show basic helper text when needed and provide additional helper text within the info buttons. Give suggested keywords based on input information so users can easily scan and select them. Offer intuitive selection options based on the context such as a slide bar for price restrictions, icons or images for visuals, and drop down input selectors with contextual search when there are over 25 options.