The Knot Rebrand

Product Design

After the relaunch of theknot.com, the design team undertook the effort to rethink The Knot brand and how it applies to the digital properties. The steps we took to arrive at the working concept for the brand is documented below.

CLIENT  XO Group
ROLE  Full Time Designer
DATE  July–December 2015
COLLABORATORS  Catarina Tsang (Design Lead/Manager), Silvia Tueros-Cossio, Melissa Lonsdale, Ruth No, Kim Knapp, Sean Culley (Design team)
STATUS  Concept finished; partially launched

 

STARTING OUT

We started with the newly relaunched and redesigned The Knot website. The new site made use of a pattern library to ensure consistency across all areas of the site but the overall visual impression was somewhat flat due to not creating enough variety of patterns and design language to use.

before-tk-rebrandbefore-tk-rebrand

Newly relaunched theknot.com site.

GOALS

The goal of this exercise was to refresh the UI of the site and update the design language in order to increase engagement and sign-ups. We wanted to find the voice for The Knot that would engage our millenial user base and make them want to return for advice and to find vendors and services for their wedding.

DESIGN SUMMIT

The first step in this process was what we called a Design Summit. Over the summer the team was very small and did not have someone in the Design Lead position, so the three of us at the time kicked off the rebranding initiative. We coordinated with the Marketing team to find the descriptors that summarized the new brand voice of The Knot and worked to translate these to different attributes for the digital space (overall descriptive words/phrases, photo style, illustration style, and typography), pulling ideas together for mood boards for each. 

Next, we organized an offsite Design Summit day where the three of us designed experimental layouts for the site to fulfill these brand promises. 

After Catarina Tsang joined our team as the new Design Lead, she helped us critique these layouts, pull successful elements out, and used these to kick off the rest of the rebranding effort. 

CONCEPT DEVELOPMENT

The next task we worked on as a team was to create moodboards for different branding concepts and eventually separated these moodboards out into three distinct concepts, which we presented to major stakeholders for approval.

We settled on a concept we’d dubbed “Your Way Is The New Black”, which made use of tinted combinations of our color pallette, layering and opacity, and bold, clean typography.

Above: some typography and layout experimentation.

moodboard-2-tk-rebrandmoodboard-2-tk-rebrand

This is a sample of the moodboard pieces I created during this process which led us towards the look and feel the team and stakeholders liked best for The Knot. The design elements convey a graphic, modern approach that is not too delicate to match the brand’s promise of “helping you have the wedding that’s perfect for you”, not what society might be telling you a wedding should be.

TYPOGRAPHY

After lots of experimentation, the team settled on FF Tisa and Tisa Sans as our new typefaces. We liked the traditional quality with a nod to print design, yet slightly modern quality to the serif font. The Knot had previously had more focus on using sans-serifs in its branding, but we felt a serif font should play a much more prominent role to help the site feel more warm and inviting and slightly quirky. Keeping the sans version of Tisa as the counterpart rounded out the typography set allowing us to keep linked text, buttons and certain headlines in all caps which made it easier for our users to find their way around the site.

rebrand-type-samplerebrand-type-sample

Tisa and Tisa Sans, laid out to show some ways we’d like to use it on The Knot.

COLORS

Before starting this project, The Knot’s colors had by default been reduced to a pallette of muted greys and The Knot’s brand blue, a light blue. We kept the signature blue but expanded the pallette to include a vibrant color palette that could be tinted up or down to create pleasing combinations that wouldn’t be too loud, but not too delicate either.

tk-rebrand-colorstk-rebrand-colors

New color palette developed for The Knot

ILLUSTRATION

At this point, The Knot didn’t make much use of illustration, instead using large, beautiful wedding photos for most areas of imagery. We developed a signature illustration style to bring clarity to areas of the site by illustrating the wedding-planning process, not just showing images of weddings themselves. 

The illustration style we settled on made use of the signature layering, limited selections from our color palette (no more than three colors per piece) and a combination of flat, blocky shapes and organic shapes. 

tk-rebrand-illo-samplestk-rebrand-illo-samples

An early set of experimental illustrations I created to help define the style we would use.

The final version of an illustration I created for Wedding Registry by The Knot.

bvr-screenbvr-screen

Here is the illustration in action on the Registry page (page layout designed by Sean Culley)

ICONOGRAPHY

The Knot’s goals going forward in 2015 were to bring focus to its award-winning suite of wedding planning tools that already had a die-hard fanbase of Knotties. I created a set of consistent icons that could be used anywhere on the site in a consistent unit or separately to promote this tools.

tk-rebrand-iconstk-rebrand-icons

I designed this icon set and the style that we would use for icon design on The Knot. A few of these icons have since gone through another round of revisions but they continue to use the style rules shown here.

IMPLEMENTATION

Elements of the new rebranding have been rolled out slowly on the live site, since some of the changes require coordination by many teams across the site. The new typography styles went live in February 2016 along with many of the new colors, illustrations, and layout design, but there is still much more to implement.

While at The Knot, I created several “North Star” layouts, meant to be a guiding light (not a literal design to build) that would help maintain the vision of what the site could be during the long implementation process. Mockups like these also helped communicate the idea of the new branding style to execs, marketing, and other company employees outside of Product.

NS-storefront-03NS-storefront-03

One concept for a new homepage for guests—the page would rotate to showcase different real weddings and the styles the couple used to create their vision. The user could click on “rustic”, “vintage” etc to see a showcase of other real weddings with that style.

NS-vhp-03NS-vhp-03

Here is my concept for the guest homepage (non-logged in users), which highlights one featured wedding at the top of the page at a time. It uses illustrations to call out the type of vendors and connections a Knot user can access on the site.