UX/UI Design - Illustration - Branding/Identity
Toolkit: Sketch, Adobe Illustrator, Procreate
My Role: As the Experience Designer at Scener, I create user flows, high fidelity screens, branding materials, illustrations, and marketing collateral.
A new way to virtually watch shows and movies together.
THE QUICK PITCH
At the start of the COVID pandemic, our team realized that we had the perfect opportunity to scale our product and build out our Chrome extension to seamlessly allow users to virtually and remotely co-watch their favorite shows and movies.
JUMP AHEAD
THE OPPORTUNITY
With social distancing at its peak, people are looking for ways to virtually stay connected with their friends and family.
THE PROBLEM
Spending time and hanging out with friends has come to a standstill with the arrival of COVID-19.
THE SOLUTION
A Chrome extension that allows people to video chat and stream their favorite shows and movies remotely, and in sync.
Welcome to The Virtual Movie Theater
THE WEBSITE
The website was designed to have multiple calls to action to download the Scener Chrome extension. By featuring quirky alien illustrations and snapshots of the extension in use, the user gets a preview of how Scener works, and how fun it is to use.
THE CHROME EXTENSION
We used a dark color palette for the entire sidebar UI to prevent any jarringly bright distractions while watching a show or movie. We wanted it to be fun and joyful, while still receding when compared to the streaming service. The bright purple is used initially to help guide users through the sidebar onboarding.
(Swipe for annotations)
THE SCREENS
ADDITIONAL COMPONENTS
Open Graph theater invite
Headphone reminder
Camera permission
VISUAL COMPONENTS
I created four different large backdrops for the Scener brand. The top two sunset backgrounds are used to add dimension and texture to the sidebar, while the bottom two starry backgrounds are used throughout our website and marketing assets in place of a solid background color.
SPACE THEMED ILLUSTRATIONS
I pushed Scener's space theme further by introducing three alien pals. These aliens are dispersed across the site and on promotional materials, as well as in a few extension screens to add an element of playfulness to the product.
Style Guide
We wanted Huddle's brand to be inviting, cheerful, and energetic, while also tying in with Penguin's existing brand. We chose to use Penguin's burnt orange (print) and bright orange (digital) and balanced it out with muted blues and teals.
The logo depicts two penguins huddling together, with their silhouettes mimicking the form of the typeface we chose: Rubik. The penguins are contained in a rounded rectangle that represents a book.
The rounded edges of all the UI elements and icons tie back to the inviting, cheerful, and energetic brand principles.
