cashbot.ai

Easing account setup for chatbots

UI UX Design Internship

 Background

Cashbot.ai is a startup that was part of the 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. 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:

1. revamping the website

2. sign up redesign

3. dashboard redesign

 Goals

1. Unify the sign up and dashboard with the website redesign. Develop a style guide for future features.

2. 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.

Current Experience

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.

Design Research

Form design is so nuanced, and I enjoyed researching and learning about it. Here are some of my favorite articles: Design Better Forms, UX in Contact Forms, Form Design Best Practices.

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

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:

1. having a small chatbot icon in the margins with a chat bubble

2. 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.

1. 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.

Final Mockups