magical beings find a way to save the day

MY ROLE
Senior Product Designer
Strategy, UI/UX Design, Front End Development, Responsive Design.

As a Product Designer, it's easy to create work for a brand you admire. So much of product design is developing a connection to the brand and getting curious about their goals.
‍
I was inspired by Steven Universe: a coming of age story that has blossomed into a global phenomenon with an engaged and powerful following. When Steven Universe (SU) released a TV-Movie, they came to us, the in-house creative team, to help make an online splash.

Project Highlights

UX/Ui responsive design and optimization

creation and maintenance of global microsite

increased click through rate - yt ad campagin

The Problem Statement

With the release of the secret Steven Universe Movie sponsored by Dove, the SU team realized they needed a one-stop destination microsite to house all the content for the movie.
I was intent that the hits on the website receive the numbers we had estimated by creating a strong user experience and revealing new movie content first.

The Strategy

The goal here was to create a website for new and current fans to get the full scoop on all Steven Universe Movie Content which included: Curated YouTube Playlists, Character Descriptions, Promotional Videos, Music, Merch, and Games.

The Process

My role encompassed everything from presenting wireframes to the team to sitting in on UX researchers focus groups to art direction and to laying out High Fidelity Prototypes for desktop and mobile layouts.

Design Process note - The design included process included High Fidelity Prototypes and mobile layouts as noted above. I also wanted to add sparkles to the headers of each section to give the site a bit of movement. Traditional thinking was if you need to animate an image you make an animated gif. I did that and quickly realized that wouldn't produce a smooth animation for the small sparkles. After researching different options I landed on SVG (Scalable Vector Graphics). With SVG the sparkles could remain vector and sharp instead of a pixelated sparkle image.