The Knot MVP Relaunch: Fashion, Jewelry and Beauty

Product Design

In March 2015, TheKnot.com relaunched with a completely new visual system, meticulously user-tested adaptive design and new back-end architecture. Launching the MVP was a massive year long effort. I was a part of a team of five designers responsible for the design and I was the lead designer on the Fashion section redesign.

CLIENT  XO Group
ROLE  Full Time Designer
DATE  March 2014–March 2015
COLLABORATORS  Lori Richmond (Design Lead/Manager), Alison Bernstein (Fashion Product Lead)
STATUS  Launched

 

STARTING OUT

This is what we started with before the redesign effort. Some of our main goals were clean up and streamline the homepage, and not allow for those left rail navigations to become overstuffed with links as shown below.

legacy-tk-1legacy-tk-1

This is where we started before the redesign. The Fashion section actually wasn’t bad overall visually, but there were a few glaring areas to improve: overstuffed right rails, filters that actually work, and larger images.

GOALS

Goals for the site relaunch included a complete refresh of The Knot's web properties to bring them up to current tech and design standards, improving the UX of the site, and preserving $108 million in ad revenue that rested on the success of a steady userbase and The Knot's place as the leading online source for wedding-related knowledge, vendors, and products. For the Fashion area specifically, advertisers relationships were very carefully considered, since they advertisers paid for every dress, accessory, or jewelry photo that appeared on the site. 

The Knot Redesign initial sketchesThe Knot Redesign initial sketches

We implemented a pattern library-based workflow for design and development to create a central source for consistency in the visual system and in the code. I worked on a small team of digital designers to create and update each pattern and the overall design system, applied the patterns and expand the system for various applications within the site, and validated all design decisions through meetings with stakeholders and user testing.

A small sample of the testing prototypes I created during the design process for the wedding dress detail page. We approached the design from a mobile-first perspective, first launching the beta site on mobile devices only before translating to larger screen sizes.

LEAN UX PROCESS

Everything I designed was put through a rigorous user testing in front of at least 5 TheKnot.com users. I worked with our in-house usability expert to create hypotheses about all designs I worked on for her to test in live sessions. I created clickable prototypes of ever stage of the design that were used to interview users and determine if our assumptions about the design were validated.

Following the Lean UX pattern, we aimed to involve tech and product teammates in all stages of design, and iterated quickly on anything we needed to optimize. For the Fashion pages I designed, I took into account the strict needs of the Fashion advertisers and the main KPIs the team had to hit to create pages that met these goals. Users were more easily able to favorite dresses/rings/accessories, find out their details, and filter to find other items in the styles that they liked; and ad revenue was preserved even though we cut down on the number of banner ads that needed to be displayed.

MVP LAUNCH

The MVP version of the site was launched publicly in March 2015. The redesign was a major improvement over the old version of the site and was a major hit with our users because of the improved UX and clearer goals for the users to accomplish what they’re trying to do: plan the wedding that is perfect for them. The back end of the site was also completely rebuilt so it would be easier to maintain and update.

However, we were aware that the launch included a considerable amount of design debt, which we began to address after March ‘15. The highly systematized, card-based design didn’t have the memorable moments or familiar brand voice that would be memorable to our users. For a more detailed account of the continuation of the design process, see the next project, The Knot Rebrand.

Wedding Dress Results Page

Wedding Dress Detail Page