top of page

Clearblue Take Action Program

Role: Art Direction, Design, UI
Illustrator, InVision, Photoshop, Sketch
 
Objective​

Clearblue Easy wanted a bright and colorful 5 page Take Action Program that included a unique video player and modules on the home page that drove to tabbed article pages that included pregnancy tips, information and resources, as well as options to buy those Clearblue products on Boots.com. They also wanted to create a full set of ads, review modules, and Q&A modules to run on those article pages, as well as a mobile and ipad  functionality that mirrored the entire desktop experience.

 

Kickoff

An initial product kick-off meeting was set up that included all internal and UK based teams to go over brand wants and goals, as well as page visitation requirements and any graphic standards information. Clearblue offered product and logo files, but requested we help with initiating an extensive search for "expecting mum" images to facilitate overall imagery.

Whiteboard Session

 I then spearheaded a whiteboard session with the project manager and web development teams to identify navigation and page-flow layout, as well as solving the problem of a unique dynamic video module that would be mobile compatible. The challenge was for us to be able to present a dynamic video player on bot desktop and mobile platforms, while prioritizing a vast amount of information and modules throughout the experience.

cb_pages.png
Low Fidelity Sketches

I then mocked low-fidelity wireframes of the page flow and concepted versions of the mobile navigation. After initial approval, I then started mocking high-fidelity versions of the pages and finalized outstanding UI variables to pass along to the web development teams.

clear_nav.png

BootsWebMD Navigation concept

clear_vid.png

BootsWebMD desktop vs. mobile video player concept

Wireframes
clear blue wireframes.png
UI Library 
clearblue_variables copy.png
Final Mocks

We then tested desktop, tablet and mobile iterations to check for any outstanding issues or concerns, and verify that all versions were compatible with each other. We then initiated usability and beta testing to pinpoint any outstanding issues and constraints. After one more final internal approval, we sent to production for final build.

clear-blue-easy_2016_tap_0-0_v01.jpg
bottom of page