Stream

getstream.io

Stream delivers scalable chat and feed APIs for clients including Product Hunt, Imgur, Bandisintown, and more.

My Role

UI/UX Designer

Oct 2019 - Jan 2020

While I was at Stream, I worked alongside the lead UI/UX Designer to improve and polish existing website collateral. I also participated in content marketing by researching and writing an article about chatbot design and chatbot best practices. In writing this article, I also learned how to leverage SEO keywords.

Chatbot Design Article

The Challenge

1. Research, synthesize and write an article about Chatbot Best Practices from both a design and product perspective.

2. Design a chatbot dialogue flow for the support demo on the Stream website.

3. Create a chat components UI Kit for designers to leverage on their own chatbot projects.

The Research

The chatbot space is certainly not new. Popularized by Facebook Messenger, there are now over 300,000 active chatbots on the Messenger platform alone. Why are chatbots becoming more ubiquitous?

My research uncovered that integrating a chatbot with your business provides:

- Increased engagement through a more personalized experience

- Better customer insights through pages visited, time spent, etc.

- Lower costs by eliminating traditional call centers

Now from a design standpoint, how can we ensure that customers interacting with chatbots have a smooth experience. My research here was twofold: researching chatbot best practices and interacting with existing chatbot solutions. Companies like LiveChat, Drift, and Zendesk have already developed their own solutions, and by interacting with the demos they provide on their websites, I gained a better understanding of the fundamentals of chatbot design.

Key Design Decisions

Having both an agent view and a customer view is imperative for the customer support use case. An agent can passively view a conversation, with the option to manually join the chat if they notice the customer is in distress. However, we’d like to automate this process using natural language processing to detect this.

Other design decisions included ensuring that buttons should not be confused with a sent message. There should be enough visual distinction between the two.

And of course, it’s imperative to provide human fallback depending on the scenario. A chatbots main goal should be to augment a real life agent by taking care of requests that are mundane or redundant, like tracking an order, modifying an order, etc.

To view the full article, click here

REST API Documentation

The Challenge

One of the major complaints received by developers was that our documentation was a) not clear from a content standpoint, but also b) we did not have REST API documentation provided. I designed and iterated on solutions that would help solve this problem.

The Solution

In the hero, we decided to include the SDK doc quicklinks to allow developers to switch pages if they ended up on the wrong one.

I wasn’t personally super familiar with how REST API docs were typically structured, so after researching how other SaaS companies wrote their docs, it seems like their were a few key components that developers really need, such as endpoints, parameters and descriptions, and example code blocks. Below are a few screens that show these components:

To view the REST API Documentation, click here

Chat Messaging Home Page Redesign

The Challenge

One of my last projects while at Stream was designing a new chat messaging home page that focused more on features, as well as specific use cases or industries that might benefit from our chat API. We wanted to highlight these use cases at a high level, so that visitors would click through to the full use case landing page to help boost SEO.

The Solution

I explored a new hero asset by using Cinema 4D to help model an abstract idea of chat.

I highlighted the 8 most important features. The original version had over 50 features displayed with no organization.

One of the new industries we wanted to highlight was how the healthcare industry (doctor-to-patient) could benefit from our Chat API. I illustrated an example of how a doctor might use a chat platform to communicate with their patient.

Finally, I redesigned our pricing cards for more clarity. The existing one lacks a clearly defined hierarchy, so I used different font-sizes and icons to increase the scanability. The existing enterprise card doesn’t mention anything about how it includes all of the standard chat features, so I made sure to call that out to reduce ambiguity.

Random Website Page Improvements

The Challenge

Improve tutorials pages, create feeds and chat messaging components pages, partners page and explore asset improvements.

Components Pages

On the tutorial pages, I designed the isometric hero illustrations, explored iconography and designed the assets for the vertical scrolling carousel. I also prototyped a few of these interactions:

Partners Page

Stream recently partnered with Voxeet Dolby, TwoHat Security and Virgil Security so I designed a page to reflect these partnerships. We also had an event at Dolby SF to announce these partnerships, so I included those assets in this page. I also created the header illustration.

Closing Thoughts

Layoffs suck

I was laid off on the very last day of last decade. It was super unfortunate, but in the long term it may have been beneficial for my career. Much of the work shown above was not really UX or even product design. The company was pre-series A and decided to bring on a second designer, when in reality, there wasn't even a product that needed to be designed (as our product is an API). As a result, much of the work was focused on visual design or SEO rather than product design. While it was still a good experience, I look forward to my next adventure.