Optimizing for UX

How we incorporated feedback to improve the user experience

Optimizing for UX

This article was originally published as part of the Building Couch Potato blog series.

In our last post, we outlined our process for collecting feedback from users of our Chrome extension, Couch Potato. How did we then incorporate this feedback into our product?

Based on the feedback from our users, we identified a few areas for potential improvement. First of all, while some users found our extension to be intuitive to use, others were less confident and felt they could have benefitted from more explicit instructions. While reviewing this feedback, we realized there were actually two separate problems being described. Some users were unfamiliar with Chrome extensions in general, and others were confused by our specific Chrome extension. During the feedback process, we also noticed that some parts of the user experience were not as seamless as we would have hoped, so we made it our goal to remove any inconveniences we could for the user in order to make their experience as pleasant as possible.

Once we had identified these problems, we began brainstorming how to solve them. For users who were unfamiliar with Chrome extensions, we decided to utilize a Chrome popup notification that would instruct users on how to initialize the extension whenever they were on a supported domain. This had the added benefit of reminding all users that they were on a supported domain and could use Couch Potato.

Chrome notification

Chrome notification

For users who needed further instruction on how to use Couch Potato after initializing it, we wanted to add instructions to our homepage without adding clutter for users who didn’t need instructions. To accomplish this goal, we added a React component that would only display detailed instructions if the user required them.

Instructions in a React component

Instructions in a React component

In order to selectively display components on our homepage, we added indicators to the state that would dictate whether or not the component should be displayed. When the user clicked on a button, it would change the corresponding state, thus triggering a rerender of the page. Clicking the button again would reverse this state change and again rerender the page.

export default class HomePage extends Component {
  constructor() {
    super();
    this.state = {
      showJoin: false,
      showStart: false,
      showInstructions: false,
      showHelpButton: true
    };
    this.toggleJoinPopup = this.toggleJoinPopup.bind(this);
    this.toggleStartPopup = this.toggleStartPopup.bind(this);
    this.toggleInstructions = this.toggleInstructions.bind(this);
  }

  toggleJoinPopup() {
    this.setState({
      showStart: false,
      showJoin: !this.state.showJoin
    });
  }

  toggleStartPopup() {
    this.setState({
      showJoin: false,
      showStart: !this.state.showStart
    });
  }

  toggleInstructions() {
    this.setState({
      showInstructions: !this.state.showInstructions
    });
  }

A portion of our code that allowed us to selectively display components on the home page

In order to further streamline the user experience, we wanted to make it easier for users to share their couch ID with their friends. To do this, we utilized two React libraries; react-copy-to-clipboard, and react-notify-toast. React-copy-to-clipboard allowed us to turn the user’s couch ID into a clickable link that would automatically copy their couch ID to their clipboard. To make sure the user knew this action had been successful, we utilized a toast notification confirming that the ID had been copied.

React-copy-to-clipboard and react-notify-toast demo

React-copy-to-clipboard and react-notify-toast in action

Beta testing and collecting user feedback was an essential part of our process. It forced us to take a step back from our code and center the user. Not only were we able to respond directly to user feedback, but we were also empowered to think creatively of further features our users might enjoy. Stay tuned for our next post when we will dive into some of these additional features.

Interested in learning more about Couch Potato? Start this blog series from the beginning! And don’t forget to download Couch Potato from the Chrome store so you can start watching shows with friends now!