WholeScripts

WholeScripts.com is the online store of the vitamin and supplement manufacturing company I've been working for as a front-end developer for the past 2+ years.

As a part of the Web UX team, I've worked on the front-end for a number of high-impact, high-visibility features and landing pages as well as an assortment of bug fixes and UI updates. Some of the bigger features I helped to implement include the MedPax experience—a multi-page process where users can create their own monthly supply of daily pill packets—, the New Recommendation builder—used by practitioners to suggest supplements to their patients—, and a redesign of the site's homepage and its auxiliary informational landing pages.

MedPax

MedPax was one of the first projects I was involved in from start to finish. From the design sprints and sketching, to the final QA testing. However, my primary task was to create a responsive front-end in HTML, CSS, JavaScript across the feature's two pages.

The MedPax feature was the site's first instance of a search bar that is shown on scroll to make it easier for users to navigate the highly populated product tables. It was my suggestion to implement this interaction.

One thing I really like about my position here is that although I'm a developer, I still have a role in the decision making for design choices. And my ideas are always considered along with the rest of the team's.

For tablets and other mobile devices we had to rethink the product cart as there wasn't enough space for both it and the table listing all products. So we simply hid it inside a modal.

Homepage

Perhaps the most visible page I had the opportunity to work on was the redesign of the site's homepage. Most recently we updated the hero section. I suggested utilizing some simple CSS animation for a more modern, interactive look-and-feel which the team ultimately agreed on.

Landing Pages

I've worked on several landing pages to be utilized in various marketing campaigns for the site including pages for Condition-Specific MedPax, and a lead-generating informational page targeting practitioners. These pages include responsive design, CSS animations, and JS for front-end validation.

Condition Specific Medpax Slider

We have a number of sliders we use for different things across the site. Typically, we'll use certain plugins to create them on-the-fly, however I don't like always having to include an external library for every little carousel. So when I was tasked with creating this one, I took a different approach making use of the scroll-snap CSS property and some minimal JavaScript. I took inspiration from the product sliders on Nike's website.