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

Wireframes were then executed, based on user feedback and advice of the project manager. This would provide us with a quick design and iteration process.

clear blue wireframes.png
UI Library 

Based on the clients previous UI library and requested enhancements, we were able to customize an improved UI with improvements and re-usable components to better provide consistency throughout the experience.. In some cases, we had to create for the client a gallery of images and fonts to better suit client needs.

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
Lessons Learned

With this project, we learned how to work with the client on creating a better UI, more consistent
with what industry standards, yet specific to the Clearblue brand. We also we given a strict budget, so we need to be able to use what the client had already been using. One final consideration was the implementation of responsive design methodologies to ensure consistency across all 3 platforms: desktop, tablet, and mobile.
Also, buy in was key to the successful Clearblue campaign,and throughout the programs 8 month run,
the client saw increased visitation and engagement.

bottom of page