JUSTIN SMITH / PORTFOLIO

CN APP / CN ARCADE / CN CONNECTED DEVICES / BOOMERANG / CN GAMES

Cartoon Network App

Project and role

The Cartoon Network app is our flagship app for serving Cartoon Network video to our users. In 2016, I won an Emmy for Outstanding UX & Design for my part on this product. I led the experience design, information architecture, and algorithm design since it’s major redesign in 2013. I architected the algorithm that powers the personalized playist called ‘New For You’ (previously known as The Mix). This feature is currently Patent Pending. I also managed other UX Architects throughout this product to develop features such as Chromecast casting and Single Sign-On.

Wires

My wireframes consist of layout designs along with detailed annotations. I take special care to make sure that all edge cases and both user and system states are detailed out. I verify that with production and development teams. I work closely with the frontend and backend development teams to ensure that the UX specs can be developed within our given timeline and maintain performance for our users.

Flows

I create flows for all necessary interactions and app progressions. Those cover user flows and system flows. The top image shows my flow of how ads should work between videos. This flow  shows how the backend is setup as well as the information architecture to help stakeholders understand how this system works and any limitations it imposes. The bottom shows the flow for displaying a specific interstitial to a user when a video is in squeeze credits.

NOTE: This flow is no longer accurate. It has been updated in another document.

 

CN ARCADE

Project

CN Arcade was a project that took on 3 distinct forms before its release. This was one of the first projects where user testing caused us to drastically shift the direction of the product. We took those findings and went back the drawing board to create a different product that met the same goals. I was responsible for defining and architecting the UX. I also directed our product design team in the interaction design, user flows, and animation experience design. I worked with our backend teams and vendor to document and define security flows and CMS information architecture.

Working relationships

We worked with a vendor in Amsterdam on this project. They are very talented and a joy to work with but the time difference was sometimes a pain point. I worked with our internal team as well as the vendor to establish cadences that helped smooth out the project as much as we could.

This was a unique product in that it wasn’t a game but had games and needed to apply a lot of game design elements. I worked closely with our Director of Game Design and our Director of Games Production to make sure I was applying the principals I needed to and taking into account production needs that I had previously not needed to worry about. We have a much better working relationship because of this product and understand each others needs a lot more as we go forward.

 

Cartoon Network App / CONNECTED DEVICES

Project

The Connected Devices app is our Cartoon Network app that runs on Apple TV, Roku, Amazon Fire TV, and XBox. This was originally a translation of our app from the mobile platforms. I worked with and directed an outside agency for the UX of this iteration.

We recently launched a complete redesign on Roku. In designing this update we used data and learnings from our users to collaborate with the vendor on the goals and key design principles. I split my time on this update between architecting some of the UX and directing the other portions through our partner’s UX resources.

Information architecture

I’ve been responsible for defining flows and updating information architecture. The wires and annotations are created by the agency but reviewed and directed by me.

I work with the front end developers at the agency to quickly mock and prototype the experience so that we can make rapid adjustments in building towards the final product.

Working with internal teams

Simultaneously, I work with our in-house backend developers to define architecture and update any CMS or API needs that arise.

I work closely with our product design team on refining and defining design elements and animations that affect the experience design.

BOOMERANG / SUBSCRIPTION SERVICE

Project

Boomerang was a project in collaboration with Warner Bros. It is a subscription service that provides a huge library of classic cartoons. I worked with seven different companies developing this product. I architected the UX and managed our team to drive this product forward. This product has since spun off into its own department of Cartoon Network.

Challenge: Information Architecture

Boomerang was one of the most challenging products I ever worked on for a myriad of reasons, but the IA and E-Commerce elements were two that stood out.

The content was owned by WB and was organized in ways we had not dealt with before. It was organized differently from show to show which presented another challenge. 

I eventually came up with three unique structures that matched up with our users’ mental models for the sundry shows

Challenge: E-Commerce

While I was well-versed in e-commerce from my roles at previous employers, working on a kids-focused product helped me to develop a different skillset. There are many legal requirements and restrictions that don’t exist on most general products.

I had to acquire knowledge quickly in order to create a top notch revenue-generating product. I worked closely with the Boomerang GM to establish a flow to grow the subscriber base.


Cartoon Network Games

Cartoon Network Games releases a number of games every year. Most of them are on mobile but a few (Steven Universe: Save The Light and OK KO: Let’s Be Heroes) have released on console. I direct the UX on many of these games. This involves reviews of the games and providing written direction for improvements. I will create documentation when necessary to provide the proper direction to the vendors that develop these games.