IDEATE
Radio Cards
Since users could now choose between pickup and delivery, we explored options for how to make this selection, primarily focusing on radio cards. Shoppers Drug Mart already used radio cards for the date and time selection. To streamline development efforts and maintain consistency, we aimed to unify the approach in Pharmaprix by incorporating radio cards for the pickup vs. delivery selection.
Delivery Date and Time Picker
The introduction of the delivery option prompted a necessary discussion about the date and time picker feature. For the pickup process, we aimed to maintain consistency with Shoppers Drug Mart by using the radio card component to accommodate the selection from four pickup date options (within 4 hours, same day, next day, or 2 days ahead) and three time slots (8 am - 12 pm, 12 pm - 5 pm, and 5 pm - 12 am).
However, reusing these radio card components for the delivery date and time picker was not feasible due to differing options. For delivery, users were required to select a delivery date from a seven-day window and then select from three available time slots.
While concentrating on the date picker, we explored two primary options: a calendar and a drop-down selector. During our initial exploration phase, we anticipated users having either a seven-day or a 30-day window for selection, leading us to explore designs for both scenarios.
Calendar Exploration
Our calendar exploration revealed several complexities that necessitated deeper consideration for the date picker. We grappled with the presentation of past days, pharmacy closure days, and days in upcoming months. We experimented with lighter text, slash marks, and even considered the removal of text in order to account for these unique instances.
Additionally, we explored different views—monthly and weekly—aiming to cater to both the seven-day and 30-day delivery window scenarios.
Drop-down
Exploration
Through discussions with the development team, we learned that the drop-down UI across Pharmaprix's site is dependent on browser settings. After selecting a delivery date, users must select a delivery time. We investigated the feasibility of implementing a drop-down pattern for both the date and time selection.
We noted that implementing a drop-down menu for the 30-day delivery window would lead to extensive scrolling due to the considerable length of options available.
Key Design Decisions
Once a week, the design and copy team met with the product and development teams. At these meetings, my co-designer and I surfaced our designs for external feedback, assessed the technical feasibility of our designs, and made key design decisions.
Pickup and Delivery Selection
After presenting our radio card design explorations and recommendations, we decided to proceed with the left-aligned, stacked radio card design. This format, mirroring styles featured in patient-facing emails, not only maintained consistency throughout the Pharmaprix experience but also minimized development efforts, as confirmed by our review with developers.
After finalizing the pickup radio card layout, we wanted to uphold uniformity in the delivery radio card design. Addressing the potential scenario where users reach the 400-character limit in the notes section, we chose to use an ellipsis after 50 characters, providing access to the full notes through the “Edit address or notes” button. This way, we reduced the space occupied by the radio card.
Date and Time Selection
After our design exploration, stakeholders confirmed a 7-day delivery window, alleviating our initial concern of extensive scrolling within a drop-down. While a calendar offered visual appeal, its status as a net new component would require considerable development work. In contrast, the pre-existing drop-down component could be reused. Since the drop-down UI would be native to users' web browsers, we did not deliver designs for an expanded component.
Additionally, stakeholders informed us that users would now choose from three delivery time windows, mirroring the Shoppers Drug Mart experience. For consistency, we used radio cards for the time selection.
.png)
