ReloPortal Redesign
Phase 1: Scope and Research
ReloPortal Redesign
Phase 1: Scope and Research
ReloPortal Redesign
Phase 1: Scope and Research
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.
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.
BootsWebMD Navigation concept
BootsWebMD desktop vs. mobile video player concept
Wireframes
UI Library
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.