by Humankind Navigation

UX/UI Designer & Project Manager at by Humankind — 2019

ux thinking
visual design
data + research
end-to-end

by Humankind launched their brand & website centered around their 3x hero products. As the brand & assortment grew, the simple navigation became a tight squeeze on desktop and a lengthy list on mobile.

I led the initiative to research, design, & develop a new navigation that would better work for today’s assortment, and easily scale in the months / years ahead.

“Scalability” was a key theme for the nav

Starting the project with a competitor analysis of DTC beauty and skincare brands, it was quickly clear that grouping our products into broader categories would simplify the IA and allow for growth. Internally, our team couldn’t agree on how these categories should be grouped or labeled — we needed an outside opinion to direct this critical UX decision.

I set up an open card sorting exercise to gather insights from ~40 survey participants, asking them to organize a list of products (current & future) into groups, and to name those groups. This data gave us clear direction on nomenclature and organization.

Card sorting helped inform our final IA

Sketching on paper allowed for quick exploration of different layouts before heading into Figma

Outlining requirements, links & prioritizing non-shopping pages

An additional request from our stakeholder (CMO) was to bring product imagery into the navigation. His hypothesis was that a visual of lesser known product formats (like Mouthwash, which came as a dissolvable tablet) would help set customer expectations, and differentiate between products with multiple formats (like our Shampoo Bar vs. liquid Shampoo).

I presented a few wireframes to our CMO to chat through layout options before delving deeper into hi-fi UI & prototypes. We landed on a navigation that overtook the full viewport, creating space for the requested imagery on both desktop & mobile.

(Super) lo-fi wireframes before delving into UI

We launched our new navigation without any hiccups in our KPI’s (site speed, % of customers who reach the PDP, and conversion), and with confidence that we were moving forward with a merchandising strategy based on customer insights.

This was one of my first end-to-end design initiatives (2019) and I love looking back at the holistic approach & collaboration, yet faced with this navigation today — I have a few critiques! I would adjust the IA to include “Shop All” links at each category level and perhaps use hover states to bring in imagery on desktop so you don’t have to scroll. In both ecom & design, we are forever evolving, iterating, learning.

Original site design by XXIX, all UX/UI work displayed here by me