Project Overview
PROBLEM: Xyzal® Allergy 24HR is an over-the-counter allergy relief medicine that needed a free sample program that visitors could order from on their main website. Additionally, for purchased orders, Xyzal also required a comprehensive Money-Back-Guarantee page to refund any unsatisfied customers.
SOLUTION: I designed a fully encompassing user flow that takes legal and privacy concerns into account, supported by marketing emails to keep customers updated on their shipped order including an opportunity to leave a review after trying Xyzal® Allergy 24HR. For purchased orders, I designed a Money-Back-Guarantee page with a fill-in form with guided steps on how to receive a refund.
DURATION: May – August 2021
MY ROLE: I designed high-fidelity mobile and desktop mockups from existing wireframes, and tested and presented them to stakeholders on Marvel. I also created a leave-behind sticker sheet of components and assets to help guide developers.
Sticker Sheet & Components I designed for the project
WCAG compliance included color contrast checking and developing a ‘focus’ mode for buttons that users interact with.
Free Sample: Page Mockups
Page versions included error notifications and different landing pages depending on inventory of physical product.
Hyperlinked content and colors followed Web Content Accessibility Guidelines (WCAG) 2.0 best practices. Legal and privacy information was made available to users.
Free Sample: CRM Emails
I also took ownership of designing and updating marketing emails associated with the free sample to engage in CRM goals.
Money-Back-Guarantee: Page Mockup
The Money-Back-Guarantee page had several components to it including a step-by-step guide, form fields, and a terms & conditions link users could interact with.
What I learned
During this project I learned how to upload my work to Marvel and present to stakeholders. I also implemented grid-based design principles for structured layouts in desktop and mobile. My role included building and organizing a sticker sheet to guide developers and any future designers for upcoming projects. Other key takeaways included understanding privacy, legal, and WCAG concerns prior to product launch. Overall this was a chance for me to collaborate with a team of diverse roles to ensure project success.