Information Architecture & Navigation Redesign

• GA data was overlayed on various viewport experiences to understand how the current site structure is being used, which revealed the many entry points into the core product funnel and the lack of traffic to mobile child links.
• The entirety of the site was crawled and imported into an airtable where I created parameters and algorithms to understand the value of pages based on pageviews, page value, SEO value, and bounce rate.
• This revealed over 5k active pages on .com (but only about 1k pages that provide value to the organization) and a very flat hierarchy.

• I worked with stakeholders to identify core business and user goals on the site.
• From there, I translated these into the top fifteen jobs-to-be-done that we could test against going forward. While personas look at roles and attributes, jobs-to-be-done look at situations and motivations. Personas explain who people are and what people do, but they never fully explain why people do something.
• By identifying the key jobs-to-be-done on our site, I was able to prioritize features and design elements that directly address those user needs through the structure of the information architecture and navigation.

First, I set up a tree test to understand the inherited state of navigability and findability of the current site.

I performed an open card sort with 25 prospective users in order to understand how our target audience's domain knowledge is structured and create an IA model that matches users' expectations.

• I partnered with SEO to develop an approach to our new site structure, where we landed upon a series of parent-child pages that create a true hierarchical tree structure that will benefit SEO, funnel strategies, and help users understand where they are on the site in relation to other pages.
• Additionally, product category pages (or, parent pages) will be implemented in order to allow users to go as broad or narrow as they'd like.

• I ran the tree test a second time with the new structure in order to compare it to the benchmark.
• I also evaluated first-clicks and directness, or “happy paths” to understand whether or not users are finding the “correct answer” but still having to navigate to multiple areas before they are able to do so.

• A wide-ranging competitive analysis was performed where I reviewed competitive and analogous websites to benchmark ways to solve navigation requirements discovered throughout the design-thinking process​.
• In this exercise, I realized there was a lot of opportunity to simplify and follow Jakob's law: “Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.”​

My early mockups had to be brand-agnostic as the rebrand was kicking into high gear behind the scenes. Additionally, I wanted to validate the concepts and approach before applying high-fidelity time and resources to this project.

• The usability test aimed to compare the performance of two prototypes on both mobile and desktop devices.
• The primary focus was to assess users’ ability to complete tasks by locating links within each navigation interface.​ We tested with 150 users across the 2 variants.​
• Overall, both versions tested extremely well in the usability test, with version A having an avg. task completion rate of 93%.​
• For mobile, Prototype A demonstrated a notable advantage in performance across the majority of tasks.
• On Desktop, the performance was statistically very close between Prototypes A and B.

After making the changes discovered in the lofi testing phase, I moved to higher-fidelity mockups and testing. I put the users through the same fifteen JTBD-based tasks as the previous tests. The results were outstanding - on desktop, users had an avg. task completion rate of 86%, while mobile performed even better at about 93% successful task completion.

Since the recent usability tests confirmed that I had a viable concept to move forward with, I began to create tokenized components in figma. I worked closely with our developers to ensure the standardization of tokens as we were still in the early stages of establishing the new design system.

• The complexity and sheer number of options for 'product offerings' such as ways to give or ways to get involved meant that I needed to implement product category pages to act as homepages for a particular product.
• This allowed a user to either go directly to a child page via the main navigation – or, they could browse the product category pages that provide more context and a more visual breakdown of the offerings within that particular category.

• I chose to skip the product category page for our sponsorship 'product' as it felt like an unnecessary intermediary step for users to have to walk through.
• Instead, I directed users directly to the listing page, while still offering a hybrid bento grid further down the page where users could explore certain areas more deeply if they chose to (progressive disclosure).

• One key area of improvement was ensuring that the new navigation was accessible.
• We set a minimum target of level AA, but pursued level AAA conformance wherever possible.
• This included but was not limited to color contrast ratios, font sizes, focus states and order, and aria labels.

• In Progress:
  • Build out and test the actual coded components with users to ensure they perform as expected; document in Figma and storybook.
  • Perform follow-up usability tests with coded components and staged sites to ensure successful findability and discoverability.
• Future State:
  • Deploy the code to the live site while continuing to monitor through QuantumMetric, Google Analytics & close collaboration with Compassion's customer support team that know to elevate and quantify any issues that arise.
  • Then, iterate quickly to address issues or opportunities that are identified. The work is never "done!"