ccwipfinal.png

cashbot.ai

ccwipfinal.png

cashbot.ai

Easing account setup for chatbots

2018   UI UX Design Internship

 

 

Background

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:

  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.

select screenshots from the previous design of the dashboard and sign up.

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.

Screen Shot 2019-03-30 at 8.13.22 PM.png
Screen Shot 2019-03-30 at 8.15.56 PM.png
 

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.

New sign up flow

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.

New Dashboard Flow

 

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.

Chatbot chat bubble for more info

Chatbot chat bubble for more info

click on i button for more info

click on i button for more info

 

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.

Grid view

Grid view

List view with side menu jump navigation

List view with side menu jump navigation

 

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.

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

 

Final Mockups

 
cashbot style guide.png

Sign up

Screen Shot 2019-03-30 at 10.07.45 PM.png
 

Dashboard

Screen Shot 2019-03-30 at 10.11.29 PM.png
 

Train and Edit Chatbot Recommendations

Screen Shot 2019-04-03 at 11.08.12 PM.png
Screen Shot 2019-04-03 at 11.03.37 PM.png