The Knot Relaunch: Case Study

Complete responsive redesign of the website for #1 wedding brand, The Knot

Roles: Creative Direction / Design / UI Pattern Library

www.theknot.com / patterns.xogrp.com

How do you take a website with 18-year-old legacy technology and millions of existing users... completely replatform, redesign, and relaunch it... all while protecting 100+MM in revenue? Very carefully. :-) Here's how we did it.

 

The Team

My role in the redesign was to lead the team of five digital product designers who specialize in UI/UX design and branding. On a daily basis, we worked directly with product leads, UX, tech, marketing and advertising teams across states, countries, and time zones.

 

The Design Process: Highlights

The Knot website was dated, cluttered, and in desperate need of a visual overhaul. My team started with an in-depth review of current design trends and best practices. We held an offsite session where designers could think outside the box, which resulted in a set of static prototypes that became our early "north star." Once we started redesigning each web application, we followed Lean UX methodologies and held cross-functional design studio sketch sessions in order to generate ideas.  

Early "north star" layouts and sketches from a design studio session

Early "north star" layouts and sketches from a design studio session

Since the new website would be responsive, we began with a mobile-first approach but quickly pivoted to design larger viewports at the same time. Simultaneously scaling the layouts was critical in order to identify any design or product issues as soon as possible, get feedback from stakeholders, and ensure we were on a path to deliver on signed ad contracts.

Responsive layouts for Fashion Results Page and Article, large and small viewports

Responsive layouts for Fashion Results Page and Article, large and small viewports

As we designed the layouts, we discovered that sometimes different applications required similar functionality (i.e., the need to filter content results) which resulted in each product team coming up with their own solutions in a silo. We created consistency by working with tech to develop a UI Pattern Library and companion GUI kit for Sketch app. The Library contains visual examples of typography, CTAs, content modules, and more, as well as code snippets and documentation for usage.  Visit the live pattern library

Responsive layouts for Fashion Results Page and Article, large and small viewports

Responsive layouts for Fashion Results Page and Article, large and small viewports

The Result

The Knot site relaunched in March 2015 to early success. We closely monitored user feedback, then responded quickly with updates and feature set improvements. The website now provides a dramatically less cluttered and better user experience!  Visit The Knot