StreamHive Product Design

Summary

In late 2016 I was contacted by a software engineer who wanted to create a platform to discover Twitch streamers based on their Overwatch ranks called StreamHive. He had a design that achieved MVP functionality in viewing streams, but wanted to expand the product to accommodate multiple games and offer more refined filtering features. His primary concern was to successfully create a brand centered around intelligent filtering and to create a user experience that empowered gamers to find more unknown streamers playing by specific competitive ranks.

Developer Portfolio - Live Website

Role

I was in charge of creating the brand for the product, such as designing and illustating the logo and creating a style library based on key phrases from the client. I was also the product designer, working on usability and visual design for the platform.


Landing Page

One of the first tasks I took on was to create the landing page for StreamHive. At the time I was designing this, the product only had one game to filter from, but the developer wanted to expand to multiple games. This landing page would not only inform new users on what the product did, but also include a collection of streams featuring specific filters such as "Top Masters Overwatch Streams" or "Hearthstone Arena Streams". While I designed the product to have the addition of user login, it was easy to scale down and implement without the need for users to sign up for the product.

Filters & Streams

One of the key problems identified the use of space for each component of the page. Visually, each stream component showed these key bits of information: the stream title, the hero/deck of the streamer, their rank, when the site last updated their informaton, current Twitch viewers, and the last heroes played (for Overwatch). I used colors to highlight interactive components, such as what heroes the player last played. On hover interaction users could see what heroes each bar corresponds to and see which heroes players prefer or have been detected to be playing.

A key problem with the filters design is that they took up a large portion of vertical real estate. As users changed filters, they'd be continuously scrolling up and down. I researched and looked at various platforms that focused strongly on filtering, primarily complex commerce sites such as Amazon and Steam. I decided that a sidebar dedicated to filters would be the best way to go, as it possessed the ability to scale up as more filters are added to the sidebar. I reduced the icon size and specified the design language for each interaction pattern, such as a selected filter or an unvailable one.

After defining the high level design for the filters page, I moved onto expanding the design to acommodate for a large number of filters and how the form's visual design should be defined. One request from the developer was to create a way to communicate the fact that some games on the list of searchable games possess StreamHive specific filters. By using the visual language of the StreamHive logo, I made sure that games with special StreamHive specific filters can be easily discovered by users.

Battle.net Promotion

After StreamHive expanded to include Hearthstone streams, one of Blizzard EU's community managers reached out to the developer of StreamHive and offered promotional space on their German language client. I created the graphic for this promotion, using a screenshot of the Hearthstone ranking filters with the StreamHive logo layered on top.