PCT Marketplace

Responsive web design
Project Overview
Person Centered Tech (PCT) needed a custom-built ecommerce page to centralize, automate, and streamline the shopping experience across their inventory of continuing education products and mental health professional services.
Contributions
(1) Articulate a user-experience strategy informed by user needs as documented by PCT.

(2) Implement the strategy into a production-ready comp.
Finding relevant content used to be a problem before the introduction of objective-oriented slates that provide everything a user needs to accomplish specific goals such as assessing their practice's HIPAA compliance.

Thematic Slates

One of the goals of the redesign is to help users discover the wealth of content PCT offers. To aid users with this, thematic product and service combinations are organized into objective-oriented slates. Each slate features relevant items that can be added to a cart with a single click. Want to boost your work-from-home chops? A slate of courses has everything you want. Need to get HIPAA compliant? There's a slate for that, too.

For services with tiered pricing, radio groups provide an effective interface. Instead of calling up a PCT staff member to access these services, the process is now self-serve.

Responsiveness

Organizing individual product offerings into cards not only provided visual structure, but access to a variety of information and actions in a condensed space. Context-sensitive tags such as the ‘Purchased’ tag shown here let users know what content they already own or if a course is part of a certification program.

Cards in a three-column grid collapse nicely to a single column on mobile devices. These neatly stack and condense on smaller screens without affecting legibility of text, responsiveness of buttons, or eliminating white space.

Slates and cards are designed to neatly stack and condense on smaller screens without affecting legibility of text, responsiveness of buttons, or eliminating white space. Sticky headers for long slates keep the top of the slate visible while the user scrolls the content.