Cooler TV

Web Experience

As a UX Consultant, I had the opportunity to work on a really fun social platform. Working closely with the founders, I created the web app experience that complimented the native iOS app.


scope of work

  • Establish new design system

  • Web UX Strategy

  • UI Design

  • Wireframes

  • User Flows


Profile page for verified users.

Profile page for verified users.

My Approach

The goal was to refresh their existing web experience, so my first task was to really immerse myself in their brand tone and voice. This was a fun and casual product, so I wanted the experience to uphold that spirit.  I created a bright and inviting UI that would feel intuitive and easy to pick up and learn. I also kept the interactions minimal with easily recognizable design cues.

I researched the iOS app to identify ways to carry over the key functions to the web experience. What made Cooler special was that the native app synced up with a user’s tv to take snippets of a show or movie to create memes in real time. Needless to say, the web experience would not have that functionality - but we wanted the web to have a bit of that special sauce as well.  We accomplished that with ‘Re-meming’, a pretty clever way to create new content without the need for tv connectivity.

Outcome

I built a design system that was extensible and responsive allowing for the most flexible design to accommodate launch features along with features slated for further down the roadmap.


Show Landing Page (left) and Re-Meme Screen (right).

Show Landing Page (left) and Re-Meme Screen (right).

JA_CTV-IMG.png

Browsing and Social

One of the key functions of the web experience is browsing shows and seeing people’s reaction to created memes. I approached this by having a familiar show browsing experience. I pulled from my VOD product background to highlight key show metadata and social features.

Key Features:

  • Content tiles w/ hover interactions

  • Social share and profile tools

  • ‘Details’ drawer for more information


Creating a Meme

Since the web experience had to be as compelling as the app experience, I had to design an intuitive way for users to create new memes without the functionality of the app. I accomplished this with a simple duplicate functionality: allowing users to select a meme they like, scrub/trim the clip, then add their own text.

Key Features:

  • Scrub / trim functionality for clip

  • Live preview of GIF

  • Custom meme text

  • Social share

CLR.gif

The Takeaway

  • Iterate, iterate, iterate. A product like this needs to get in the hands of users regularly.

  • Testing is good, but know when it’s time to cut it off. We need to ship.

  • Scope creep is REAL. Recognizing it is the first step, doing something about it is the most important step.

  • Startup culture is defined by morale and momentum - keep both up!


Find this interesting? Let’s collaborate!