Business Goals

Convert Elizabeth Street readers into David Yurman online shoppers.

Design Goals

Create a unique and refined editiorial microsite that represents the brands of both the jeweller David Yurman and online publisher Elizabeth Street.

Usability Goals

Develop a responsive site structure that is easy to read and effortless to shop.

project image
project image

Skill Set Spotlight

Self-Started Prototype

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.

Photo Editing & Creative Imagery

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.

Responsive Grid System

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.

PROJECT PROCESS

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.

1. Site Map

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.

Home
Mom Profile I
Mom Profile II
Mom Profile III
Gift Guide I
Gift Guide II
Gift Guide III
David Yurman & other e-commerce partners' sites
Home
Mom
Mom
Mom
Guide
Guide
Guide
David Yurman e-commerce

2. Sketch Wireframes

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.

Home Page on Desktop and Mobile

project image
project image
project image
project image

Mom Profile and Gift Guide Pages on Desktop and Mobile

project image
project image
project image
project image

3. HTML Wireframes

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.

4. Moodboard

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.

project image

5. Style Tile

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.

project image

Final Product Screenshots

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.

Home Page

project image

Home Page with links to Mom Profile Pages

project image

Responsive Home Page on Mobile

project image
project image

Mom Profile Page

project image

Mom Profile Page with shoppable product links

project image

Responsive Mom Profile Page on Mobile

project image
project image

Gift Guide Page

project image

Gift Guide Page

project image

Responsive Gift Guide Page on Mobile

project image
project image