Pedesis

An e-commerce website for pandemic PPE

Pedesis Logo

Overview

Pedesis is a healthcare brand that strives to promote happy, healthy lifestyles through the recommendation of science-backed methods and products. They approached my team in early 2020 seeking an website for their brand that could support an e-commerce platform which would be used to sell much-needed PPE supplies to individuals and hospitals during the pandemic.

My Role

For this project, I served as a UX researcher and project manager.

Understanding the Client's Needs

The client presented a challenge: the site required specific functionality, but it also needed to properly communicate the Pedesis brand. Pedesis wanted their customers to see the brand as trustworthy, caring, and rooted in science, but also have a modern feel. They requested that site should stick to colors that are commonly associated with healthcare brands, but they did not want the site to come off as sterile or overly traditional.

As for the site’s functionality, the site needed to include cross-country e-commerce transactions and include a user-friendly CMS system that could support both English and Chinese languages. It needed to give customers the option for single-item purchases, but also present the option for bulk orders.

Research

Before jumping into the design of the website, a competitive analysis was conducted to understand the online presences of other health brands. The following points were discovered:

  • The majority of healthcare brands prefer to use blue in their branding, which is a color that evokes feelings of calm, trustworthiness, and reliability.

  • Non-Amazon e-commerce platforms all tend to stick to a similar design layout.

  • Healthcare brands typically choose more traditional design elements for their websites, such as serif fonts and sidebars.

  • Brands that did allow for bulk orders often requested that customers contact them directly.

Extensive research was put into figuring out the correct tech stack for this project. On the implementation side, we had a big constraint in that our client needed an e-commerce back-end that supported the Chinese language and was usable by professionals with limited technical skills. Most of the common options that appealed to limited tech-skill professionals like Shopify or Square didn’t support the Chinese language. Webflow’s e-commerce capabilities fulfilled both of those criteria, and we decided to build the entire project out using Webflow.

Early Prototypes

Once we had a better understanding of the requirements for this project, we jumped right into building low-fidelity prototypes to run by our client and to test with users:

Collage of wireframes for the Pedesis.com website

Additional Page Requirements

After seeing the initial designs, our client had some requests regarding page requirements.

Each product card needed to display only:

  • Product image

  • Number of pieces/quantity per order

  • Price

They requested that each product page be able to display the following:

  • Number of masks in stock

  • Number of masks in box

  • Number of masks in sealed plastic bag

  • Information at a glance

  • FDA or CDC specifications

  • MSDN #

  • Certifications including watermarks, etc.

  • ISO numbers

  • Sizing/variations of a product

  • Additional information

  • Terms & conditions, “no refund” policy stated clearly

Additionally, they requested:

  • “Related Products” section on the product pages

  • Ability to support multi-product “care packages”

User Testing

The initial prototypes were tested extensively with potential customers during moderated testing sessions.

Image of handwritten notes on a page

Notes from user testing sessions

Image of handwritten notes on a page

The key takeaways from these user testing sessions were:

  • The amount of information on product cards is overwhelming. Reduce the options on the product card and move them onto the product page.

  • Side navigation is confusing and clashes with the rest of the design.

  • Additional navigation at the bottom of the page would make navigation easier.

  • Users are unlikely to use the search function due to a limited product catalogue.

Final Product

Below are some images of the final product after multiple iterations and testing sessions. The website can be viewed in full at pedesis.com.

Screenshot of the mobile version of Pedesis.com
Screenshot of the desktop version of Pedesis.com