The Knot Newlywed Fund

The Problem

This was a project for The Knot to create their cash fund feature on theknot.com for their registry product. We knew that in order to properly introduce this feature in an intuitive manner, we also had to build an entirely new navigational structure for logged in users because the old navigation structure lacked ideal usability and would only create more design and tech debt when scaling the registry product feature suite in the future. The problem we were trying to solve was to implement the cash funds product into the already existing registry in order to make The Knot's registry portal closer to an all inclusive registry like our major competitors (Zola, Newlywish, Honeyfund etc.) to entice users to use the The Knot as their one-stop-shop for managing their wedding registries and funds.

User Research

From a UX perspective, I understood that in order to build this feature correctly, we would have to also rethink the navigational structure in our registry pages and conduct a heavy amount of testing to validate what the most ideal navigational structure would be. We knew our navigation was an issue for months and this feature build was the tipping point because we needed both a secondary and tertiary navigation for this feature to work which are current nav did not offer space for. After initial inception meetings and a design sprint for the cash funds feature with engineering, product and marketing stakeholders, the project quickly turned into a two-fold effort, one being to define how the navigation of TK registry pages would look and function in order to scale without design debt for future feature builds and second to design the new cash funds project within this new navigation.

First, we overviewed all of the qualitative data regarding our users (both guest and couple) along with comparative analysis of different navigational structures for products with a similar feature make up. This meant identifying retail e-commerce sites that include a registry sub-section either in the secondary or tertiary navigation. Then we began user testing to identify the best navigational structure before designing and building the cash gifting XP. This included first time user flows, banking information management UI, and catalog pages for "experience gifting" options. I designed these screens with one other UX/UI designer and we performed every task as a pair (did not split up tasks). To begin, we looked at design inspiration and conducted a design sprint for navigation units and how the logged in registry page would look with new navigation. After two rounds, we settled with our favorite ideas and began design low fidelity wireframes for testing. 

We then began rapidly creating low fidelity wireframes and conducted multiple rounds of user testing on usertesting.com. We would create the same test but two different prototypes to "A/B test" which idea would be most usable. After multiple iterations, the left rail design concept for desktop and a dropdown for mobile web won out . The left rail also had the bonus of providing ample room for future features to be listed in our secondary navigation which we were pretty excited about.

Design

With a ton of help from our product managers (shout out to Heather and Arielle) we analyzed every possible user flow possible and my co-designer Ruth No and I begun designing for different sets of flows. These included cash fund initial create, banking information, cash fund management and banking information management. Plus we needed screen states in form of validation messaging when our code base was making API calls to Stripe (our e-payment platform client). We also scoured the digital world for comparative products, some who are direct competitors and others who have nothing to do with weddings (Google tools, Mint, Acorns).

Once we had a lay of the land, we spent a sprint of three weeks working on designs for both large screen and small screen versions of the feature for both the view for logged in couples and the guest view of a couples registry. Our goal was to dedicate the highest amount of visual space possible to the end users interacting with the cash fund UI and take up as little space as possible for the other areas of registry that wouldn't be important to the user at that given moment in time.  We made a clear decision to covet vertical space over horizontal due to penchant for users having over four rows to eight rows of product cards in their registry and at least two registries. This means that having key information as high up on the page as possible allowed users to not have to scroll through three stages of clutter before getting to what they what to see (sign up fields, product cards etc.) 

Below are some selected screens and flow docs from the final stages of UI. After multiple updates and rounds of revisions due further refine the UI to be consistent with the entire holistic visual identity of The Knot, we finally were able to push to development.

Status

At this point, The Knot Newlywed Fund has accounted for millions of dollars in transactions and by all accounts, has been a very successful feature for The Knot in 2017. There was even a write up about the feature in Forbes. I have been told that the feature itself has been a huge successful from the product team and the new iterations that have been made since I left The Knot look better and better!