Designing 'The Knot'

Designing 'The Knot'

If you've gotten engaged in the last ten years, then you've probably heard of The Knot -- one of the leading wedding brands online, also in print and video. As an online destination, TheKnot.com is a place where engaged couples and their friends find ideas, up-to-date wedding advice and inspiration.

I recently got in touch with Lori Richmond, Design Director of Online Editorial, and Kristen Dudish, Online Designer, for some insight into designing and working for The Knot. We also discussed some of the recent changes made to the site when they redesigned a few months ago.

In recent years, The Knot has expanded online through new launches like TheNest.com (for Newlyweds), TheBump.com (for first-time parents), PromSpot.com and PartySpot.com (party planning sites), LilaGuide.com (local baby resources) and through the acquisition of WeddingChannel.com (former competitor and now sister wedding site focusing on the registry component).

Paul Schrynemakers: What's it like working at this company?

Lori Richmond: There is a lot of opportunity to work on a variety of projects for a variety of brands, all with very different looks. The Knot, our flagship brand, is stylish, modern, and very well-loved in the wedding world -- really, I have had brides literally swoon after hearing I worked here! It's a great feeling to be associated with a strong brand that people react so emotionally and positively to.

Kristen Dudish: You don't mention The Knot without getting a reaction. A very positive, excited (usually a little too excited) reaction. I love that in my year and a half with the company I've gotten to work on various projects spanning all of The Knot brands and am continuing to work on new ventures the company is pursuing.

PS: When you've got passionate fans it must mean you're doing something right! Let's focus on the parent site, TheKnot.com. Tell us about the brand's characteristics and how the site's look and feel communicates those qualities.

LR: Our brand is modern, hip and stylish. We're the tell-it-like-it-is experts and a source of inspiration, so we use a ton of real wedding images all over the site. Our signature pattern, developed by Tsang Seymour Design, is a design element that we use as the background on the right and left of the content area on all pages of the site. It's also reworked into header graphics, accents, and borders. The pattern adds a nice texture and a little bit of 'specialness.' It reminds me of a modern interpretation of lace, or pretty edging you might see on a dress or a cake. The shape is a nice complement to our logo.

KD: The design needs to carry out the modern, stylish essence of the brand with ease and a little bit of fun. We have a lot of content that needs to be easily accessible to the user. Our new color palette is used to differentiate between the content areas (planning is green, fashion is purple, etc.). This way, the user can feel as though they've "arrived" in that specific area, and can easily focus on one wedding planning idea at a time.


theKnot_pattern.gif

PS: Next to seeking expert wedding advice, what else are brides-to-be doing online?

LR: TheKnot.com offers a ton of wedding planning tools like a budgeter, checklist, guest list manager and wedding web page to help the busy bride plan her wedding. Brides rely on us 24 hours a day to help them keep things in order.

Our community of Knotties is a huge part of the site. It's amazing how passionate they are and the sense of camaraderie among them. Some of these brides are on our message boards what seems like all day! There are Knottie get-togethers all around the country that women on our message boards plan themselves, with no help from us. It's like our community has taken on a life of its own. I remember seeing some footage from a focus group, and one of these girls was on a public computer in an airport somewhere, on the way to her honeymoon, talking to her Knottie friends about how the wedding turned out. Her poor husband!

KD: Our gigantic collection of real wedding photos is extremely popular and a huge traffic driver. Because of this, we added the new Photo Galleries channel page and gave it prominence at the very top of the content area navigation. It provides brides with a great starting point in their search for wedding inspiration. We also have a huge database of wedding gowns, where brides can search by designer, dress type, and even body type.

PS: OK we're focusing on TheKnot.com, but what's with those sister sites you've launched in the last few years?


LR: We don't leave anyone at the altar. After their wedding date has passed, newlyweds join us on TheNest.com, our site for everything about the first years of marriage. Our community of Nesties is hugely active and offers a safe place to commiserate with other wives and complain about your horrible MIL (message board speak for 'mother-in-law'). Also, since so many of our couples say they plan to have a baby within the first 3 years of marriage, we launched TheBump.com, our site for pregnancy and TTC (more message board slang for 'trying to conceive').

KD: We joke that eventually we'll retain our users all the way to The Morgue.

PS: You went through a redesign very recently. Why? Tell us about some of the major changes made.


LR: Our redesign was part of a larger (actually, huger) project, implementing a new content management system (CMS), and we made some pretty significant changes all around both in design and usability. We needed to create a fresh site that was true to our brand, flexible for our editors and most importantly, exciting and appealing to brides.

KD: TheKnot.com redesign was a huge endeavor for the whole company. The main driving force was moving the site to a new CMS which allows the editors to easily create and update content on a daily basis without relying on developers. This way, content can be refreshed easily creating more of an "of-the-moment" feel for the brides.

LR: Branding-wise, we updated our color palette to more organic shades of blue and green (our signature colors) and accents in pink, purple, and orange -- our former palette was more saturated and bright. Adjusting the colors added a level of sophistication without losing the familiarity and 'cute' factor of the old palette. We also played a lot with patterns. A looping pattern that echoes the script of our logo was created, so we experimented with and made variations of the pattern and translated it into things like headers and accents. The challenge was working with the print team to choose the final pattern that would translate as beautifully online as it would in print. We also replaced our old font, Nobel, with Kievet, a really elegant and modern sans-serif (my favorite character: the lowercase 'g'). We updated our system fonts as well, using only Arial for body text and Georgia for headers.


theKnot_color_font_comparison.gif

As for usability, the most significant change was the addition of a left navigation. The old site had only a top nav, and we ran into a lot of problems like getting stuck deep into our subchannels without any way to get back, and lacking any indicators of where you were. There was no breadcrumb either! TheKnot.com has a huge range of content and we needed to bring it to the surface to show brides just how many topics we cover, AND help them get the info they need - fast. Adding a left nav was a logical choice to do so. From the nav in any content page in our 'Wedding Ideas' area, you can open and close each channel to browse the entire breadth of content topics, and quickly get to what you need. We also added a much-needed breadcrumb to subchannels and subsequent pages like articles, which greatly improves navigation and gives a sense of where you are on the site. Both of these additions are also great for SEO - bonus!

KD: We widened the pages from 780px to 960px and incorporated a 3-column structure that is carried out across all channels, subchannels and articles. Usability-wise, the biggest change was definitely the improvement to the site's navigation. The previous navigation was inconsistent from page to page and definitely didn't make for the best user experience. We incorporated the expandable left navigation to all pages to make moving between content areas much easier while also allowing the brides to quickly scan the content areas to find the precise thing they're searching for.

PS: I know it's just the tip of the iceberg, but let's get a visual in here with a breakdown of the new homepage to highlight some of the design and usability improvements.


theKnot_hp_tour3.jpg
1 - The main homepage promo used to be a 3-slide flash that updated once a week. We changed it to a static promo that changes 7 days a week. Brides come back frequently as they engage in our planning tools (no pun intended) so this keeps the content looking fresh.

2 - New tabbed section promotes 15 photo galleries and 5 videos, some of our most popular content.

3 - The right column and row across the bottom support many of our business units with promotional space for e-commerce, registry, local and national sales.

4 - Here we promote featured content and teaser subject lines from our message boards

5 - The homepage preceded the rest of the redesign so we couldn't quite use this as navigation. What we wound up using it for was a list of frequently visited areas on the site to help bring more content to the surface on the homepage and first-time visitors get what they need quickly. It's great for SEO as well.

6 - We expanded our footer to a more flexible layout that allowed room for links to our other sites. We are actually going to swap this footer, though, for a newer one that highlights our big three sites. A redesign is never really 'done...'

PS: You've already said this was a large project, let's hear a little more about the what kind of effort it was.

LR: This project was a huge collaboration between design, editorial, project management, development, the executive team... I don't think there really was any area of the business this project did NOT touch. This was a huge project with huge team. We did lots of revisions. We made lots of tweaks. We Design QA-ed it to within an inch of its life. ...And the results are amazing! Everyone is really proud of the site.

KD: The entire process was extremely collaborative. We started with what we had on the site at the time and took it from there. We enhanced the most popular features on the site and edited what wasn't working, while still maintaining everything the Knotties have come to love about the site. It was 8+ months of design, revisions, development, and QA and everyone on the team put 110% into the project.

PS: Earlier you mentioned a new content management system (CMS) as one of the key drivers of the redesign. How has this new CMS changed the way you operate?

KD: We've really learned to value the CMS and the flexibility it allows. If we see that brides are really into monogrammed cakes right now, we can easily make that the featured content on the homepage. Editors can easily update content and swap out promotions, even add entire new content areas at any time. This project was a huge learning process and will continue to evolve as new ideas and business needs arise.

LR: We've designed our layouts to be flexible enough to grow and change as quickly as the needs of the company. A successful design supports the business and helps it move forward. Editorial keeps a close watch on the traffic numbers. Our analytics team frequently updates the company with emails announcing traffic numbers and conversion rates. I'm curious to see what happens over the holidays - Thanksgiving through Valentine's Day is usually our busiest time because it's prime engagement season.

PS: OK, what's next?

KD: A vacation?

dottedline.gif


If you have a content Web site redesign, feature, applet or new product that is noteworthy or has recently launched, submit it to schrynemakers@gmail.com. Paul Schrynemakers is a longtime SPD member and has been a designer and creative director of interactive media design at Voyager, TimeInc New Media, iVillage, and currently Rodale Interactive.


blog comments powered by Disqus