VIDA Mask Landing Page
Create a dedicated landing page to route all ad traffic for the new face mask product line purchases, in order to improve conversion rate.
Vida is an e-commerce platform that offers apparel and fashion accessories designed by a global network of artists. In 2020 the company launched a reusable face mask product line while many advertising spaces like Facebook and Google censored ads related to the sale of masks if they led customers to product pages where they could place orders.
My Role
As the lead UX designer, I collaborated with our CEO/Creative Director, marketing, and engineering teams. I was in charge of creating the layout for the page, engaging customers through their purchase experience, and maximizing the conversion rate.
Design Process
-Competitive Analysis and persona
-User flow, wireframes ,and user testing
-Hi-fidelity responsive mockup and visual design
-Additional supporting touchpoints (ads, email campaigns)
-Deliver and launch
Competitive Analysis
I analyzed fashion brands who also launched a face mask product line. The column on the left is the convergence of the features observed on their collection pages and those relevant to us.
User Flow
For this project I introduced a landing page for the product line to route all paid ads.
Persona
Based on a marketing survey of new users.
User Testing Insights
“We have all been isolated and distanced from other people. I would like to see the models front and center. - it gives me hope” - Sondra
Seeing how the mask fits a model is compelling and engaging
Showing different shapes of the mask catches the users eyes and gives them a chance to notice details
Using distinct colors for each mask type helps to visually differentiate the products
Sketches
In this stage of the design process I was experimenting with different layouts that would present the user with multiple options without being overwhelming. On the left I was exploring how the different products could interact with one another; on the right I wanted to separate them into their own section.
Wireframes
While refining my sketches I began to focus on creating more delight for the user by making the page feel more visually captivating.
Individual Product Highlight
Each product type gets a section of its own, in order to highlight the subtle differences.
Single Hero per Product
Shorter page layout, products are displayed in carousels next to each other.
Collection Emphasis
Highlights the stronger collections, individual product descriptions become secondary.
Visual Design
After gathering user feedback, I kept the layout with the clearest individual product hierarchy as the final design. Each section highlighted a mask type. We used photos of models wearing it, as well as laydown product pictures. The zig-zag pattern chosen for the page helped users scan the page more efficiently.
The image with two models was selected as the main banner, as it scored the highest in the user testing.
Desktop Design
Mobile Design
On mobile, I simplified the design by eliminating the hero lay-down. Allowing the copy and CTA’s to fill the screen.
Design System
Impact
This new landing page increased conversion rate to almost 2 times the industry standard.
One of the main business goals was to get ads approved by social media platforms. This page accomplished both:
highly increased that approval rate
brought in high value purchases
Supporting touchpoint | Ads
Reflection
This project helped me learn how to balance business needs and pleasing design. One of the biggest achievements was to increase the conversion rate by almost 2 times the industry standard. I also managed to connect marketing objectives and the customer needs.
This design was completed in less than two weeks. If I had had more time I would have also added the features mentioned on the right.
Possible functionality improvements
Navigation at the top of the page
Quick add to bag
Remove some of the descriptions
Shorten the length of the page
Takeaways
Business goals
End-to-end strategy and design