PREORDER FOR ELFCOSMETICS.com™
Product Description: UX Prototype Design – ELF Preorder Functionality (PDP, PLP, Cart)
This UX prototype outlines a comprehensive preorder experience tailored for high-priority product drops, optimized for both mobile and desktop platforms. The design showcases how preorder messaging and functionality should appear across key touchpoints, including the product landing page (PLP), product detail page (PDP), and the checkout flow.
This functionality is integrated with Salesforce Commerce Cloud via a feature flag, enabling easy activation for any item in the catalog through the existing out-of-stock logic. This modular approach allows cross-functional teams to quickly enable preorder for select items—ideal for high-demand releases or strategic partnerships.
Designed with scalability and flexibility in mind, this prototype serves as a robust guide for development teams implementing preorder functionality across the ecommerce ecosystem.
Key features include:
•Preorder Messaging: Clear, branded communication components that indicate when an item is available for preorder, including estimated shipping dates and limited availability.
•Clear CTAs: Add-to-Cart behavior uses visual and functional differences for preorder items within the cart and checkout flow to help manage customer expectations.
Preorder CTA reinforces exclusivity, confidence, and drives interaction.
Preorder CTA reinforces exclusivity, confidence, and drives interaction.
•Modals: Provide information to customers based on preorder rules and exceptions set on on Sales Force (e.g. one item per preorder, and/or combination order of preorders and non preorders).
•Flags and Banners: Informational Banners are used to communicate checkout blocks, billing cycles, shipping dates, and preorder rules and exceptions.
•Flags and Banners: Informational Banners are used to communicate checkout blocks, billing cycles, shipping dates, and preorder rules and exceptions.
•Responsive Design: Mobile and desktop prototypes ensure a seamless user experience across devices, with stacking behavior and scrollable layouts tailored to each platform.
To intertact with the interface on mobile, simply tap on the screen to view the next prototype.
Desktop viewers can use the pagination arrows below the prototype.
Users may scroll up and down to view the whole interface on both screen types.
SUBSCRIPTION BILLING ON ACCOUNT FOR ELFCOSMETICS.COM™
Product Description: UX Prototype Design – Subscription Billing (Account Page Integration)
This UX prototype was developed to guide implementation of a Subscription tab within the Account Info flow, enhancing the customer’s ability to manage recurring purchases directly from their account page. Built in alignment with Ordergroove’s subscription functionality and with existing Sales Force integration based on stock functionality on the backend. The prototype showcases a clean, intuitive user experience that bridges design and development requirements.
This prototype empowers developers with precise interaction models and visual references, ensuring the final implementation is both technically sound and user-centric.
Key features include:
•Radio Button Selection Flow: Managing subscription options based on preferred payment method. (frequency, quantity, pause/cancel).
•Clear CTAs: Reinforces confidence and drive interaction.
•Modals: Provide information to customers based on saved credit card per subscription, and information regarding updating payment methods.
•Flags and Banners: Informational Banners are used to communicate checkout blocks, billing cycles, shipping dates, and subscription status.
•Responsive Design: Mobile Responsiveness featuring stacked layouts and horizontal tab scrolling for seamless navigation across screen sizes. Modular Components designed for scalability and consistent behavior across user touchpoints.
To intertact with the interface on mobile, simply tap on the screen to view the next prototype.
Desktop viewers can use the pagination arrows below the prototype.
.Users may scroll up and down to view the whole interface on both screen types.
SMS SIGNUP FOR KEYSOULCARE.com™
Product Description: UX Functionality Prototype – SMS Signup For Keys Soulcare
This prototype outlines the user experience design for implementing SMS and email signup functionality on the Keys Soulcare site, supporting both mobile and desktop platforms. Designed to create a seamless and compliant opt-in experience, the prototype helped guide development in delivering a polished, live experience.
Areas of functionality include:
•Multi-placement signup options
•Integrated into the site footer for persistent visibility
•Embedded within the checkout flow to capture engagement during high-intent moments
Key features of the prototype include:
•Checkbox Functionality: Users opt in via clearly labeled checkboxes, which trigger the next step in the subscription process
Designed to reduce friction and maintain a clean UI
Designed to reduce friction and maintain a clean UI
•Drawer Reveals: The start of entering a phone number triggers a drawer interface that expands to reveal checkbox with vital legal information regarding subscriptions.
Keeps the layout clean until interaction is initiated
Keeps the layout clean until interaction is initiated
•Legal Copy Integration: Each drawer includes compliant legal language for SMS consent and privacy terms
Ensures clarity and trust for users during signup
Ensures clarity and trust for users during signup
•Responsive Design: Optimized for both mobile and desktop with smooth stacking and scroll behavior
Ensures usability across all devices
Ensures usability across all devices
To intertact with the interface on mobile, simply tap on the screen to view the next prototype.
Desktop viewers can use the pagination arrows below the prototype.
Users may scroll up and down to view the whole interface on both screen types.
Disclaimer: The original UX/UI design and visual identity for the brands mentioned were established prior to my involvement. The features presented reflect functional enhancements and user experience improvements implemented in alignment with each brand’s existing guidelines and design systems.