the ultimate patient experience web+mobile design ... · home pages (left) on home pages, six to...

Created by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53

THE ULTIMATE PATIENT EXPERIENCE

WEB+MOBILE DESIGN SPECIFICATIONS

NewYork-Presbyterian Hospital is dedicated to offering the ultimate patient experience both in-person and online. All clinical and design decisions are made with the patients' needs as the first and foremost concern.

This document is intended for marketing staff as well as developers and designers who are building and maintaining the official web site

for NewYork-Presbyterian Hospital. All web site development must be authorized by the Marketing Department. Hero image and content

photo requirements within this document should be provided to official hospital photographers generating imagery for the site. For design

or technical questions, please contact Virgil Wong at [email protected]. For general questions or concerns, please contact Harry

Sherman at [email protected].

CONTENTSCreated by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53

10

Base Grid

1280px, 960px, and 320px Layouts

Feature Tile Characteristics

A. Feature Tiles

9

B. Responsive Design

6

Tile Arrangement Options 7 22

myNYP

21

Search

C. Headers and FooterMain Hospital Header

25

24

27

Shared Content

Footer

23

26

Center Headers

Service Line Headers

CONTENTS (cont'd)Created by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53

User Personas 48

43

47

G. Web Site Migration42

Static Web Pages Outside of Fatwire

External Sites and Services 44

Current Content Management System Size and Scope

Information Architecture

H. IA, Atoms, and Personas

Functional Module Groups

46

40Doctor Profile Template

39Search Results and Filters

F. Find a DoctorHero Photo Requirements

35

Photos and Videos

31

Text Link Characteristics

E. Content & Formatting

Hero Photo Examples

29

Secondary and Tertiary Navigation

Typography

30Hero Messaging + Multiple Heroes

Service Line Heroes

32

37

D. Hero Images

36

34

AFeature Tiles

Feature tiles are modular elements used to highlight recent or important informationsuch as news, alerts, announcements, videos, center or programs, physicians, and marketing campaigns.

FEATURE TILE CHARACTERISTICSCreated by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53

Center or Program TileCenters or programs appear in a white box at 80% opacity. Title text is Frutiger Bold 16pt #abacac. Subtitle text is Frutiger Light 13pt #666666.

Announcement or Alert TileAnnouncements or alerts appear in a dark gradient box at 80% opacity. Title text is Frutiger Bold 16pt #ffffff. Subtitle text is Frutiger Light 13pt #ffffff.

Media TilePhotos are cropped to 150 pixels by 150 pixels. Video blocks use a screenshot from the video with a play button layered on top.

Graphic TilesAny custom graphic can be created as tile. All text on graphic tiles are part of a single 150 X 150 pixel image.

InteractivityClicking or tapping on a feature tile can have one of three results:

1. A fly-over window appears with additional information about the feature tile contents and a link to "Learn More" (see right).

2. A Lightbox window appears over the existing web page to play a full-screen video or slideshow.

3. The user is immediately directed to another web page.

Tile PairingA photo tile can be paired with a text block. Selecting either tile will have the same result.

All tiles are 150 X 150 px

TILE ARRANGEMENT OPTIONSCreated by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53

Home Pages (left)On home pages, six to eight feature blocks are displayed around the central hero image.

Section Pages (top)On main section pages, blocks can be arranged horizontally across the page below the H1 tag.

Detail PagesOn detail pages, blocks are arranged vertically as matching pairs within the right-hand column.

Multiple Tile GroupsOn home and section pages, multiple groups of tiles may appear. On desktop computers, the user will see arrows on either side of the blocks upon mouseover. On mobile devices, the user can swipe left or right to see additional tiles.

BResponsive Design

NewYork-Presbyterian's responsive design accommodates web and mobile devices with screen widths ranging from 320 to 1140 pixels.

18-Column Layout12-Column Layout6-Column Layout

BASE GRIDCreated by Tim McEvoy | Last Modified on Sat Feb 15 2014 | /53

80 Pixel Column ModuleThe 80 pixel column module is the foundation of our baseline grid. All elements are built upon multiples or divisions of this measurement.

60px columns + 20px margins = 80px grid module

The 80 pixel column model can easily be divided into multiple screen formats:

▪ 320 X 480 px

▪ 480 X 800 px

▪ 960 X 640 px

▪ 768 X 1024 px

▪ 960 px

▪ 1140 px

BASE GRID: 320 X 480Created by Tim McEvoy | Last Modified on Sat Feb 15 2014 | /53


320 x 480

iPhone, 3G, 3GS

Older Android Phones

BASE GRID: 320 X 480 ExampleCreated by Tim McEvoy and Virgil Wong | Last Modified on Sat Feb 15 2014 | /53


320 x 480

iPhone, 3G, 3GS

Older Android Phones

BASE GRID: 320 X 480 ExampleCreated by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53

320 Pixel WidthAll header elements are visible at the 320 pixel width: logo, search, social media, mynyp login, and service line menu.

Both the mynyp window and the service line menu window open upon tap and occupy the 320 pixel width (with margins, as seen in the center image to the left).

H1 title and content photo are reduced in size to fit the narrower width. Content text flows into the single column.

Feature blocks, which appear in a right-hand column on larger resolutions, are displayed here side-by-side below the content text.



480 x 800

Current Android Phones

Small Android Tablets



960 x 640

iPhone 4

Future iPhones

Future Android Phones



768 x 1024

iPad

HP Touchpad

Some Android Tablets

BASE GRID: 960Created by Tim McEvoy | Last Modified on Sat Feb 15 2014 | /53


960px width

Standard Web Browser

BASE GRID: 960 ExampleCreated by Virgil Wong and Tim McEvoy | Last Modified on Sat Feb 15 2014 | /53


960px width

Standard Web Browser

BASE GRID: 1440Created by Tim McEvoy | Last Modified on Sat Feb 15 2014 | /53


1440px width

Widescreen Web Browsers (Laptop and Desktops)

BASE GRID: 1440Created by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53


1440px width

Widescreen Web Browsers (Laptop and Desktops)

CHeaders and Footer

Web site headers may vary between different NewYork-Presbyterian web properties.The footer however is both persistent and consistent across all sites.

MAIN HOSPITAL HEADERCreated by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53

NYP.ORGThe main hospital header includes the primary logo, social media icons, search, a pull-down menu, a primary navigation menu, and a sign-in for myNYP (our portal for accessing your hospital visit records)

The pull-down menu titled "Choose a service" takes you Users can select from the top service lines of the hospital, including cancer, cardiovascular, children's health, digestive, neuroscience, orthopedic, transplant, and vascular. This list should NOT exceed 10 items. A link for "All services" appears at the bottom of the pull-down menu.

When you are NOT on the home page, a link appears at the bottom for "Back to Home". This link always takes you back to nyp.org, which is the one and only "home" page.

This is the primary navigation of the main hospital web site. Any link from this menu maintains the same header seen here.

The pull-down menu allows you to navigate to different service line web sites – which will display different headers (see next page).

The "All services" link takes you to the same page as "Our Services" in the main navigation menu. The header does NOT change.

SERVICE LINE HEADERSCreated by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53

NYP.ORG/SERVICELINEExamples: nyp.org/heart, nyp.org/neuro, nyp.org/cancer, childrensnyp.org

When the user selects a service line, the logo changes to match the given clinical area, e.g. "Heart" for Cardiovascular. The links under the pull-down menu also change so they are specific to the chosen service, e.g. "Find a Doctor" becomes "Find a Heart Doctor" and "Request an Appointment" is constrained to cardiologists and CT surgeons. A slighter darker box surrounds the links to show they are service line-specific. The logo points to the service line home page (not NYP.ORG).

This is the primary navigation of the service line. Every link here is specific to the service line, e.g. "Find a Heart Doctor". The service line header stays persistent unless the user changes the pull-down menu selection. The grey box shows that the navigation links are associated with the service line.

The logo is always specific to the service line.

"Search all" searches all service line content. Search filter allows users to view only service line doctors, health content, etc.

Social media icons go to service line-specific profiles, if any. They default to the main NYP social media sites if none exist.

Children's Health logo

Centers associated with the service line may appear below the header.Any Center logos must be placed side-by-side.

Breadcrumbs orient users to the overall site structure. "Home" goes to

NYP.ORG, followed by a link to the main service line starting page, and

then interior sections and pages.

CENTER HEADERSCreated by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53

NYP.ORG/CENTERExamples: nyp.org/perelman, nyp.org/milstein, nyp.org/cadc

This functionality also applies to centers and programs within a service line. For example, the Perelman logo appears on the Perelman-specific site.

Centers and programs typically are affiliated with either Weill Cornell or Columbia. They are essentially their own self-standing web sites, but visually similar to all NYP web properties – and connected to all other NYP sites.

Do NOT use the NYP/WCMC or NYP/Columbia logos in the header as the text becomes too small.

This is the primary navigation of the center web site. All content is specific to the center. This allows each center to have "their own web site" while being part of the overall NYP design system.

The logo is always specific to the center.

Breadcrumbs orient users to the overall site structure.

"Home" goes to NYP.ORG, followed by a link to the main

service line starting page, then the Center starting page,

and finally subsequent sections and pages.

Note that the service line pull-down menu disappears. The pull-down menu is too confusing to appear on center-specific web pages. You can get back to the service line site here in the bread crumbs.

SHARED CONTENTCreated by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53

Same Content,Different HeaderOn the left image, you can see the default header that appears for all main hospital web pages. By selecting from the service line menu, you go to the service line home page. Clicking on links in the main navigation takes you to a service line branded page (see right image). The service line menu gives you full access to all the other services – and a link back to the home page (NYP.ORG, not the service line home page).

SEARCHCreated by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53

Similar to Amazon.com, a user can filter a search by content category, e.g. "Doctors" or "News", or search only for children's health information.

myNYPCreated by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53

Clicking or tapping the "myNYP Sign In" button produces a window with login option as well as a button for new user registration.

FOOTERCreated by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53

LogoA white version of the NewYork-Presbyterian Hospital logo appears in the footer. The image links back to the home page: www.nyp.org

Static LinksThe text and links in the footer are static. In the top line, Columbia University Medical Center links to www.columbiadoctors.org, and Weill Cornell Medical College links to weillcornell.org.

The text links in the bottom line should not exceed the width of the top line: About Us, Press Room, For Professionals, Careers, Ways to Give, Volunteers, Disclaimer, Privacy Notice, and Contact Us.

The footer is persistent across all NewYork-Presbyterian web properties. Every web page, including service line web sites, have the same identical footer.

DHero Images

Hero images appear on the main hospital home pageas well as on the front pages for service lines, centers, and programs

HERO PHOTO REQUIREMENTSCreated by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53

Hero PhotosThe hero photos for the NYP home page – and front pages on service line, center, and program web sites – must be professionally photographed in a studio on a white background with the:

▪ Subject facing forward and looking into the camera

▪ Head and torso visible

▪ Crystal clear focus and stronger contrast on the subject's face

▪ Option of having the depth of field adjusted to show other parts of the head and body slightly out-of-focus

▪ Subject's facial expression conveying warmth, health, contentment, intelligence, and a unique personality (no "posing for the camera" fake smiles)

▪ Lighting on the subject creating volume and depth of form

▪ Color palette reflecting brighter colors, warmer temperatures, naturalistic hues and moderate levels of saturation.

The resulting photo should be resized to 890 px in height (the footer may cover the bottom of the image). The white background should be made transparent, and the file should be saved as a PNG to blend with the gradient background.

HERO MESSAGING + MULTIPLE HEROESCreated by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53

Patient TestimonialsThe hero message should fade-in after the rest of the page loads.

Hero messaging should appear as a quote spoken by the patient in the photograph. It should be no more than 140 characters including spaces. A "More" link points users to a web page with additional information about the patient or the service he or she received.

Up to five dots indicate multiple hero images and messages. Like a slideshow, the images and messages will fade-in and fade-out by itself without any user interaction. The user may click on the dots to go back or forward to any specific image/message.

SERVICE LINE HEROESCreated by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53

On service line home pages, the same hero photo and messaging functionality can be present. Or the photo can simply be a static image.

On service line home pages, the service ranking by U.S.News & World Report as well as other accolades should be included as shown. This block can be added to the core hospital home page as well to promote the Honor Roll ranking.

HERO PHOTO EXAMPLESCreated by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53

EContent and Formatting

This section includes details on secondary and tertiary navigation systems, typography treatment, and custom page layouts.

SECONDARY AND TERTIARY NAVIGATIONCreated by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53

SecondaryThe secondary navigation, if needed, appears as a horizontal menu below the H1 tag, page tools, and the optional photo or video. The character limit (and number of buttons) is restricted to the width of the image or video. The secondary navigation becomes a pull-down menu when the browser width shrinks in the responsive design.

TertiaryThe tertiary navigation, if needed, appears as a vertical menu justified right in the content body. These links are children pages of the parent section from the secondary navigation, e.g. "About this Service", as pictured above. The link name is restricted to the width of the button. No more than ten links should appear in the tertiary navigation. No further navigation levels are permitted.

TYPOGRAPHYCreated by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53

H1Frutiger Light #7b7b7bAll caps via CSS

H2Frutiger Light #000000All caps via CSS

Body TextFrutiger Light #333333

TEXT LINK CHARACTERISTICSCreated by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53

In the body text, a 1px #bababa line appears below body links. The text and underline should turn to #000000 on the hit state.

Primary navigation links appear without any specific link styling

Upon mouseover (and hit state), a 1px #bababa line appears under the text

Bottom text link appear without any styling until mouseover (and hit state) when a 1px #bababa line appears under the text

PHOTOS AND VIDEOSCreated by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53

Media Dimensions and PlacementAll large content images or videos should measure 894 X 410 pixels, which then scale down proportionally within the responsive design. Smaller photos in the body text can measure up to 433 X 198 pixels, as seen in the Press Room layout on the right. Feature blocks in the right-hand column, as indicated previously, are all 150 X 150 pixels.

FFind a Doctor

Find a Doctor is one of the most crucial conversions for the web site. This section describes how patients search for doctors, filter results, and view an individual physician profile.

SEARCH RESULTS AND FILTERSCreated by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53

When the user selects "Find a Doctor" or filters a search by "Doctors", the results appear as shown above. The user may further filter these results in the left-hand column.

If the user conducts a general search, results are grouped by content category, including the doctor highlights (as feature boxes) indicated above.

DOCTOR PROFILE TEMPLATECreated by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53

Physician Home PageThe doctor profile template includes the large photo/video, secondary navigation (and tertiary navigation, if needed), feature boxes, and additional information (with expand/collapse options) in the right-hand column. "Locations and Hours" should be the default item that is open when the user first views the profile.

GWeb Site Migration

As of March 2014, the NYP.ORG web site is a combination of pages within the hospital's Content Management System (CMS), static pages on the hospital's web server, and web sites hosted externally to the hospital. This

section defines the scope of disparate pages that will need to be migrated into these new design specifications.

CURRENT CMS SIZE AND SCOPECreated by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53

Fatwire Content Management System The main NewYork-Presbyterian web site (NYP.ORG) is currently running from an old version of Fatwire, which is not currently supported. Fatwire also manages the ChildrensNYP.org/mschony web site which totals 1,149 pages and will also need to be migrated into the new design specifications.

▪ Total number of NYP web pages in Fatwire: 9,500

▪ Total number of NYP assets and recommendations in Fatwire: 6,812

▪ Total number of asset types: 18

▪ Total Content Categories: 26

▪ Total Content Pages: 4,081

▪ Total CSElements: 119

▪ Total Documents: 223

▪ Total Document Parents: 3

▪ Total Facilities: 6

▪ Total Facility Category: 1

▪ Total Links: 470

▪ Total Locations: 170

▪ Total Media: 54

▪ Total Media Parents: 6

▪ Total Pages: 9

▪ Total Recommendations: 51

▪ Total Specialties: 96

▪ Total Taxonomy Keywords: 1,405

▪ Total Templates: 69

▪ Total Visualizations and Tools: 74

Features

Find a Doctor and Request an Appointment are currently applications built to work with the Fatwire Content Management System – and will need to be recreated as part of the new site development.

STATIC WEB PAGES OUTSIDE OF FATWIRECreated by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53

HTML Web Pages and Big MediumThe following web sites were created outside of Fatwire. The numbers in bold indicate the number of HTML pages for each site. Two of the larger sites, nypcancerprevention.org and nypsystem.org, use a blogging software called Big Medium so the content is structured and easier to import. The remaining sites are all composed of individual HTML, CSS, and JS files.

▪ www.nypaging.org - 245

▪ http://www.nypcancerprevention.org - 1,298

▪ http://nyp.org/komansky - 935

▪ http://nyp.org/nutrition - 155

▪ http://nyp.org/transplant - 8

▪ http://nyp.org/digestive - 4

▪ http://nyp.org/cancer - 8

▪ http://nyp.org/heart - 4

▪ http://nyp.org/neuro - 23

▪ http://nyp.org/psychiatry - 2

▪ http://nyp.org/vascular - 3

▪ http://nyp.org/womens - 643

▪ http://nyp.org/acn - 13

▪ http://nyp.org/cadc - 168

▪ http://bpdresourcecenter.org - 83

▪ http://monahancenter.org - 257

▪ http://nyp.org/allenhospital - 8

▪ http://nyp.org/amazingthings - 68

▪ http://nypemergency.org - 966

▪ http://nyp.org/autism - 4

▪ http://nyp.org/deathstalkerscorpion - 6

▪ http://nyp.org/international - 48

▪ http://nypheart.org/milstein - 4

▪ http://nypsystem.org - 2,192

▪ http://nypheart.org/perelman -20

▪ http://nyp.org/alumni - 6

▪ http://nyp.org/obesity - 138

▪ http://nyp.org/socialwork -116

▪ http://nywccouncil.org - 147

EXTERNAL SITES AND SERVICESCreated by Virgil Wong | Last Modified on Sat Feb 15 2014 | /53

NewYork-Presbyterian has sites and services managed externally by outside parties. The new CSS design template, based on these specifications, will need to be provided for the following sites and customized as needed:

Chat with a Referral Specialisthttps://secure.beryl.net/chat/nyp/chat.asp

Events Calendarhttp://events.nyp.org

MyNYPhttps://mynyp.org/MyNYP.aspx

Pay My Billhttps://nyp.ixt.com

Real Estatehttp://www.nyphrealestate.com

Human Resourceshttp://careers.nyp.orghttp://nursing.nyp.org

HIA, Atoms, and Personas

Information architecture, functional module groups (atoms), and six personas have been defined to understand typical users of the NewYork-Presbyterian web site.

INFORMATION ARCHITECTURECreated by Tim McEvoy | Last Modified on Sat Feb 15 2014 | /53

FUNCTIONAL MODULE GROUPS (ATOMS)Created by Tim McEvoy | Last Modified on Sat Feb 15 2014 | /53

PERSONA 01Created by Tim McEvoy | Last Modified on Sat Feb 15 2014 | /53