Chris Chambers
Chabot_Thumb.png

Streamlabs: Chatbot

 

Streamlabs: Chatbot

Adding a chatbot that lives natively within SLOBS. One of the highest requested features by our streaming community

Role

End-to-End UX, UI, and Research. Also, acted as PM and Scrum Master.

About Product

Chatbot is an advanced user feature which allows a user to setup commands for their stream chat. Type of commands can very from allowing your viewers to play songs on stream, to automatically moderating chat, to giving out general information, to establishing a currency where viewers can bet on things.

Research

Did an initial round of moderated testing with streamers unfamiliar with using our desktop chatbot. Lots of confusion especially for less technical users. Just turning the tool on was difficult not to mention most users felt extremely overwhelmed with the software do to the amount of customizations and settings.

Competitive Analysis

What Desktop Chatbot had in features we were lacking in usability. The two most popular chatbots in the market MooBot and StreamElements Bot were extremely simple to use. They did this by progressively disclosing relevant information and not overwhelming the user at the start with all the customizations the software could do.

UI/UX Agenda for Release

  • Simplify overall confusing UX with progressive disclosure

  • Eliminate confusing settings

  • Improve on-boarding flow

  • Break up the table

Blacklist Wireframe

Blacklist Wireframe

Kevin Place Holder for Tables

Kevin Place Holder for Tables

 
chatbot_customCommand_addAdvanced Copy.png
Advanced Wireframe

Advanced Wireframe

Progressive Disclosure

We had two competing use cases between our advanced users and our new users. Our new users wanted less as more. Fewer relevant settings with less customizations and an overall easy UX to get up and running quicker. Our more advanced users wanted all the bells and whistles for customization. The advanced users know where to find the resources to get help and don’t get overwhelmed as easily since they have a community to support them. We needed to find a inbetween for both use cases. The trick was to use smart default states and progressive disclosure. To hide the more complex tools and settings under “Advanced Settings”, while keeping all the primary settings in “General”. This way a new user could get up and running quickly without getting overwhelmed, while the advanced users has access to those settings a new user might not necessarily need. Also, we created some macro settings or modules. So if a new user just turned them on they would function with just one click, though an advanced user could delve deeper and optimize their experience if they so chose.

Eliminate Settings

Desktop Chatbot was an over engineered piece of software with way to many settings. New users from our early testing session were completely overwhelmed. Part of the process was eliminating certain edge case settings and certain features, so that chatbot could seamlessly fit into SLOBS. We removed regulars, the ability to stream to multiple platforms, and adding sounds to chat alerts just to name a few.

 
chatbot_modTools_01.png
 

Break up the table

Most of Desktop Chatbot is a series of lists or tables to display the most information in an efficient manner. Unfortunately, if you keep displaying information as a list or table the software begins to feel like a B-to-B application and can visually overwhelm the user. This in mind we created modules housing a complex series of settings which could be toggled on and off like a macro setting.

Improve Onboarding Flow

The original on-boarding flow for Desktop Chatbot was hidden and didn’t automatically popup once a user entered the app for the first time. This was a sense of major confusion when we tested the app on new users. In the on-boarding flow we look for your streaming platform and your streaming key. Fortunately we get all that information during SLOBS on-boarding process, so we completely eliminated the pain point without adding any additional UX.


Modules Wireframe

Modules Wireframe