stareable-thumb.png

Stareable

In 2015 I co-founded Stareable, an online hub for web series. What started off as a small side hustle eventually evolved into a community of content creators and aficionados. As the sole designer, I designed everything from the brand identity, to the user interface, to the marketing collateral.

more process work, mockups and prototypes coming soon.


PRODUCT VISION

Stareable helps web series creators and fans discover and share free, independent content. Unlike other mainstream streaming platforms, Stareable celebrates and supports the web series community, helping facilitate connections and drive awareness.

brand logo

The Stareable logo references a video scrubber—an element common to media players; hinting at our product offering. The logo also visually emphasizes the action that we want users to associate with our site: to look fixedly at something with one's eyes wide open.

brand font

Open Sans is a friendly font that is optimized for legibility across digital interfaces. This font family is used across the entire site, and was also used in creating the Stareable logo.

brand colors

As we hosted meet-ups to get to know our target users, we noticed some common traits start to surface. The majority of the creators we connected with were young, light-hearted, risk-taking, playful, and just a bit irreverent. The site's color palette is a reflection of these qualities.

biz.png
Color Palette Copy.png

UNDERSTANDING OUR USERS

We defined our primary user to be the web series creator. We were initially giving equal weight to both creators and consumers, but in doing so, we struggled to prioritize features. Once we narrowed our focus, everything started to fall into place.

We conducted interviews with web series creators, and learned that they all shared three main objectives:

1. Grow the audience for their show.
2. Discover "what else is out there".
3. Connect with other content creators.

These goals helped drive my design decisions and ultimately defined our product.

  An earlier iteration that featured a rotating "Daily Pick" as the hero image (to give users an incentive to return); "Channel" and "Category" dropdowns in the navigation; and a genre-based tag cloud.

An earlier iteration that featured a rotating "Daily Pick" as the hero image (to give users an incentive to return); "Channel" and "Category" dropdowns in the navigation; and a genre-based tag cloud.

PROMOTING AUDIENCE GROWTH

In earlier iterations, we included a "Channels" dropdown in the site navigation. Through user testing and Google Analytics, we found that most people defaulted to familiar channels (like College Humor, Adult Swim and Viceland). Meanwhile, the vast majority of our content belonged to the "Independent" channel; sourced across various hosting platforms, like YouTube or Vimeo. How could we drive traffic to those lower-budget, lesser-known shows? We decided to remove the ability for users to search by channel—thereby democratizing our content so that it's judged on merit, rather than network associations.

ENABLING DISCOVERY

On the home page, users can find shows through filtering (by staff picks, trending, new, highest rated), selecting a tag (creators assign tags to their shows when uploading to the CMS), or via an explicit search. On secondary pages, they can filter by similar shows and/or relevant tags. During our user testing, we realized that a lot of people were intimidated by the murky web series landscape. I had the idea to include a "Surprise Me" button that redirects to a random show; gamifying the search experience and lowering the barrier of entry. This button has been extremely well-received by our users, both new and returning.

FACILITATING CONNECTIONS

We added the "Filmmaker Community" section in the navigation after receiving feedback that content creators wanted access to each other for knowledge sharing and career building. The community forum wasn't part of our original roadmap, but has become one of the most active pages on the site.

  An earlier iteration of the mobile UI, before we decided to de-prioritize and ultimately remove the show channels from the navigation. The horizontal scrolling containers were stacked, pulling from the different filters. Since all the filters were loading at once, the site was very slow. In the iterations that followed, we optimized by defaulting to a single filter on initial site load.

An earlier iteration of the mobile UI, before we decided to de-prioritize and ultimately remove the show channels from the navigation. The horizontal scrolling containers were stacked, pulling from the different filters. Since all the filters were loading at once, the site was very slow. In the iterations that followed, we optimized by defaulting to a single filter on initial site load.