How to lead the industry in sustainable design and material innovation

Hands on with the actual materials Dell uses in manufacturing.

Art Direction  /  UX  /  CSS Animation

Dell is serious about its sustainability goals and this page is the platform to demonstrate that. This project was driven by executive interest and each review was carefully scrutinized by teams across several business units. We had two jobs on our hands. One, build an engaging experience that tells the story of the progress Dell has made in sustainable materials and processes. The second challenge: design and develop a new landing page template with the .com development team. 

In my role as Art Director, I pitched the concept leveraging the actual material used in our manufacturing processes and organized a photoshoot to capture them in a consistent environment. In addition, I sourced or created supporting images that tied to the theme.

As a UX designer, I partnered with the dev team to help transition this landing page template away from the Adobe Experience Manager (AEM) platform many of our pages were built on to, to our new custom environment. We considered all the existing needs of this page template while exploring how to add new capabilities and modern features. I wireframed, mocked up, and often coded animations for interactive sections or adding motion to static components. 99% were shot down by dev, siting platform limitations, but we were excited to push through a few new features that made it through every level of internal testing. This page uses a ‘flip-card’ animation to reveal information about each material presented.

CSS Animation Example

See the Pen CSS flip 4 Precision by Chad (@chaad) on CodePen.

Photoshoot with the featured materials on loan from manufacturing.

Previous: Saving materials from Boredom

Next: Getting social at the golf Tourny