Walmart.com – Brand Pages

When creating web pages for a new product or campaign there are a few key items you may want to create first to  streamline production. Two of these key items are moodboards and wireframes. Below are examples from my build process for brand pages on Walmart.com showing how first I set the visual direction with the mood board then define the user experience and messaging hierarchy with the wireframes.

 

Mood Board for Differin®

One important exploration in a mood board is the marriage of the target audience to the product in a believable way (pun intended).

 

Desktop and Mobile Wireframes

Both simple and complex designs can benefit from a well thought out wireframe to reveal messaging opportunities and expose roadblocks in the user experience.

 

Brand Page Designs for Differin® and Cetaphil®

 

Mobile and Desktop Brand Pages for Quaker