NatureM.D. Landing Page
September 2023
I was tasked to design and build a landing page to support the launch of a new gut-wellness product. The aim was to reinvgorate its brand image and presence in the social space.
Project Data
Web & UI Designer, Front End Developer
React, Bootstrap, Swiper Elements, Vite React
Photoshop, Illustrator, XD, VS Codium
Produce a Landing Page Optimized Specifically for Social Media Marketing Campaign
In developing and creating awareness for our in-house brands, we pursued these two advertising channels: paid social media and native. These two channels were distinct to each other in how the funnels were constructed. In our native funnel, a video presentation often referred to as Video Sales Letter (VSL) carried the majority of the weight in delivering messages before redirecting users to a landing page. One unique aspect of these video presentations was that they didn’t allow users to proceed to the next step until the very end of the presentation. These presentations were often 30+ minutes long which means that those who stuck around until the very end had a very high level of interest in the product we were trying to market.
On the contrary, VSLs were used as an ad to create initial interest in our product in our social media funnels. They were much more compact in length and allowed users to proceed to the next step in the funnel easily.
While using an existing landing page optimized for our native marketing was an option, a page optimized specifically for our social media funnel was the much-needed solution.
Main goals of this project:
- Design and build a landing page with content and functionalities carefully designed to align with the distinct characteristics of our social media funnel
- Increase autoship (subscription) opt-in in relation to one-time purchases
Optimizing Page Layout and Content for Paid Media Funnels
Figuring out the right type and amount of content for social media landing pages has always been a challenge. Since the page will bear the bulk of the responsibilities in delivering brand/product messages, the natural tendency for us has been to cram in as much information as possible using carefully manicured scripts developed by our copywriters. However, through many A/B testing campaigns I have conducted in the past, users tend to bounce quickly when there is too much information on the page. Similarly, pages with minimal information tend to flop because they don’t arouse users’ purchase intent enough - and this is the primary reason why using native marketing landing pages for paid social has never worked for us, at least in a noteworthy manner.
Other Areas of Optimization
While these are not specific to this project, several to-do items were added to my list of deliverables prior to kicking off this project.
Obscured Ingredients labelWe have received more than a handful of customer complaints referring to how difficult it was for them to locate nutritional information on our landing pages. And for a health-and-wellness product, this is detrimental. In the past, I have always used a javascript modal to display nutritional labels with the hyperlink being embedded inside the "Ingredients" module. However, the number of customer complaints relayed by the CX team told me that coming up with a better solution would critical.
Hyperlink to trigger modal containing nutritional label is being obscured. Many customers had trouble locating it.
Performance Lag Caused by Product Availability StatusInventory management is a tricky beast to tame for all DTC brands. Regardless of how well you have the supply chain under control, we all face these unfortunate circumstances where a product goes out of stock. While we still allowed users to pre-order a product in an event when it is either backordered or out of stock, test data suggested that our performance took a serious blow. Upon discussing this matter with our media-buying and CX teams, it became obvious that we would need to make some adjustments.
Putting It All Together
Optimized Page Layout and Content for Paid Social TrafficI kicked off the production process by first getting together with the art director to examine our existing landing page template and figure out the optimal layout for the product’s social media campaign. We both had a solid grasp of the aforementioned disparities between social and native marketing funnels and were intrinsically aware that success hinged on figuring out just the right type/volume of content for the page. After bouncing off some ideas to finalize the layout, he created the initial mockup that outlined his vision in delivering the product/brand messaging. My job was then to expand on his vision, incorporate my own ideas specific to landing page designs that I acquired through all the tests I conducted in the past and build out a fully functional page.
Incorporated "Subscription First" UI DesignIn order to increase the volume of subscription orders vs. one-time purchases, we modified the frequency-selector UI to communicate the cost and convenience benefits of subscription.
Directing purchase behavior towards subscription by spelling out the key benefits over one-time purchase.
Nutritional Facts Label Added to the Image CarouselI had always assumed that the most obvious place on a given page to incorporate nutritional fact labels was the ingredients module. However, with the increase in the number of customer complaints related to folks not being able to find them, we had to come up with a better solution. After ideating several options, we settled on adding them to the product image carousel located right by the product purchase module.
Adding nutritional label to the image carousel prevented it from being obscured.
Updated Product Availability Alert Color and MessagingAfter taking a closer look at the existing alert box that delivered product availability messages, few things became obvious:
- The red color was too alarming thus acting as a source of friction
- There was a disjoint between the alert box and CTA messaging which discouraged users from proceeding
After working with the media-buying and CX teams, we first changed the color from the fear-inducing red to a blue color that was more palatable yet sends a signal to our senses in a midly alarming way. Then, in order to prevent the communication disjoint between the alert box and the CTA, we decided to add an approximate ship date.
We fixed the disjoint between the alert box and the CTA by manipulating the color and messaging.
Post Production Notes
Before the final launch, the page design went through 7 rounds of design changes. However, since I fulfilled both roles as a designer and the developer, we were able to save a significant amount of time by not letting the production work change hands. The majority of the requested updates were delivered on the same day they were requested.