When we decided to add saving functionality to the vendor cards in The Knot’s local marketplace we realized they hadn’t been optimized to scale with a responsive grid.
I had the opportunity to unify the UI design of the cards across responsive web and our mobile app. The goal was to make the cards into a bulletproof component that could be employed in a variety of contexts at different sizes and always look great.
My team used Zeplin to hand off designs to our front-end engineers. I carefully annotated the comps I handed off to them and gave them thorough documentation about how the cards should scale responsively. This ended up being one of the smoothest UI handoffs my team has done to date. By the time I was pairing with the engineers and doing visual QA, we only had to adjust a couple of minute details.
In the end, the result wasn’t just another flexible and great looking component submitted to our pattern library, but we also had a big communication/process win.
