MY ROLE UX Design, Research, UI Design, User Testing
The team also included: a developer, an art director, a copywriter, and input from the client.
RESEARCH Over the course of three months, I conducted a usability study of the website’s main nav. A tree test style study presented the participants with several scenarios and asked them to select the page of the site where they were likely to find that information. The study also collected some basic demographics information.
Participants tended to sort by species first: When presented with a scenario, the first “move” tended to be to go down either the “dogs” or “cats” menu, regardless of what they were looking for. Participants did not understand how “brands” factored in to the product experience. There was a lack of understanding around a key social component: The site had a page called the “Virtual Pet Park” where users were encouraged to upload pictures of their pets. Virtually no participants knew what this section was. There was a strong desire for educational content and brand values: Some demographics questions revealed that the largest single group of participants were in their 20’s and 30’s, wanted thought leadership, and wanted to see the brand’s values and stances on topics they cared about UI DESIGN The original menu that was being replaced was a very simple hamburger menu across all breakpoints, with no real sub-nav infrastructure.
The old nav in all of its glory.
I didn’t want to complicate the menu needlessly, but knowing that the users of the site tended to search for all of their content through the lens of the species of their pet got me thinking about intentional redundancies.
I wanted to put all relevant “next steps” under each of the two species tabs. This would make the nav more robust than it previously was, but it would do so by meeting the user where they were at instead of making them hunt.
To help the user have a better understanding of the different brands, I wanted to visually group them together and include their logos. I also opted to add a little line of copy to give the Virtual Pet Park some more context.
A main focus of the new layout was giving context to elements.
This context was expanded on under the “Virtual Pack” page. In addition to a more detailed explainer of the VPP, this drawer would also include links to any active contests.
The "Our Virtual Pack" drawer gives extra context around the "Virtual Pet Park" as well as spotlighting any current contests.
To lean into the data that our audience cared about the brand’s values, I opted to rename the “about” tab “what we stand for.” This change would emphasize that this brand proudly prioritizes its history, ingredients, and values.
What We Stand For" f.k.a. "About Us.
For the blog articles, I brought each of the main blog topics into the nav to both show the scope of what TOW has to offer and to help the user find their content easier. Previously, the nav only had a link to the main blog page and the user would have to filter on the page itself.
The "Articles" tab now broke out each of the topics into their own link to make searching easier and to show the amount of different info covered.
Originally, I wanted to move the contact link up next to the search bar since it was a direct link and not a subnav like the others. I wanted to use an icon so it fit with the search icon on the top nav, however I was overruled by the account team who worried that users wouldn’t see it.
Ultimately, “contact” moved back down to the main level. All of the tabs with subnavs have a caret icon delineating that they can be clicked (not hovered on thank you very much) to reveal more options.
SPECIFIC RESPONSIVE LAYOUT CONSIDERATIONS Since this menu was so dense, special attention had to be paid to how it scaled across the different device sizes.
The philosophy here was to preserve the “mega menu” vibe for as long as possible but eventually collapse all nav elements into well considered accordions (based on their columns in the desktop layout).
An early sketch of the mobile layout (with different drawers) that leaned heavily into nested accordions.
The final tablet and mobile layout. The accordions were kept for their functionality, but I tried to keep some of the soul of the desktop layout in the form of that wacky little sidebar situation.
There were some challenges getting the menu to feel “smooth” and “slick,” because of the tech stack the site was built on. For example, if you re-size your browser window, the nav sort of hiccups when you cross breakpoints and you need to refresh.
Definitely not an ideal situation, but something we’ll hopefully be able to tackle down the road when we get clearance to do more significant dev work on the site. Ultimately, the final product is a solid build. It presents all of the information in a much clearer way, still behaves responsively, and gets the job done.
I’d love to spend more time on nuanced animations and state changes (and to clean up that hiccup situation) but in the meantime, this is most definitely an improvement on where we started.
OUTCOMES Since launching the new nav in December of 2022, we’ve seen overall engagement increase, specifically traffic to the brand pages.
One of our goals was to help differentiate and contextualize the sub-brands, and since the new nav, clicks to Taste of the Wild Prey have doubled, while clicks to the Taste of the Wild brand have increased 8.8x! We also set out to increase engagement with the Virtual Pet Park. Previously, there was just one link in the nav, but the new hav has multiple entry points. Total clicks across all of our VPP entry points in the nav, increased 1.4x. Clicks on the “See all products” links increased about 1.4x for both dog and cat. We plan on continuing to monitor the new nav’s metrics over time, but these early results look very promising.
Note: These measurements were taken in Feb. 2023 and compare traffic from the month before launching the new nav to the month after launching.
