I designed this lead generation landing page for Botox Cosmetic while working for BCG Digital Ventures. The goal was to capture user data that would later be used in the development of a consumer data platform. Within one month the page captured more than 3,000 emails.
I was responsible for the UX and Visual Design, under the supervision of the Lead designer.
One of the requirements and challenges of the project was making sure all content was in compliance with restrict FDA standards. For example: showing the Important Safety Information and Approved Uses above the fold and placing a disclaimer on the hero image.
Wireframes
I created low-fidelity wireframes to explore different layout options and to study the flow and functionality of the form.
On desktop I had enough space to place the most relevant content – the form – above fold for immediate visibility.
On smartphone I placed the form title above the fold, triggering the user’s curiosity to scroll down.
One of the guidelines for the project was to extract elements from the Botox consumer site. Fonts, color scheme and certain design elements complied with the provided styleguide.
Two of the screen breakpoints were also extracted from the consumer site: 320px and 980px. I created an additional breakpoint for wider screens at 1440 px.
A Multi-Step Form
I broke the form down into different steps. This helped reducing user’s cognitive load, and allowed us to capture the core data – name, email and zip code – on the first screen, even if users didn’t answer the remaining form questions.
Breaking the form into different steps also made branching easier. Depending on the answer to a question the user would see a different subsequent screen.
Interactions
I created an interaction style guide to include with the deliverables.
