delivering great user experiences in a multi-device world
Post on 25-May-2015
407 Views
Preview:
DESCRIPTION
TRANSCRIPT
Webinar
Delivering Great User Experiences in a Multi-Device World
October 16, 2014
2
Hello.
Christian LinseyCreative Director at Catalyst Group clinsey@catalystnyc.com
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 mcallari@northpointdigital.com
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, touch and non-touch devices
• Browser testing challenging
• Mobile bandwidth & page load
• Developing multiple breakpoints (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
Responsive Design Tips
Tip #2Identifying key objectives for each page you are designing.
14
Responsive Design Tips
Tip #3Look at website analytics to identify traffic patterns that might help drive design decisions.
15
Responsive Design Tips
Tip #4Make sure your design is touch-friendly.
16
Responsive Design Tips
Tip #5Keep the content objects in a consistent, collapsable order across breakpoints to help performance.
17
Responsive Design Tips
Tip #6Create content objects which will fit templates, and integrate well with your CMS.
18
Responsive Design Tips
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 - this will define where major changes occur in your design. Limit your major breakpoints to 3 if possible.
• Use a breakpoint diagram to show multiple breakpoints of the pages you are designing
• Designing with a grid will 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
• 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, or plenty of others.
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
25
Review Existing DesignsResponsive Retrofit - Process
• Identify common patterns
• Look at 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
• 3 columns of content
• 940px and higher
• 4 columns of content
Desktop PCs, Laptop PCs, iPad (landscape)
iPhone 5 (landscape), E-Readers
Tablets (Portrait)Smartphones
Responsive Retrofit - Process
27
Responsive Retrofit - Process
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
Give Website Feedback
Careers
Privacy Policy
Learn about our special program:
Stop Texting While Driving
©2013 Lehigh Valley Health Network | Privacy Policy
About Us
News
Media Room
Contact Us
Become a Volunteer
Give Website Feedback
CareersLearn about our special program:
Stop Texting While Driving
We’ll help you through your life.
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
CAMPUSES EMERGENCY ROOMS
PHYSICIAN PRACTICES
COMMUNITY CLINICS
8 31 28 5
HEALTH CENTERS
TESTING & IMAGING CENTERS
PEDIATRIC SPECIALITIES
WALK-IN CARE
CENTERS
3 4 65 40
CAMPUSES EMERGENCY ROOMS
PHYSICIAN PRACTICES
COMMUNITY CLINICS
8 31 28 5
HEALTH CENTERS
TESTING & IMAGING CENTERS
PEDIATRIC SPECIALITIES
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
»
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 »
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 »
We’ll help you through your life.
We’ll help you through your life.
LEARN HOW
3102©
Privacy Policy
About Us
News
Media Room
Contact Us
Become a Volunteer
Give Website Feedback
Careers
Cedar Crest >
Muhlenberg >
17th Street >
Cedar Crest >
Muhlenberg >
17th Street >
3
65
CAMPUSES
PHYSICIAN PRACTICES
40 8
31
COMMUNITY CLINICS
HEALTH CENTERS
TESTING & IMAGING CENTERS
28 5
4
PEDIATRIC SPECIALITIES
WALK-IN CARE
CENTERS
EMERGENCY ROOMS
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
»
©2013 Lehigh Valley Health Network | Privacy Policy
©2013 Lehigh Valley Health Network | Privacy Policy
Page 9 of 11Lehigh Valley Health Network | Responsive Breakpoints: Batch One | 5/08/13 (11:21 AM)CATALYSTGROUP
Homepage
Privacy Policy
Responsive Retrofit - Process
Design key pages
29
Responsive Retrofit - Process
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 integration 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: clinsey@catalystnyc.com
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: mcallari@northpointdigital.com
NorthPoint Digital 130 West 42nd Street New York, NY 10036 Tel: 212-819-1700
@northps
northpointdigital.com
Thank you!
top related