Summer 2018

Crown Equipment

crown.com
GoSunUniversity of Cincinnati

Challenge

Restructure Crown Design’s intranet so users can spend less time searching and more time designing.

Role

I designed and developed a new WordPress theme with custom widgets to bring the style guide to life.

Overview

Crown combines smart software and tough hardware to revolutionize how forklifts are made. In 2018, I helped Crown’s Design team show off their work with a site overhaul and case study for their new visual design language, Colin.

Staff Screen

Crown wanted the site to help recruit top talent. Each team member’s photo is featured on the on the staff screen, giving potential recruits an idea of who they’ll work with.

However, there was a problem. The photo uploading process was tedious and unsustainable.

Each photo is colored orange, teal, or beige. They are laid out so the colors don’t touch.

Originally, each photo was colored in Photoshop. This means an employee was stuck with their color until a new photo was uploaded. When an employee left, colors touched and the pattern failed.

Before

To fix this issue, we had to:

  1. Remove old photo
  2. Upload new photo to Photoshop
  3. Colorize new photo in Photoshop
  4. Upload new photo to site

This process was repeated whenever the staff changed. After doing this a few times, I thought to myself:

What if I could use CSS to color the photos automatically?

And so I did.

After

I achieved this entirely in CSS with pseudo elements and SVG filters. I also added a overlay to each image, creating a duotone effect (similar to Spotify).

Spotify duotone effect

Here’s my recipe for each image:

  1. Saturation (-100%)
  2. Contrast (+20%)
  3. Colorize background (multiply)
  4. Add overlay (navy, lighten)
Michael Scott
Jim Halpert

Ta-da! Want to know the best part? This method is 100% non-destructive, meaning each photo will always be the original. Anyone can change their photo at anytime. Bye-bye Photoshop!

Bonus tip: When a user hovers, remove the filter to reveal the original image. Try it out!

Interactive staff screen

See the Pen Direction Aware Hover 10.4 by latimer2k (@latimer2k) on CodePen.

That's a wrap!

You can check out more of my work on Instagram and Dribbble.

← Go back