RangeMe Public Pages

RangeMe has a relatively new marketing site which is the first thing that a user sees today before they have created an account. The authenticated site, by contrast, has not been fundamentally changed in the past 5 years. Opening the site up to the public would first require us to modernize the UI and fix any critical usability issues if we wanted to stand toe-to-toe with our competitors. In order to gauge the norms and expectations of the CPG e-commerce industry, I put together an analysis of B2B and B2C companies measured against RangeMe to better understand the common features of 4 key touchpoints: Home, Browse, Brand Pages, and Product Pages.

Faire is the largest B2B marketplace, so most of our buyers are active on Faire as well. I used them as a source of inspiration when designing Public Pages to make the discovery process feel familiar on RangeMe without becoming derivative. I did a deep dive audit comparing RangeMe to Faire on a page-by-page basis to understand the biggest weaknesses on RangeMe that need to be addressed, and the strengths of Faire that we can try to incorporate.

‍

At a high level I found that RangeMe is a static experience, showing the exact same home page to every buyer regardless of their industry or needs. Faire, by contrast, takes in the user's previous searches and actions to recommend relevant products that change as the user interacts with the site.

The biggest and most frustrating thing I noticed in my deep dive of RangeMe was invisible usability issues, things that create a general feeling of clunkiness while being difficult to pin down one specific thing that is wrong. There are many competing sites in the B2B CPG space, so if the site feels bad to use or makes it difficult for a buyer to do their job, retention becomes a challenge. To showcase these overarching usability issues to stakeholders, I conducted a click audit on both RangeMe and Faire to search for a bag of potato chips.

‍

On RangeMe's audit I searched for chips, but the results give me dog treats instead. I had to go into an unintuitive filter labelled "Category" and add chips in there to see the products I was looking for. Faire's audit has me drilling down into progressively more specific categories from food to snacks to chips, highlighting how their interface enabled discovery whereas on RangeMe I had to actively fight against the interface to find what I was looking for.

As I began designing the public product page, I had to figure out how to handle sensitive information like wholesale price which requires a buyer to be manually approved before they can view those details. I first experimented with hiding authenticated fields so the Public Page looked cleaner, but this made it difficult for buyers to understand what information they'd gain access to once they create an account. I then tried locking the authenticated fields, which created a more consistent UI between the Public and the authenticated site. I interviewed a few buyers on this topic and they explained that RangeMe is the only platform that has information like distribution capabilities and state of origin, so we decided to go with the lock approach to highlight that differentiator to prospective buyers.

I conducted similar ideation on the brand page, where the biggest debate was around the inclusion of buyer testimonials on the page. One line of thought was that utilizing success stories from high-profile retailers like Walmart and Target would add legitimacy to the RangeMe brand. When looking at our conversion funnel, I noticed that interesting products are the main driver that leads a buyer to sign up for RangeMe, so I scrapped the idea in favor of showing actual products over testimonials.

As the development team was patching up bugs from the initial launch, I began concepting the redesigned Home and Browse page for Public Pages v2. I went component by component analyzing brand cards, nav menus, filters, search bars, and product cards of our competitors to understand what I like and dislike about each, pulling the strongest elements into my design. I added a serif header font to our design system to add some much-needed contrast in RangeMe's typography, I reworked our color system to pass WCAG AA accessibility guidelines, and I utilized buyer feedback from the past 3 years to incorporate into my redesign.

With the core components of the home and browse page redesigned, I began thinking conceptually about how to best utilize those elements to enhance the buyer experience. The existing home page was static and hadn't received a major update in years, so my top objective was to make sure that buyers see something new and interesting every time they visit RangeMe.

‍

To promote that goal, I created product carousels that highlight high-value collections like New Products and Brands On Sale. Collections are frequently used by buyers, but they had been lumped together into an unwieldy 15+ item carousel on the home page. I broke this component apart into clickable collection cards that provide a point of intrigue for buyers and enhance the scannability of the home page. I added a row for trending categories, enabling users to see the type of items that are currently trending in the market and on RangeMe in particular. Finally I incorporated some of our marketing site content on the home page so users can learn about the RangeMe brand in addition to seeing which products we have to offer.

See the before and after below:

To enhance the browse experience for buyers, I honed in on our two most common complaints: it's difficult to find products in a specific category, and the filter menu is unintuitive to use.

To address the category issues, I created a sidebar menu that shows a tree navigation of available product categories in addition to pulling our most commonly used filters out of the filter bar for easier access. I added some additional quality-of-life improvements to filtering such as a "Clear all" button that removes every selected filter in one click, toggles like "Private Label" were changed from a dropdown menu to a button to turn the filter on or off, and certifications were grouped into common categories like "Vegan" and "Organic" so users can either select the entire category or select individual certifications.

One of the complaints around filtering on the browse page is that there are so many filters containing so many options that it can be difficult to find a particular filter that if you don't know where to look. To address this pain point, I added a filter icon that opens up a modal containing all of the available filter options in a single scrollable window. This enables buyers to quickly scan for the filter they are looking for, and it simplifies the process for new users who are setting their filters for the first time to do it all in one place instead of looking through a dozen different menus.

After the initial launch of public pages, we received a lot of feedback from buyers and suppliers. A few of our larger suppliers decided to make their entire storefront private because a few of the products in their catalog they didn't want to be visible to the public yet. To provide more user control and encourage those with private storefronts to go public, we enabled public pages at the product level, allowing users to hide individual items while still having a public and shareable storefront.

‍

Another issue we identified were users accidentally signing up as the wrong type (e.g. a buyer signing up as a supplier), a problem which RangeMe has no way to resolve on the back-end aside from creating an entirely new account from scratch. I noticed that there was no way for users to move between the buyer and supplier sign up form, and it didn't prompt users to double check that they made the right selection. To minimize these errors going forward, I merged our 3 sign-up forms into a single page which can be toggled by selecting a tab at the top of the page.