delivering great user experiences in a multi-device world

Webinar

Delivering Great User Experiences in a Multi-Device World

October 16, 2014

2

Hello.

Christian LinseyCreative Director at Catalyst Group [email protected]

Christian Linsey has worn many hats as a designer, coder, project manager, producer, and art director. He has a Bachelor degree in English and has been making digital things for more than 10 years.

SPECIALTIES

Visual Design, Branding

UX Design

Design Systems

CSS, WordPress

Michael CallariProject Manager for NorthPoint Digital [email protected]

Michael has been has been working as a full-stack web developer since 2001. Starting as front-end developer and designer, Michael soon focused on developing database web applications in Flash and PHP.

SPECIALTIES

Technical Architect, Project Manager

PHP, Wordpress, Drupal, Python, Django

JavaScript, Angular, jQuery

Data Integration across Applications

Continuous Integration and Deployment

3

How do we deliver great user experiences in a world of different devices, browsers, and screen sizes?

4

What Is User Experience?

“Most people believe that User Experience is just about finding the best solution for your users–but it’s not. UX is about defining the problem that needs to be solved (the why), defining the types of people who need it to be solved (the who), and defining the way in which it should be solved to be relevant to those people (the how).”

- Whitney Hess

http://www.inspireux.com/2010/08/04/user-experience-about-more-than-just-finding-best-solution-for-your-users/

5

User Experience Is Not

• Making things look pretty• Applying the latest design trends• The job of one person or department• Easy

6

User Research

“No matter how much you think you know about your customers, you’ll always get more insight when you talk to them.”- Meredith Noble

• In-Person User Testing

• Remote User Testing

• Field Testing

7

Healthy Adult (Annual Check-up)

Hea

lthy

Ad

ult

(Ann

ual C

heck

-up

)

Insurance plan changes

New to the community

Doesn’t like existing doctor

Becomes too old for a pediatrician

Doctor no longer accepts insurance

Doctor moves locations

Considerations:

Do they take my insurance?

Can I a�ord the cost (if I have no insurance)?

Are they accepting new patients?

Is the location close to my home or work?

Do they treat children and/or adults?

Are they my preferred gender?

What is their experience/age?

Do I like their photos/videos?

Can I understand them in their video?

Are they the race/ethnicity I prefer?

Have my friends/colleagues recommended them?

Do I like the patient reviews/ratings I’ve seen?

Do they do perform medical tests on-site?

Do I like the size of their practice?

Do they specialize in any of my conditions?

Could be in person, on the phone or online

Which day is the doctor least busy (so I get seen on time)?

How soon can I see my own doctor? Should I see someone else instead?

Does this doctor take my insurance?

Get to the appointment

Fill out necessary paperwork

Clarify my insurance is accepted

Pay

Nurse inquires about patient health

Nurse takes vital signs

Discuss allergies / current medications / health history / family history

Ask doctor any health-related questions (may include questions about family/friends who

also see doctor for care)

Potentially get referred to an OB/GYN (or see someone at doctor’s practice if a routine procedure is o�ered there)

In fall/winter, doctor may promote the �u shot

Get prescriptions, where necessary

Note small issues throughout the year

Follow up with regular preventative measures (e.g. the �u shot)

Book next annual checkup appointment at the end of this appointment, so they don’t forget next year

Reschedule or cancel if necessary

Cancellation:Uninsured and underinsured patients are more likely to skip appointments without notice than patients who are insured. In addition, �rst-time patients sometimes cancel on short notice because they haven’t yet given payment information and won’t su�er the potential consequence of cancellation fees. These kinds of situations result in lost revenue for the doctor

Actions

Parallel Actions

KEY:

Needs

Issues

Opportunities

PotentialEmotions

Positive

Negative

Choose a DoctorTriggers for Seeking a New Doctor Make an Appointment Go to Appointment - Sign in

Get Appointment Con�rmation

See the Nurse(depends on practice)

See the Doctor Ongoing Maintenance and Prevention Something wrong: get referred to a specialist

Something wrong: do diagnostic tests

Something wrong: book a follow-up appointment soon

The school nurse may �ll in as a temporary health care provider for adolescents

Friends and co-workers may recommend a speci�c doctorUnderserved patients who have limited access to formal doctor appointments and need care or health advice may occasionally be serviced by a mobile health van in their community (St. Luke’s)

Community organizations (e.g. faith-based groups)promote health awareness within various programsthroughout the year

Choice of doctor is sometimes a decision made by the whole family Family may encourage patient to go for a checkupWomen often make appointments for their malepartners

Doctor may notify patients if certain insurance plans will no longer be accepted

Doctor reviews patient’s records before appointment begins

Doctor may ask if a student doctor can sitin on the appointment

Potential thoughts / activities during an appointment:

Negotiate with patients about lifestyle and avoid applying too much pressure so as to not scare them o�

Promote the website as a resource for patients

Feel appointments are less e�ective when neither patient nor doctor have the right resources (e.g. medical history)

Worry about time and keeping up with the appointment schedule

Use di�erential diagnosis / evidence-based research to diagnose and determine a course of action

Convince patients they don’t necessarily have conditions they researched on the internet

Sometimes frustrated with the practice’s EMR - di�cult to use while with a patient, tends to depersonalize interaction

Sometimes leave the room to check additional resources (e.g. books, internet articles)

Just-in-time diagnoses may become more common in the future (according to trend research)

Wait Wait

{Patient: annoyed at the wait

Patient: wants to feel trust, security Patient: wants to feel comfortable with relationship

Doctor: anxious; “Is the patient telling me everything?”

Doctor: anticipates a particular result based on symptomsDoctor: frustrated by EMR system

Doctor: wants to appear knowledgeable

Patient

Family

Community

Other health care providers

It is di�cult to �nd out which doctors are accepting patients without calling their o�ces.

Medicaid quotas add complexity to �nding a doctor for patients in need of �nancial assistance- a doctor may accept Medicaid patients, but be at their current limit.

Uninsured or underinsured patients may avoid coming for an annual checkup for �nancial reasons. They may only go to a doctor if they are in immediate need of care (sometimes not even then), and may even use the ER as primary care.

Patients don’t want to wait to be seen for an appointment and sometimes strategize how to avoid busy times at their doctor’s o�ce. One woman said she’d never book a Monday appointment for her children at the pediatrician because it’s guaranteed to be busy.

People said they sometimes had trouble getting through to a practice’s telephone line. They found online appointment booking very interesting as a way to avoid this frustration.

Patients would like to be able to see open time slots and book appointments online. And, if an appointment is booked online, the patient would like clear con�rmation, preferably a phone call (even if it is automated).

Patients need to feel they can trust their doctor. The quality of the consultation is determined by the quality of the patient-doctor relation-ship.

Most patients take the referral recommendations of their primary care doctor in blind faith.

Patients may come to the doctor’s o�ce having done some internet research on health conditions they suspect they may have. This can be frustrating for doctors, who must then spend part of the appointment having to disprove the patient’s self-diagnosis.

People may forget minor health questions they meant to ask while in the doctor’s o�ce.

Patients often forget to check if they need medication re�lls before attending their appointments. This creates more work for o�ce sta� later and a delay in when patient’s can obtain their medicine.

Patients won’t likely visit and trust a website for health information unless recommended to do so by their doctor.

Doctors communicate the results of tests in di�erent ways; some always send a letter, whereas others only get in touch with patients if there is follow-up needed. It’s di�cult for a patient to remember/know what to expect.

There is the potential to o�er ‘wellness’ advice as part of this consultation (this practice is recommended by WHO). Resources could be o�ered online to support this.

A tool to help patients document health issues between appointments could maximize the usefulness of each visit.

If patients don’t book an annual checkup a year in advance, they should receive a reminder. Some pa-tients complained that they used to get these types of reminders but no longer do.

Appointments could be made more e�-cient and e�ective if patients had a simple way to log minor health issues throughout the year.

Patients want the ability to reschedule or cancel an appointment online.

A reminder of the appointment would be enhanced if it also contained a checklist of what the patient should bring or do to prepare for his/her consultation.

Time could be saved if patients were provided with a way to �ll out regis-tration materials or other relevant paperwork in advance.

+

-Man: mildly annoyed at having to go the doctor

Family: concern / annoyance if patient avoiding treatment

Patient: anxious about test results; “What if they �nd something?”

Woman: obligated

Nothing wrong: plan to return next year for annual checkup

Put information about whether a doctor is accepting new patients on the practice’s page and in the “Find a Doctor” search on LVHN.org. If possible, be speci�c about a practice’s protocol regarding Medicaid patients.

ZocDoc allows patients to submit some relevant regis-tration information ahead of time. This isn’t currently available at LVHN, but some doctors do mail forms to patients in advance. Some doctors noted that patients either lose the forms or schedule an appointment too soon to receive the forms in the mail.

Parents need to remember when their children need immunizations and schedule appointments accordingly

Doctor

Parent

User Journey Maps

8

User Personas

9

What is Responsive Design?

An approach where you design one user experience that adapts to the various devices and screens on which it is viewed.

10

Benefits & Challenges

Benefits

• A future friendly website that is not tied to a specific screen size or device

• Consistent user experience regardless of device and context

• Only one set of content to manage

• Single link structure (vs. separate m-dot URLs)

Challenges

• Need to consider multiple screen sizes when designing

• Design needs to work for various contexts, e.g. touch and non-touch devices

• Browser testing challenging

• Mobile bandwidth & page load

• Developing multiple breakpoints (Hint: try to limit to 3 breakpoints)

11

7 Responsive Design Tips

12

Responsive Design Tips

Tip #1When in doubt, start designing mobile first. It will force you to prioritize content because of the small screen.

13


Tip #2Identify key objectives for each page you are designing.

14


Tip #3Look at website analytics to identify traffic patterns that might help drive design decisions.

15


Tip #4Make sure your design is touch-friendly.

16


Tip #5Keep the content objects in a consistent, collapsable order across breakpoints to help performance.

17


Tip #6Create content objects which will fit templates and integrate well with your CMS.

18


Tip #7Test your navigation and content organization with users.

19

“Ultimately, mobile navigation should be like a good friend: there when you need them, but cool enough to give you your space. A bad friend is someone who’s not there when you need someone to talk to (when navigation is absent or hard to find), or someone who’s obnoxious because they’re always around and taking up space (dude, get off my couch).”

- Brad Frost

http://bradfrostweb.com/blog/web/responsive-nav-patterns/

20

Responsive Design Process

• Create a high-level breakpoint strategy to define the number of major breakpoints and where they occur.

• Use a breakpoint diagram to design the various breakpoints side by side

• Design with a grid to help production

• Collaborate with your developers so you can get feedback during each design review

21

The mythical “hand-off”

• Ideally the developers were involved in the design process

• Walk the developers through your design deliverables and thinking

• Designers, be prepared and willing to answer questions

• There will always be things that you didn’t think of, and that’s okay.

• Build time into your project plan to provide ongoing design support.

• Use a responsive framework for development like Bootstrap 3, Foundation, etc.

22

Sometimes, it’s not realistic to do a full responsive redesign.

• You might have just redesigned your desktop site

• You might not have time or budget to undertake an entire redesign but you want your site to work better on mobile and tablet devices

23

With a retrofit,

• You don’t have to consider desktop (already done) - you are essentially “starting with a pallette”

• Navigation and information architecture is already defined.

• Design look & feel already defined

• You are constrained by pre-existing code base & CMS Note:

• If your current design doesn’t fit in a grid layout, it might not be an easy retrofit.

• Poorly organized HTML template structure might will make it harder to retrofit

You might need a responsive retrofit.

24

Retrofit Example: Lehigh Valley Health Network (LVHN)

25

Review Existing DesignsResponsive Retrofit - Process

• Identify common patterns

• Consider 4 column grid

26

Define Breakpoints

Breakpoint

4Breakpoint

3Breakpoint

2Breakpoint

1

• 320px - 539px

• 1 column of content

• Show what’s necessary

• 540px - 767px

• 2 columns of content

• Add anything that can fit

• 768px - 939px


• 940px and higher


Desktop PCs, Laptop PCs, iPad (landscape)

iPhone 5 (landscape), E-Readers

Tablets (Portrait)Smartphones

Responsive Retrofit - Process

27


Prioritize Content

28

MIN 540 px

MAX767 px

MIN 768 px

MAX939 px

MIN940 px

MAX 539 px

BREAKPOINT 1 BREAKPOINT 2 BREAKPOINT 3

MIN 320 px

Careers Find a Doctor Donate Español Careers Find a Doctor Donate Español Careers Find a Doctor Donate Español Careers Find a Doctor Donate Español

©2013

©2013 Lehigh Valley Health Network | Privacy Policy

About Us

News

Media Room

Contact Us

Become a Volunteer

Give Website Feedback

Careers

About Us

News

Media Room

Contact Us

Become a Volunteer


Careers

Privacy Policy

Learn about our special program:

Stop Texting While Driving


About Us

News

Media Room

Contact Us

Become a Volunteer


CareersLearn about our special program:

Stop Texting While Driving

We’ll help you through your life.


LEARN HOW

LEARN HOW LEARN HOW

3 4

CAMPUSES EMERGENCY ROOMS

65 40 8

PHYSICIAN PRACTICES

COMMUNITY CLINICS

HEALTH CENTERS

31 28 5

TESTING & IMAGING CENTERS

PEDIATRIC SPECIALITIES

WALK-IN CARE

CENTERS

3 4 65 40


PHYSICIAN PRACTICES

COMMUNITY CLINICS

8 31 28 5

HEALTH CENTERS



WALK-IN CARE

CENTERS

3 4 65 40


PHYSICIAN PRACTICES

COMMUNITY CLINICS

8 31 28 5

HEALTH CENTERS



WALK-IN CARE

CENTERS

NewsHow to Comfort a Friend During a Health Care Challenge

Update on Incident at Lehigh Valley Hospital-17th Street in Allentown

Lehigh Valley Health Network Via Marathon Registration Fees Increase After Wednesday

More news

»




More news »




More news »



LEARN HOW

3102©

Privacy Policy

About Us

News

Media Room

Contact Us

Become a Volunteer


Careers

Cedar Crest >

Muhlenberg >

17th Street >

Cedar Crest >

Muhlenberg >

17th Street >

3

65

CAMPUSES

PHYSICIAN PRACTICES

40 8

31

COMMUNITY CLINICS

HEALTH CENTERS


28 5

4


WALK-IN CARE

CENTERS

EMERGENCY ROOMS




More news

»



Page 9 of 11Lehigh Valley Health Network | Responsive Breakpoints: Batch One | 5/08/13 (11:21 AM)CATALYSTGROUP

Homepage

Privacy Policy


Design Key Pages

29


Mobile Navigation

Default state Menu expanded Search expanded Contact expanded

30

Don’t forget the “gotchas”

Every responsive project will have set backs and unexpected challenges along the way.

• Integration points for 3rd party sites that get pulled into your site

• iFrames

• Complex data tables

• Horizontal scrolling

• Other unexpected issues

31

Development Tools

• Responsive Inspector (Chrome Plugin)

• Webflow https://webflow.com

• Edge Reflow https://creative.adobe.com/products/reflow

• Macaw http://macaw.co

• Browser stack (Testing) http://www.browserstack.com

• Web Page Speed Test (Performance) http://www.webpagetest.org

32

So, how do we deliver great experiences?

• Allow for constant collaboration between the client, designers, and developers

• Consider the user and the business needs

• Test your designs with users

• Leverage existing technology and existing design patterns when appropriate.

• Look for ways to improve the experience, even after launch.

• Don’t let the desire for perfection prevent you from getting your product out so you can get user feedback.

33

“Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.”

- Jared Spool

http://www.inspireux.com/2009/01/21/good-design-when-done-well-becomes-invisible/

34

Questions?

Christian LinseyCreative Director at Catalyst Group Email: [email protected]

Catalyst Group 100 Wall Street, Suite 502 New York, NY 10005 Tel: 212-243-7777

@CatalystGrp

catalystnyc.com

Michael CallariProject Manager for NorthPoint Digital Email: [email protected]

NorthPoint Digital 130 West 42nd Street New York, NY 10036 Tel: 212-819-1700

@northps

northpointdigital.com

Thank you!

delivering great user experiences in a multi-device world

Design

responsive design tipstip

specialtiesvisual design

design needs

latest design trends

user personas

student doctor

time patients

user researchno matter