MY ROLE: Digital Graphic Designer
OUR TEAM: Art Director, Creative Director, Copywriter, Marketing Manager, Development
White House Black Market has been a leader in women's workwear fashion. In 2020, I was the designer on the redesign of the denim landing page, working closely with the development and creative teams. 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.
Build a new denim page with shopping functionality
The previous denim guide did not have shoppable features so having shoppable content within the leg shapes - Skinny, Slim, Straight, Bootcut and Flare was the #1 goal of the project. In turn having the functionalities would also increase conversion and AOV on the page.
Make WHBM a leader in denim
The marketing team wanted a more robust landing page and content for the White House Black Market customer. In turn, making WHBM a leader in the denim industry with key information from fits to rises, fabrics and innovations.
Competitive Analysis
To understand how competitors delivered their denim guide, we analyzed other brands within the fashion space.
Data Analytics
We worked with the internal site team to understand various things about the WHBM customer: Do users scroll horizontally in mobile? How does the user like to shop online? What platform is the user utilizing the most, desktop, mobile or tablet? To name a few.
Design System
WHBM had an existing design system for type and some existing modules, but the team was open to creating new modules to make the new denim guide work.
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 key denim features, as the previous page had more product images and less information.
Once the sketches and low-fidelity wireframes were done, I worked closely with the Art and Creative Director to get approval on the design. We explored lots of versions and these were the top 2 layouts chosen by the creative, marketing, and development team. Ultimately, we chose the left design based on the functionality the development team would create for us. We were also on a tight deadline, so all teams worked together efficiently and quickly so the page could launch for the Fall season.
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 or the user can shop all denim. In mobile, the user can scroll through the leg shapes and tap on the denim CTA.
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.
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, showcasing the rises and where it sits on the waist.
Mobile and tablet behave similarly, where the user taps on the section and the image and copywriting below changes. 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.
