A special Mother's Day advertorial microsite on Elizabeth Street sponsored by David Yurman
Prototype includes: home page, three mom profiles, three shoppable gift guide pages
Convert Elizabeth Street readers into David Yurman online shoppers.
Create a unique and refined editiorial microsite that represents the brands of both the jeweller David Yurman and online publisher Elizabeth Street.
Develop a responsive site structure that is easy to read and effortless to shop.
I conceptualized and developed this prototype after the original advertorial was published on Elizabeth Street. I wanted to show the advertising sales team the potential product opportunities for a future advertorial, so I created a product on my own time that represented some of the latest innovations in digital design for editorial and advertising online.
I was responsible for creating and/or editing the images of the mom profiles and the gift guide products. From retouching and cropping, to product layout and art direction, I led the creative execution for all visuals.
This project provides a responsive grid system that is not only optimized for easy reading, but also easy shopping. Whether it's jewelry or shoes, each product layout is also shoppable on your mobile device. This increases the opportunity for click-through and purchases.
Below you'll find a deeper look into the evolution of this advertorial site. The steps show below include a (1) site map, (2) sketch wireframes, (3) HTML wireframes, (4) moodboards, (5) style tiles and the final product screenshots. You can also jump straight to the live final project here.
Mother's Day on Elizabeth Street is a multi-feature advertorial sponsored by David Yurman. The home page leads to six stories: three mom profiles and three gift guides. All six stories include links to several different e-commerce partner sites, but the majority lead to David Yurman's e-commerce website.
The sketch wireframes provide a structure of the site's content. Rough sketch wireframes allow for easy iteration and idea generation, which encourages quicker problem solving. The wireframes define the best desktop and mobile layout for the home page, shoppable mom profile pages, and shoppable gift guide pages.
Once the sketch wireframes define the general sections and layouts of each page, HTML wireframes are created to provide an interactive example of the product's structure. This allows the client to review the content's flow without distraction from visual design elements. Interact with the HTML Wireframes here.
Once the wireframes are set, visual design research is done through moodboards. This moodboard is a collection of imagery and typography examples that embodies the elegant, luxurious, and feminine style of both David Yurman and Elizabeth Street.
The next step of the visual design process is to create a style tile. The style tile applies ideas from the moodboard onto specific elements of the design—from background patterns and image style to font families and colors.
Once the style tiles are complete, the visual styles are then applied to the wireframes to create the final product. You can view sample screenshots of the final site below, or you can jump straight to the live final product here.