COLUMBIA DOCTORS
INTRODUCTION
ColumbiaDoctors is the clinical practices of Columbia University Medical Center, providing cutting-edge research and health services for adults and children. The primary goal of the project was to enhance the site beyond being a search engine for doctors. This full-scale overhaul included a unique custom site for ColumbiaDoctors Children's Health and had a 4-month deadline.
ROLE
Art Direction/UI Design
ADDITIONAL DESIGN
Phase2 & Lily Nguyen
DEVELOPMENT
Phase2
GRID SYSTEM
We developed a custom hybrid adaptive and responsive grid framework. From a mobile-first perspective, the grid scales up through 4 breakpoints: Mobile, Tablet, Small Desktop, and Large Desktop.
WIREFRAMES
After extensive requirements and content gathering, the team produced gray box wireframes for virtually every page. We worked closely with Phase 2 to create a clickable prototype to string the comps together.
DESIGNS
We began our designs with a variety of element collages. Those quick studies enabled us to hone into a look and feel quickly for both ColumbiaDoctors and Children's Health. The grid and material design attributes were used to relate the layouts.
ELEMENT COLLAGES
TYPOGRAPHY & COLOR
We developed distinct–though related–type systems and color palettes for ColumbiaDoctors and Children's Health.
COLUMBIADOCTORS
COLOR PALETTE
CHILDREN'S HEALTH
COLOR PALETTE
HOMEPAGES/DESKTOP
Introducing emotional documentary-style custom photography, elevating doctor searches, clarifying navigation, and providing exploratory content were the primary goals for the homepages.
INTERIORS/DESKTOP
A content-first approach was necessary for the rich material. Impactful custom photography and cross-referenced content were also introduced to improve the user experience.
TABLET
Responsive and adaptive breakpoints were utilized and established from analytics and usage data. Cross-Columbia branding and mobile-first thinking were added to bolster the experience on mobile devices.
MOBILE
Mobile navigation was tested and vetted to increase mobile traffic. Features were considered beyond the typical reading order translation and catered to smaller screens.
RESULTS
Analytics showed immediate improvements, hitting all the goals from the previous site. The biggest were improving doctor searches, site navigation, appointment conversions, and decreasing the bounce rate.
TOOLS
