Humira | Portfolio

Up

Crohn's Editorial Destination

Requested By: WebMD.com Editorial Staff

Original Product Concept Design: New York Design Team for WebMD.com

Product Finalization and Build Prep: Noel Ziegler

Programs Utilized: Sketch, Adobe XD, Illustrator, Photoshop

Content Written By: WebMD Editoral Team

Lorem Ipsum Created By: Custom program tool by Noel Ziegler and Web Development

Managed By: Editorial Team and Project Managament

Animations/Illustrations: Outsourced 3D Animation Studio

Team

The initial designs only consisted of the 1440 pixel execution and no navigational elements. The illustrations and videos were created by an outside vendor while the content was created by in house writers.

I needed to take the initial 1440 pixel design and flesh out the rest of the breakpoints, create custom graphics from the static video bumpers, create navigation, and solve for the issue of ad placement at different breakpoints.

Project Ask

Desktop Execution

Based on platform restrictions, the 300x250 ad had to remain in one spot throughout the experience. Though it looks odd on the landing page, the user would ideally not be on this page for long. Once on a body part page, the user gets information and videos on that specific body part. Some Info Modules ranged in number from 1 to 5 and each module needed to be mocked up for Editorial approval and for the Web Development team. I used a Lorem Ipsum generator I helped create to mainly fill the text so I was not having to fix mocks and modules constantly.

Below are the different executions for the various body parts for the 1440 pixel display. Each image of the woman had to be cut out from the background and most of the organs themselves had to be photoshopped to a new layer to help them stand out more.

Tablet Execution

Based on platform restrictions, the 300x250 ad had to remain in one spot throughout the experience. Though it looks odd on the landing page, the user would ideally not be on this page for long. Once on a body part page, the user gets information and videos on that specific body part. Some Info Modules ranged in number from 1 to 5 and each module needed to be mocked up for Editorial approval and for the Web Development team. I used a Lorem Ipsum generator I helped create to mainly fill the text so I was not having to fix mocks and modules constantly.

Mobile Execution

For the mobile execution, I went with a parallax style to have the videos flow one beneath the other and be easily accessible by either navigation at the top or finger flicking down the page.