WW Candy Bar Landing Page

Check out the interactive LPs here

I was lead designer for the landing page for WW’s newest product, the Candy Bars. This launch featured candy bars featuring 3 WW flavors, Chocolate Caramel Swirl, Dark Chocolate Peanut Caramel, and Milk Chocolate Nougat. After launching on the WW shop site on the morning of 2/11, the WW Candy Bars were sold out by 3pm. Check out some of the process below:

Collaborated with:

Global Creative Director
Design Director
Art Director (Ecomm)
Art Director (Photography)
—
Illustrations by James Gulliver Hancock

Timeline 2 weeks

Tools Adobe XD, Photoshop, InDesign, Illustrator, After Effects

Role Senior Digital Designer

 

Campaign Origin

Funner than Fun-size: Introducing WW Candy Bars

The introduction of Funner than Fun-size is a tier 1 launch which is slated to be the largest product launch of the year for WW. This was a fast moving, cross-functional launch with many moving parts and an accelerated timeline. We had the privilege of working with London-based illustrator James Gulliver Hancock and worked to combine his energetic, colorful illustrations with our products to create a compelling look and feel.

 

Process - Wireframes

I could talk about process until I’m blue in the face, but sometimes it’s just easier to see for yourself the evolution of the LP, from conception to launch.

Click through 4 rounds of of wireframes here as we worked through the process:

Round 1 Takeaways:

  • Have product tiles closer to the top of the page. We pushed for products to be above the fold for easier understanding of what we’re offering consumers.

  • Shorten scrolling and content blocks. Ingredients panel was too long and seemed redundant for flavors consumers are already used to. There was also a lot of wordy text, I worked with copy to identify where text blocks could be shortened or eliminated all together.

Round 2 Takeaways:

  • Need to rework intro, right now the product vs. intro isn’t reading correctly.

  • Take a second look at comparison slice options. We want to avoid drawing attention to our competitors similarly flavored products, plus it’s complicated and hard to read.

  • Focus more on chocolate, right now the illustrations are reading more than the products.

Round 3 Takeaways:

  • Rework product space. On this round I really focused on the UI of the product tiles. I felt the CTA wasn’t strong enough and that the products got lost in the illustrations.

  • We cast the net wide, now it was time to pull back a bit. Because of the nature of the illustrations we commissioned, we were able to play around a lot. This round allowed us to see what was working vs. what wasn’t and provided clarity as to which direction to dive into.

Round 4 Takeaways:

  • Finalizing site heirarchy. We felt that we were in a pretty good place by this stage, but wanted to take another look at the relationship between individual slices.

  • Packaging push. I still wasn’t convinced we had enough product on the page to balance out the illustrations and took liberty to explore a version in which we pushed product and packaging more.

  • Functionality. Once we had this round of wire-framing done, we took a look at available functionalities to help draw the user in. This included hover state, animated links and tap through for our comparison carousel.

 

WW Candy Bar Interactions

Default State

Hover State