Skip to content

Project story — Medical Supply Catalog

bnaolu edited this page Sep 24, 2021 · 10 revisions

Completed in approximately three days, the first iteration of the prototype explores the potentials of a more adaptable and user-friendly product. The new design consists of a catalog page and some product pages that allow users to view product images, product meta-data, and detailed information in a streamlined structure.

The problem and solution

An international agency provides supply-chain logistics for partners around the world. As part of their service, the agency produces a catalog of medical supplies available for order. Currently, the catalog is only available as a PDF file, but this can cause some issues:

  • Accessibility to the catalog
  • Recency of information
  • Findability
  • Overuse of paper resources

Screencast of an oddly laid-out product page with large labels depicting what each section represents.

As a proof-of-concept, our team built a prototype that would include a redesign for two primary pages: a catalog page and a product page.

Page features

The catalog page displays nine product pages across six distinct categories with the following included:

  • Cards with related media images
  • Metadata for the number of products in a category
  • The date a category was last updated

A landing page showcasing six different card components with some metadata.

On the product pages, the following are included:

  • Featured product images
  • Tags for high-level information
  • A prompt to log in for more information
  • Jump links to full product details
  • Links to similar products in the category

Screencast of a product page showcasing product images, metadata, and in-depth details.

Some other features that can be found on these pages include a header and footer with indications of navigation and search capabilities.

Additional changes

After receiving client feedback, we performed a second iteration and made the following changes:

  • Added an "Add to list" button to the product page.
  • Added "last updated" along with some other metadata to the product page.
  • Added a language selector.
  • Added category landing pages.

Takeaways

  • Produced a tangible, working prototype shared with our client.
  • Crafted a reusable prototype template for similar projects.