Medical Supply Catalog

Overview

USAID’s Global Health Supply Chain (GHSC) Program is an international agency that provides supply-chain logistics for partners around the world. As part of their service, GHSC produces a catalog of medical supplies available for order.

Problem

Currently, the catalog is only available as a PDF, which causes issues with accessibility, recency of information, findability, and overuse of paper resources.

Solution

For a proof-of-concept, we built a site for two primary pages: a catalog page and a product page. Content for the site was provided from an example of their existing PDF document.

Results

Once we completed and shared the proof-of-concept with the client-partner, we had time to continue with a second iteration that was not directly tied to the client effort. The features and content for both iterations are detailed below:

First iteration:

• Catalog page. The catalog page displayed distinct categories. Each category was structured as cards with media and contained metadata for the number of products in the cateogry and the date it was last updated.
• Product page: The product page contained the product’s featured image, tags for high-level info, a prompt to log in for more details, jump links to full product details, and links to other products within the category (not all categories have multiple products).

Second iteration:

• Added a category landing page. This allowed for a more conventional information architecture and useful breadcrumb navigation.
• Added an “Add to list” button. Allows people to collect products to take future action after finding them in the catalog.
• Added “last updated” along with some other meta data to the product page. This lets people quickly the understand the recency of the product information, as well as some other useful information like brand name and SKU number, which can be helpful in confirming you’re looking at the right product.
• Added a language selector. Since the client indicated an interest in multi-language support, we want to factor in how this would be incorporated. For now it’s simply a “translate” link in the header and footer, which could link to a number of options based on the need.

Tools used

• USWDS
• Figma
• CodePen
• GitHub
• Jekyll

Reflection

Scope creep is real. Even with a well-definied scope in place, working on a small portion of this much larger-scale project brought on the “scrope creep scaries”.

Luckily for us, we stayed within what was reasonable and doable in the time we had. The surfaced questions were documented and would need to be validated with usability testing in future iterations.