MY ROLE: Graphic Designer

MY TEAM: Art Director, Creative Director, Copywriter, Marketing Manager, Development

In 2020, I was the sole designer on the redesign of the denim landing page. The marketing team wanted a more robust landing page and more content for the White House Black Market customers that would launch in the Fall season.

The goal of the project:?design a brand new denim landing page where the main leg shapes have shoppable functionality, make WHBM a leader in denim, and have a higher conversion on the page.

Wireframes

WHBM needed a new denim landing page that was shoppable and provides more information to the customer. I started off with sketches to get a sense of layout based on the brief requirements and user & business goals from the marketing team.

The marketing team wanted to incorporate new sections to talk about denim, making the page completely different from the previous page which had more product images and less information.?

Once the sketches were done, I worked closely with the Art and Creative director on the WHBM team to get approval before making a high-fi wireframe. I explored lots of versions and these were the top 2 design layouts chosen by the creative and marketing teams.

The team ultimately decided on the left design after we talked to the development team and got approval on the functionality they would create for us and we were also on a tight deadline so the page can launch for the Fall season.

Functionality

The main objective of this denim guide was to make the leg shapes (Skinny, Slim, etc.) shoppable to the customer. After some competitive research and development team consultation, this is the final functionality where the user hovers over the leg shape and the description and CTA appear. The leg shapes are also clickable if the customer clicks on them or the user can shop all denim.

On mobile and tablet, the main denim section allows the customer to shop from the 5 featured denim using horizontal scrolling on mobile. The description of each denim is below the image with the CTA to shop or shop all denim.

Fit Section

As the customer goes down the page they can explore more content and ways to shop. Since mobile has very high traffic, these sections were designed to be seamless for the customer to tap and learn about each CTA in the section.

This fit section was the 2nd most important feature to highlight, so the team went with this layout choice to have the section stand out from the rest of the page. In mobile, the image changes based on the fit the user taps on.

Rises + Fabrics Section

The Rises and Fabrics section have the same functionality, which was also new to the WHBM site. The user clicks on the rises and the image changes to show the rise length on the illustration. I worked with the CAD WHBM design team to get these custom illustrations on the landing page.

Mobile and tablet behave similarly, where the user taps on the section and the image and copywriting below changes.

Denim Couture

The last section was a full-width module to highlight Denim + Couture to see more denim outfits for the customer. I designed this with two model photographs with a stark black background to give contrast to the text and break up the landing page.

Final Outcome

The new landing page was very successful within months of launch. Marketing numbers are hidden for confidentiality but the new landing page saw an increase in traffic within 4 weeks - drawing traffic from email marketing, the homepage, and social media.

Conversions were higher and the customer was interacting with the leg shapes, with bootcut as the #1 clicked on when this launched in 2020. High click rates were also seen in the “Fit” section.

If I could go back and design this project I would have worked closely with the Creative Director to get all the images shot together for this project, as we had to find some images last minute. Moving forward that is a goal for the team so the images are more cohesive on the entire page. I would have also spent more time crafting the main denim leg shapes and exploring some more functionality options. But overall, the denim landing page had a successful launch.