The Knot Charity Homepage Redesign

Research

This was a project for The Knot to  redesign the home page for their charity program. This was my first project on the product team for registry so I immediately began by mapping out  access point on theknot.com where this page can be accessed to figure out better methods of wayfinding and navigation this page, which out the time was only accessible by small hyperlinks on crowded landing pages promoting other products. I also created a site map of the entire Guest Services ecosystem (registry and wedding website pages because we share similar features) and labeled the inconsistencies between the two different environments. This is mostly due because it is two different teams and code bases therefore features and design became inconsistent at times. Once I wrapped my head around the how this page is accessed, I began combing through various data we had on users who would be the most likely to use this feature based on their persona type (this was done prior to my arrival). I used this data to begin hatching out design ideas which the design phase I put through a rigorous stretch of user testing.

Design

The design process was multi-iterative with many different versions of this page being made. After meeting with all of the stakeholders for this project (mostly marketing and senior product), I began sketching out concepts that capture what each team seemed to be envisioning. After sketching I took the best ideas and made a series of wireframes that I used to test content hierarchy. The main design decision I needed to validate was content hierarchy on the page. We all liked an idea of having photo-based CTA's that represent each category of charity but we also knew that the top of the page needed to be able to clearly explain how the program works. After several rounds of user testing, we determined that we needed the 'How it Works' section to be above the charity categories because it would often get lost in the reverse order, causing latency in the user's understanding of the program. After several rounds of UI iteration we finally came up with a design that worked for all. The hero image was based off of a photo session by marketing which product signed off on that would serve as the hero image theme for all major landing pages on theknot.com to instill uniformity thorughout the site's ecosystem.

This is the first round of wireframes. Below is my attempt at working off of these concepts after multiple rounds of UT on usertesting.com and feedback from the design team. In the second round I began playing with color and how it affects the emotional intention of the page..

After weeks of user testing, iterating on design and getting photos cleared (that was a quite a process) we finally landed on a design that everybody liked which incorporated powerful photography and branding with a validated content hierarchy.

Status

The page is live but it is too early for any analytics. To truly hit our goals, I believe we need to begin one of our next steps which is redesigning the user flow of selecting a charity. That was a large pain point that arose during UT but redesigning it was out of scope for this sprint. I hope that there will be time to redesign it in the near future.