Problems with the shopping navigation

Massdrop wanted to grow its revenue and user base (beyond core enthusiasts), but new users were unfamiliar how to shop on the site and the current menu UI wasn't scalable.

The product manager and I dug deeper and identified key pain points based on user feedback collected before kickoff, comprehension testing, and in relation to our product strategy.

Design principles in action

By analyzing the current experience, I assessed that many of our pain points stemmed from navigation ignoring key design principles and heuristics, more than intrinsic user behaviors and needs. I used these to guide my process while working through solutions.

Making navigation familiar & fast

Next, I researched competitive e-commerce sites and social platforms to learn how people expected to navigate products and communities. As familiar is fast and more visibility for communities would encourage engagement, the product manager and I opted to test a sticky, lefthand menu component.

I created explorations using Massdrop's text styles and components to keep dev efforts minimal, while keeping the brand tone bright and comfortable to use.

Design decisions & implemented nav

We decided to test my nav concept featuring community photos as avatars as it was intuitive, made communities feel fun to engage with, and easily scannable and scalable.

Here's a breakdown of my design choices and mockups of the implemented designs:

Guiding users in plain speak

4 of 5 new users didn't know that Drops = products, and our actions' hierarchy didn't clearly communicate how people should use the site.

To make it crystal clear, we iterated ways to boil down our primary nav actions in simple, guiding terms, define a clearer hierarchy, and reviewed with stakeholders in the company until everyone was aligned.

Test and learn

Over 4 months, we split tested our new navigation against the original in a progressive rollout.

Results + takeaways:

Visibility improved exploration, but...
People weren't finding interesting products as often. Our team concurrently tested a new way to display products which likely impacted results. Reminder: don't test too many variables!
‍
Be prudent about removing beloved features
Users were upset we removed an option to shop by "My Communities," which allowed them to shop their favorite communities in one view. I had concerns about removing it at the time, and in hindsight, should have leaned into those.
‍
Know your funnel vs. north star metrics
I designed with our strategic goal in mind (exploration), but considering how key decisions like removing My Communities tied back to our north star (buyer CVR) might've improved our outcome.

Next steps

Not perfect, but lessons learned! We hypothesized Test 2 would help users better discover products (and improve product click-throughs), and decided to bring back My Communities to mitigate the experience for existing users.

New users don't understand "communities"

While the first effort aimed to make it more clear how to shop by communities and increase exploration, we knew that our "community shopping" model was non-standard and confusing to people unfamiliar with Massdrop, online communities, and forum culture.

We focused on 3 new user pain points the product manager had identified from user feedback before our project kickoff.

The case for categories

I started by creating a task flow to visualize the user journey and how our proposed solution would improve their experience.
‍
Introducing categories would provide an alternative to community-based shopping, a familiar and accessible e-commerce experience, and offer greater product visibility through broader groupings.

Digging deeper, "Why?"

While categories seemed like an effective solution, I was relatively new to the squad and wanted to understand why products weren't cross-listed. So, I met with members of Massdrop's Goods/Product teams to learn why and concept test our idea.

I learned that we don't cross-list, so as not to dilute individual community experiences, took away a deeper understanding of our enthusiast users’ goals and values, and in the process, found out I'm a "normie."

Setting up for success

These conversations and activities provided richer context about Massdrop's growing pains—creating experiences for new users, while respecting its core enthusiasts users' values. Before jumping into my tools, I identified a few goals to guide what kind of experience my designs should create to be successful.

Adding categories to our navigation: V1

My challenge was to design a way people could shop by communities and categories from our new lefthand navigation. I explored interaction patterns for desktop and mobile through quick sketches and high fidelity mockups to visualize them.

‍(Desktop designs only for brevity.)

Toggle visual styles

Building on this direction, I developed a few variations of the toggle UI. We settled on the last option because it had a clearer affordance, created visual interest against our mostly angular site, and felt fun to use.

Approved concept to test

We still had some things to figure out, but the product manager and I got buy-in to develop and test the concept below. Here's an overview of my design decisions and an animation of the prototype:

Refining the interaction: V2

"Should clicking the toggle change the menu + page content, or just the menu?" - Product team member

While I believed clicking the toggle should take users to separate pages for clarity and speed, I knew this was still an assumption. So, I prototyped an alternate flow and split tested the two options with 6 officemates as proxies for various types of users.

Getting to our final design: V3

Based on this feedback, I iterated a version blending the two concepts.

I kept 2 pages but made it feel like one page by using the same banner for "All Communities" and All Categories" pages, created unique links for both pages, and updated the toggle to only control the menu in order to reduce the amount of elements changing.

...but one last idea! (V4)

With development about to start, a few team members pitched using an accordion menu to switch between communities and categories as it's a more common e-commerce pattern. Although my designs had already gotten sign-off after multiple reviews and received positive feedback during testing, we realized our product/design team had been moving so fast that our communication took a hit.

We wanted everyone to feel heard and their opinions valued. So, I quickly worked with them to prototype an accordion-style version, which the product manager shared with the CEO as a final, final alternative.

Mobile designs

I developed multiple iterations for the mobile experience concurrent with desktop, including troubleshooting and refining flows with engineers during development to get it right. Here are the final flows:

Test and learn

In February 2019, we rolled out our product categories test, along with a mitigation to bring back "My Communities," and is still in progress.

Takeaways

This effort was a balancing act to create a shopping experience for really different types of users and make a confusing concept–shopping by communities–easier to use. My takeaways from this effort were...

Teamwork makes the dream work
‍Talking with other teams and users to unpack our problems and how they viewed our solutions was integral to getting to my final design. Everyone had different visions and goals, but as we scale, it's our responsibility as designers to take the sentiments of many and craft a shared product identity.
‍
Move fast but together
‍‍As a small team in a startup, we moved quickly and thought we could get by keeping each other updated because we sat together everyday. However, it's important to keep up with regular meetings to build alignment early and often!