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
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.
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.
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.
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.
Scrub / trim functionality for clip
Live preview of GIF
Custom meme text
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!