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 3+ years.
As 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 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 design sprints and sketching to final QA testing. My primary task was to create a responsive front-end in HTML, CSS, and JavaScript across the feature’s two pages.
MedPax 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 decision-making for design choices. 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 for various marketing campaigns, including pages for Condition-Specific MedPax and a lead-generating informational page targeting practitioners. These pages include responsive design, CSS animations, and JavaScript for front-end validation.
Condition-Specific MedPax Slider
We use a number of sliders across the site. Typically, we use plugins to create them on the fly, but I didn’t want to rely on external libraries for every little carousel. So, when I was tasked with creating this one, I decided to use the scroll-snap CSS property and very minimal JavaScript. I drew inspiration from the product sliders on Nike’s website. This resulted in a lightweight, responsive, and accessible slider that relies on native browser functionality.