The Defiant Ones

HBO

The Defiant Ones

The official website for HBO’s The Defiant Ones. A docu-series about Dr. Dre and Jimmy Iovine’s unlikely music partnership and their impact on contemporary culture.

Background

The Resistance

I was contracted by Deep Focus to generate a one page site promoting the HBO Documentary series– The Defiant Ones. The agency had presented four primary sections: a snapchat snapcode promoting the documentary, hidden bonus content, user generated gifs, and influencer experiences.

Bells & Whistles

The Features

Snapcode

Once landing on the site, the user is presented with snapping the Defiant Ones snapcode- which unlocks the official Defiant Ones lens.

Disruption

Unlock bonus content, by continuing to watch a few jarring animations.

User-generated content

Users could record their own 10 second video, fill in the black for the phrase “You will never _______.” and receive sharable animated gif that contains the same type of effect as the above.

Listen to some influencers.

HBO had 6 influencers record some of their defiant experiences to share.

The Tech

Loading up the toolbox

This one page site was packed with different technologies. React was used for the video capture process, nodejs was used to make the ugc content, and intense CSS3 animations for the glitchy-ness effects.

Considerations

The UGC content was the challenge that stood out the most. Making a video capture tool that will only be X amount of secs of recording, that will not only work cross-browser, but cross devices.

Related Work

Dunk Dynasty: Zion’s astonishing slam index

ESPN

Dunk Dynasty: Zion’s astonishing slam index

Duke freshman Zion Williamson is among the most explosive dunkers the game of basketball has ever seen. We cataloged the best and most impactful of his 52 dunks during a scintillating season in Durham.

BACKGROUND

Working with ESPN

It’s always a real treat to get involved with anything ESPN hands me. This time, ESPN reached out to build a featured article that demonstrates the amazing talent of Zion Willamson. They delivered all the assets, and a very organized Sketch file, and I handed back the developed feature.

Fun Tech

SwiperJS

The article consisted of 5 sections, and each section had a range videos. SwiperJS was utilized to create the carousel resulting in a smooth cross platform transition from article to article.

For the lazy viewer

Video on demand

ESPN requested to have the videos autoplay as the user scrolls the video into view. The code below demonstrates how this was executed.

window.addEventListener('scroll', throttle(() => {
    // get current section
    const columnIndex = Navigation.swiper.realIndex;
    const column = columns[columnIndex]
    // get dunks from current section
    const columnDunks = [].slice.call(column.querySelectorAll('.dunk'));
    // check position of dunk 
    columnDunks.forEach((dunk, index) => {
        const {
            top,
            bottom,
            height
        } = dunk.getBoundingClientRect();
        const centerY = (bottom - top)/2 + top;
        // if its within range, play it
        if (centerY < 0.75 * window.innerHeight 
            && centerY > 0.25 * window.innerHeight) {
            const dunkIndex = columnIndex * 5 + index;
            activateDunk(dunks[dunkIndex]);
        }
    }); 
}, 200));
The Result

Dunk Dynasty: Zion’s astonishing slam index

Launch Project
The Tech

Loading up the toolbox

Considerations and Reccommendations

As project manager, I chose tools that help the team organize tasks and assets. For ESPN, I recommended Trello and created a board that borrows features from agile planning.  This provides visibility to the client for the work that is outstanding, in development and completed.

Google Sheets

JSON

Nunjucks

HTML5

FEED ME!

Content Management

ESPN has their own CMS to handle article content, however developers do not have access to it. In order to get the copy deck into HTML markup, the content team at ESPN edits a google sheet, then I export it to JSON, and use that to compile the markup (via Nunjucks). When updates are required, the team makes the changes in google sheets, and I export a fresh JSON file, compile it and then they can copy & paste the markup into their CMS.

Kick Game Evolution

ESPN

Kick Game Evolution

Being an NBA sneakerhead has become more than having the biggest closet.
Meet three players who have embraced the sneaker culture evolution.

BACKGROUND

Working with ESPN

ESPN contacted me through a recommendation from a colleague– looking for help creating one-page featured articles. The handoff would consist of Sketch files with redlining notation, and an HTML wrapper.

My contribution is building out the markup, javascript, styles, and provide input on interactions as well as polish up animations.

THE HANDOFF

How things can run so smoothly

The design team at ESPN is exceptional! They provide me a lot of detailed information, and in this case a video on how they would like the flow of the site to animate. With all that work completed before I even touch the keyboard, they ask me to please take all liberties to go ’off-script‘ and experiment with animations that I think would improve the experience.

THE RESULT

ESPN – Kick Game Revolution

Launch Project
The tech

Loading up the toolbox

I am a huge fan of GSAP all the way back from the days of Flash. The rest of the technologies used are the standard: HTML5, SCSS, Webpack, and JSON for data-modeling.

Considerations and Recommendations

As project manager, I chose tools that help the team organize tasks and assets. For ESPN, I recommended Trello and created a board that borrows features from agile planning.  This provides visibility to the client for the work that is outstanding, in development and completed.

Discovery & Pride

The intro animation presented itself as the largest challenge. Two separate images, a foreground and background, are matched up, a Ken Burns effect is applied, followed by masks to reveal and hide the previous and current slide.

Google Sheets

JSON

Nunjucks

HTML5

FEED ME!

Content Management

ESPN has their own CMS to handle article content, however developers do not have access to it. So in order to get the copy deck into markup, I have the content folks at ESPN edit a google sheet. I then export it to JSON, and use that to compile the markup (via Nunjucks). If and when updates are required, the team makes the changes in google sheets, and I export a fresh JSON file, compile it and then they can copy & paste the markup into their CMS.

Oncology Pipeline Explorer

Amgen

Oncology Pipeline Explorer

An interactive kiosk for Amgen that demonstrates the relationships between different cells and their research on Oncology.

Background

The Brief from Broth

The Broth agency reached out to me from a recommendation through a friend. They had a few bids out for the job and asked me to send examples and an estimate. Within a week I had secured the job. Over a few meetings face to face I had my marching orders and was ready to get prototyping.

What’s on the hook

A relational map of circles.

The challenge was not only taking a rough abstract idea sold to the client into fruition, but to also complete this task in a very short timeline. The brief was provided to me the Monday after Thanksgiving 2018 and needed to be sent off for MAC review January 10th, 2019

A lot of work, in a short time, with little to go with. Within a holiday month.

List of conferences:

ASCO GU 2019 2/14 – 2/16 | Las Vegas
AACR 2019 3/31 – 4/3 | Atlanta
ASCO 2019 5/31 – 6/4 | Chicago

THE PROCESS

The work in progress…

I quickly had gathered up my tools and got to work. I was very attracted to a 3D immersive map that the user could explore. Due to the abstract brief, I wanted to be sure the client would be comfortable in my idea of 3D.

Prototype

Within a couple of days I had placed this rough and dirty prototype in the hands of the client and let them play. I had to communicate where this could materialize from, explaining that the ‘orbs’ and ‘satellites’ would have a glassy material, the navigation may be different, number of orbs in view, orbs would have labels- as some options to research.

View Prototype

Testing materials & performance

WebGL is a GPU hog and will make your laptop sound like it’s about to take off. So I had to get the best bang for your buck as far as performance went. I researched reflections on all the orbs, but realized it was going to be too taxing on the GPU.

View material test 

Review 1

Ready for review – whew… The first conference was going to launch with three categories, as the client could not provide all the brochures and assets for the ‘Targets’ category. Navigation in, labels on, tons of data feed in. There were some bugs and kinks that I still needed to work out.

View Review 

Release Candidate

This was the release candidate that was sent out the first conference in Las Vegas. It was received very well, the client was thrilled and proud to show off their kiosk. Their feedback was positive, and was looking forward to the next version with the added Targets.

View Release

THE APP

Amgen’s Interactive Oncology Pipeline

The Tech

Loading up the toolbox

I chose tools that I am very comfortable with as I was in a short deadline. My go to’s consist of react, three.js, webpack, json for modeling, etc.

Considerations and Reccommendations

Due to the demand on the GPU for WebGL, I made sure that the hardware would be more than enough to handle the application. Broth supplied me with options from a third party vendor, and I provided my recommendation.

Discovery & Pride

There was so much I was proud about, especially now looking back with what I was given and what I was able to create. One of my favorite pieces of the code was how I was able to interpolate over time the labels to look at the camera.

/**
 * Helper function to get quaternion from src
 * looking at target 
 */
const getLookAtQuaternion = (srcObj, targetObj) => {
    var q1 = new THREE.Quaternion();
    var m1 = new THREE.Matrix4();
    var target = new THREE.Vector3();
    var position = new THREE.Vector3();
    var quaternion = srcObj.quaternion.clone();
    const { x, y, z } = targetObj;
    target.set(x, y, z);
    var parent = srcObj.parent;
    srcObj.updateWorldMatrix(true, false);
    position.setFromMatrixPosition(srcObj.matrixWorld);
    m1.lookAt(target, position, srcObj.up);
    quaternion.setFromRotationMatrix(m1);
    if (parent) {
        m1.extractRotation(parent.matrixWorld);
        q1.setFromRotationMatrix(m1);
        quaternion.premultiply(q1.inverse());
    }
    return quaternion
}

/**
 * On ever render tick, have the label and cta move its
 * quaternion towards the camera
 */
update = slerpSpeedOverride => {
    const {
        type
    } = this.data;
    const q = getLookAtQuaternion(this.textContainer, ThreeView.camera.position)
    this.textContainer.quaternion.slerp(q, slerpSpeedOverride || this.slerpSpeed);
    if (this.plane) {
        this.plane.quaternion.slerp(q, 1);
    }   
}

Google Sheets

JSON

Nunjucks

HTML5

FEED ME!

Content Management

When choosing a CMS for the project, I consider who will be the publisher. Tools like Contentful or sites like WordPress often need a little hand holding for those that are not too tech-savy. Most of my clients are comfortable in Excel. It’s my rough and dirty way to get the client to add the data, for me to extrapolate it and then export to JSON.

Conclusion

Strong relationships were developed with both Broth and Amgen. Resulting in future work with both Amgen and Broth for the remainder of 2019.

RESULTS
Orbs

81

Number of Paths

Infinite

Successful Conferences

3

Avg. Session Duration

00:02:44

Total Sessions

314

Orbs Clicked

2,299