A packaging machinery directory of PMMI members for consumer product goods companies.
PMMI ProSource is a packaging machinery web directory created for PMMI association members, with the goal of connecting its member base with end-users—a directory for this market did not exist on the web at this point. The Senior Vice President of Digital and Data ran the project as the main stakeholder and in conjunction with the senior UX/UI designer provided the target audience and user research. The initial challenges of this project were an expedited launch and the execution of a complex search. However, the nature of this being a flagship website, this tool has a rich roadmap, including usability testing for search functionality and reserved developer hours to complete features that would not fit into initial launch.
UI Design
Wireframing
Branding
2021
Jen Krepelka, Senior UX Designer & Project Manager
David Newcorn, SVP of Digital & Data, Content Expert, Main Stakeholder
Shipped, view live site
The director of digital had completed initial market research to determine the need for a product of this kind. He received eager buy-in from internal stakeholders in addition to affirmations from industry experts. The vision of the directory was to provide end-users with AI-driven search that featured packaging-specific search-and-filter features by industry, package type specialty, and processing specialties. Additionally, member profiles would be accepted and edited by an industry expert to drive and maintain clarity of equipment and services advertised.
The project came to the lead designer and me, and we took over by executing visual research of various supplier directories and attending taxonomy meetings to better understand our industry and audience.
Drawing on the initial work of our director of digital, we established that our audience would consist mostly of packaging line buyers and engineers. We expected many of our visitors would be more experienced professionals, but prepared for a wide range of experience and legibility in the packaging manufacturing realm.
We mainly referenced ThomasNet and MyNewMarkets. Both directories were rooted in the B2B realm and housed final products that weren’t exactly tangible—this was important in our search since packaging machinery is typically made to order and is often customized.
We also evaluated Angie's List (now Angi), for it's concierge search process. This was an experience I was in favor of, however it was eventually tabled due to cost and time restrictions.
The expert panel and main project stakeholder worked to establish a streamlined taxonomy that would serve the spectrum of expertise and experience. Logically, the taxonomy also informed the architecture of the website and search. I observed meetings to learn taxonomy, which informed my understanding of the packaging machinery buying process.
For search, we chose a faceted navigation approach using main categories and package types to drive search from the homepage, with a supplemental search bar that would serve the seasoned pros. We felt it was important to give a large, scrollable view of all our categories and package types, and pair them with respective visuals for maximum recognition. In a later phase of development, we will also include industry as a supplemental avenue.
Our results listing page was one of the first designs I tackled. We included a filter panel, and gave each company listing a card, which in our first release they would only feature a short description and their company name. Through user interviews with our experienced professionals, we compared views with bullet points, written descriptions, logos, machine images, no images, company size, and location, ultimately yielding our current result.
*Due to the average age and nature of the industry (B2B Packaging), we focused on designing a desktop experience first, with mobile to follow.
The color scheme was chosen based on the colors of the PMMI logo. We chose a lighter scheme to help keep the UI light and airy, and mitigate the dense information displayed on the page.
We chose the Roboto font family as the primary font for this site. Its taller x-height and a larger selection of weights allow for increased legibility and versatility.
I referenced Google Material Design in creating the card design. Many of PMMI's recent web frameworks were developed using this framework, and if not, we referenced Material Design's design library as a starting point to begin design.
Most industry experts understand the difference between a gravity filler and a piston filler—how can we accommodate the other segments of our audience that may be less versed in packaging lingo?
Our main stakeholder determined the higher proportion of users visiting the site would be more experienced packaging professionals, thus we focused our UI to serve more seasoned professionals; highlighting the category navigation over a concierge search experience.
We worked with an illustrator to create custom imagery for each of the main and parent categories. We chose illustrations over photos to respect equipment propriety.
We included definitions wherever necessary and package-type filters at the start of the search experience to help less-experienced professionals search the website.
This was a huge challenge for the UI and one I consider unresolved. We wanted users to have options when they start their search—faceted navigation in combination with a search bar lies within the bounds of user conventions. However, we wanted to add package types as a search avenue to help serve less-experienced professionals and felt if it was hidden in a filter panel later in the search pattern, it would not serve this audience segment. Pulling it out to the home page can confuse the UI in that being able to select a "filter" before beginning a faceted search is not necessarily an expected search pattern (we did specify that a filter pill would appear and main categories would re-sort conditionally upon package type selection to signal a change to the user). Until we are able to perform a wider selection of user interviews of our audience, I think this question of search focus will remain widely unanswered.
The launch of the first phase of this project was expected in eight months and we spent the first four months establishing taxonomy and visual research. This left not much time to design the UI, especially having to fit development into the final eight weeks of the project. Ultimately, I worked with the project manager and main stakeholder to prioritize features of the UI and worked to get those built out. We resolved to set a rigorous roadmap to introduce other features as budget and time became available.
We reached a consensus to feature main categories and format package types as if they were filter options. Breaking somewhat of a convention, we allowed users to select package types, which would dynamically affect the main category company counts and general availability.
We designed and configured the search to best match companies & categories. Predictive search, synonyms, and typos were high on the priority list for user experience.
The main category pages showed the relevant parent and children organized in a card view. If a user picked a package type to start their search, that filter follows them through their search.
Once users clicked through a child category, they could view an entire listing of companies that make that particular type of machine or service. Through interviews with an end-user panel, we discovered that they really wanted to see an image of the machine of the current category, the name of the company, and a short description of the company. Filters relevant to the category fill out the left panel to help narrow down company offerings further.
Finally, related categories and breadcrumbs are displayed on the page to aid in further browsing for the user.
The profile page shows basic company information and features first the card of the machine category in which the user began their search. Other categories in which the company provides machinery or services flow below.
Of course, mobile and tablet views were designed and implemented into the approved iteration of the site.
