Restructure Crown Design’s intranet so users can spend less time searching and more time designing.
I designed and developed a new WordPress theme with custom widgets to bring the style guide to life.
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.
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.
To fix this issue, we had to:
- Remove old photo
- Upload new photo to Photoshop
- Colorize new photo in Photoshop
- 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.
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).
Here’s my recipe for each image:
- Saturation (-100%)
- Contrast (+20%)
- Colorize background (multiply)
- Add overlay (navy, lighten)
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!