This document outlines a proposed user experience (UX) process and design strategy for a healthcare company to redesign their suite of healthcare applications using a "mobile first" approach. It begins by evaluating the company's existing applications and UX process, identifying gaps such as a lack of defined UX goals and process. It then proposes adopting Jesse James Garrett's 5-layer UX framework and a user-centered design process. Key recommendations include defining UX goals, conducting user research, creating personas and wireframes, and following a mobile-first strategy to develop a cross-platform experience.
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Mobile First Design Strategy & Process
1. “MOBILE FIRST”APPLICATION DESIGN STRATEGY:AHEALTHCARE
COMPANY
• Email : subhasish.karmakar@gmail.com
• LinkedIn : http://www.linkedin.com/in/subhasishkSubhasish Karmakar
Independent UX Consultant
Portfolio
Download PDF : It's a Four-Screen World
View Online : It's a Four-Screen World
2. What’s inside
This evaluation report was created during a consulting engagement with a Multi National Health Care Product company
which was in the process of undertaking a major redesign activity for it’s suite of healthcare applications across web
mobile and tablet. I was engaged by the company to evaluate their existing Applications and olso the existing design
process, and provide the a set of recommendations and guidelines for improvement. In this assignment my role was to :
• Evaluate the existing design and development process
• Evaluate existing applications
• Identify gaps in the process
• Recommend a design process and framework that helps them to :
• Build in-house UX practice
• Hire Right skills
• Allows them to build responsive applications to meet the needs of their customers
• This report focuses primarily on the UX process evaluation and recommendation for building cross platform
application design, using “ mobile first approach”
3. Agenda
1. What your competitors are doing
2. Pain points with the existing Platform ( Medseek internal & Customer feedback)
3. Business goals for Influence
4. Current gaps in the UX process
1. Lack of defined UX goals
2. Lack of defined UX process
3. Some Assumptions and misconceptions about UX & Mobile First
5. Proposed UX process
1. Garrett’s 5 Layer UX Process & User Centered Design ( UCD)
2. Understanding Medseek UX layers
3. Adopting UCD at Medseek
6. Understanding Mobile First
1. What is Mobile First
2. UX process for successful Cross platform & Future safe products
7. Realistic Plan for achieving the UX & Business goals
1. Skills & Experience
2. Resource Plan
3. High level Schedule
8. Appendix
5. Cerner : Power Touch
If you want you can watch the video describing their process here :
http://youtu.be/VoKUwDuBcN8
Awarded for the best clinical healthcare experience
• Completely redesigned the Clinical Healthcare application
• Followed end to end User Catered Design process
6. ZOCDOC :Appointment scheduler
www.zocdoc.com
“An Application that dramatically simplifies finding a doctor &
scheduling an appointment”
Let’s watch this video which tells the story about their product design
process :
http://www.youtube.com/watch?feature=player_embedded&v=iyjwINCPVNw
http://www.zocdoc.com/
Product explanation:
http://vimeo.com/35100481
Awarded the most useful and usable
consumer healthcare service 2013
7. Other Healthcare Product Companies Investing in UX
McKesson partners with User Experience agency to define the vision for Medical Management and Coordinated Care
Healthways forms a subsidiary UX organization “MeYou Health” to solve the ever increasing engagement & adoption challenge in Healthcare
www.meyouhealth.com
Aetna partner with an UX agency to fulfill their vision of 21st Century Cross Platform Healthcare Information delivery
9. Some known and unknown facts
According to recent research :
• A Massive 70% of the people who enroll to patient portal never come back
• In each successive visit participation is cut in half
• 2nd visit 30%
• 3rd Visit 15%
• 4th Visit 7%
• Find the report here : http://vimeo.com/40023280
• Today’s healthcare products are not just competing against other healthcare products, but it’s competing against any
other commercial products ranging from Angry birds, Mint, Flipboard, Facebook or any other application
• Peoples attention span is diverted across multiple online products. The Healthcare Product companies needs to be
very clear on how that attention can be diverted towards their product, and how that attention can be used once
it’s granted to them
• In 2012 50% of the Americans used a smart phone. By 2014 mobile will become the most common way of
accessing information over Internet.
10. What’s the Point…
• Every successful product in the market today followed the same process. So what I am going to recommend is
nothing new, it’s the standard process for product development
• Healthcare companies are understanding the importance and criticality of User Experience, and investing
accordingly
• Healthways, Atena, Cerner, ZOCDOC, MeYou Health all have a clear & defined UX strategy and goals. They are all
following the same Process to rebuild their products
• Whether or not you invest time on User Experience, ultimately what you deliver to the end user is an “Experience”.
And most of the time if it’s not planned upfront it end up being a crappy experience
• User experience is not an option but a necessary step for successful product. In fact it’s one of the the very first
steps that needs to be taken
• To be future safe ( device agnostic / responsive) you need to have a responsive UX process and strategy. UI
framework is not same as UX strategy.
11. YOUR & YOUR CUSTOMERS BIGGEST COMPLAINS
Challenges with the existing platform
12. Stakeholders & Employees
• “Our Applications doesn’t talk to each other. There are lot of redundancies across our offerings. We need an unified solution”
• “There are lot of inconsistencies in the UI across the application”
• “Users are not very clear what they are supposed to do”
• “Our UI is not at all intuitive”
• Our patient portals doesn’t look like a consumer product at all. It’s becoming increasingly difficult to sell it to sophisticated
customers
• It takes too much time to implement. We sell it as a product but eventually end up being a service provider for each
customer.
• staff portal workflows are too complex. Very difficult for hospital staffs to use. It’s counter productive.
• Too much customization leads to inconsistency. Lot of design decisions are left in the hand of the Administrators and the
implementation team
• We do not have a structured process to provide better experience
• 2/3rd of the issues logged by our clients are UI related. Example Out of 173 issues logged by Dignity health at least 70% are UI
related
13. Customers echoing the same…
• Portal is not discretely intuitive
• Specific functionality impedes workflow
• Patient adoption is at risk
• From usability report shared by Dignity Health
14. BUSINESS GOALS FOR “INFLUENCE”
One Platform, Unified experience, multiple devices
15. Why Influence? Key Business Goals
• Ensure Interoperability across applications. Reduce redundancy : One unified Platform
• Increase patient adoption, and market reach through improved user experience
• Make the platform future ready. Device agnostic : “Go Mobile”
• Reduce implementation time. Save cost
17. Are there any UX goals?
• The User Experience goals are NOT Defined. This is the first and perhaps the biggest gap in the process
• There are different expectations regarding User Experience across different levels. But No Defined GOALS
• “We need better experience”
• “Our UI is really bad”
• “UI Is very inconsistent”
• “ UI looks very drab. It’s not trendy”.
• “Our UI should be like any other consumer products”
• These generic statements needs to be translated into clear, measurable User Experience Goals
• User Experience Goals should always be aligned with the organization’s business goals.
18. How to define UX Goals
• Keep it high level, but make sure the goals are measurable
• Ensure it’s aligned with the business goals
• Recognize there are different user groups ( Patient, Staff, Admin). The User experience goals are different for
each of them
• UX goals should be defined separately for each portal ( Patient, Staff, Admin, Engaged & Non engaged
Customers)
19. UX & Business Goals Examples : Influence
UX Goals Business Goals
Patient Portal :
Increase Patient retention by x% by providing easy access to content across
platform
Users should be able to find a doctor within X seconds. Or the time taken to
find a doctor should be reduced by x%
Users should be able to find and successfully complete the key tasks on a
given page X% of the time
• Increase Patient Adoption
• Ensure consistency across Platform
Staff Portal :
UI flows should be optimized so that the time taken to complete a task
reduces by 50%
Reduce human error by X%
• Increase staff efficiency
• Increase adoption rate
Platform
Design base templates and themes in a way that reduces the need for client
specific application customization by 30%
• Reduce implementation time
• Same customer support and implementation cost
• Ensure faster go to market
Mobile :
Design UI which enables users to complete a task from any device as
efficiently as from the web
Design a future safe platform
20. HOW TOACHIEVE THE UX GOALS
Recognize the need, define a process, build a team,
focus on execution
21. How to achieve UX Goals
Once the UX goals are defined it can be achieve by:
1. Acknowledge the need to invest strategically in User Experience
2. Take a User Centered Design approach to Product Development.
3. Involve User Experience team from the time of Product definition ( inception)
4. Define a clear process and adhering to it
5. Build a team, bringing in the right people who can own and drive the process
6. Clearly define User experience tasks & deliverables for each phase of the project
7. Develop your UX deliverable plan and align with your overall project plan
22. EXISTING PROCESS : EVALUATION
No defined Process, UX is an afterthought, lack of
resources ( Gap # 2)
23. What is the existing process
• There isn’t any defined process. UX is more of an afterthought
• UX process is not designed or aligned to meet the Vision of the organization (which is to completely rebuild the
platform which is future ready, usable and meets the market needs)
• To meet the Medseek vision the UX for the platform needs to be defined grounds up. Patchwork won’t help.
• Medseek is investing heavily on technology. Defining, rebuilding the architecture, framework from grounds up.
That’s good. But that’s not enough. Equal emphasis be given to User experience of the product
• The UX process needs to be defined, followed and aligned with technology vision
24. Some misconceptions and assumptions…
“We are building a very robust UI framework ( Bootstrap). So mobile experience will be great”
- Incorrect!
- Framework only helps in easy porting of content from web to mobile.
- Framework can’t automatically provide better mobile experience
- To ensure great mobile experience, user experience for mobile needs to be “defined” and designed grounds up.
- That’s called “Mobile First "approach. “Mobile First” is NOT just about choosing an UI frame work
“Our mobile development is not going to start this year. So at this moment it’s not our priority. There is no need to focus on
Mobile UI now”
- Incorrect
- Development can happen any time. UX should start Now! This will save significant cost during web as well as mobile development
- This is pretty much standard UX process for any responsive/Adaptive design. UX starts designing for the mobile along with web. ( Will
explain the rational, and the process in later slides)
26. The User Centered Design( UCD) Process
• The process focuses on putting the user at the center of any product (which involves human interaction)
development.
• Requires holistic thinking and approach.
• Emphasis is given on defining requirements which are derived from deep understanding of :
1. User behaviors and goals
2. User tasks and scenarios
3. System/Technology needs that help users to meet those goals
30. 30
The Skeleton Describes Screen Layout
and Functional Compartments in the Screen
Surface
Skeleton
Structure
Scope
Strategy
31. 31
Structure Defines Navigation from
Place to Place in the User Interface
task panes
modal dialogs
modal wizards
Surface
Skeleton
Structure
Scope
Strategy
32. 32
The Places in the User Interface
are Built to Support UserTask-Centric Scope
user tasks:
• Schedule an appointment
• Find a Doctor
• Register for a health even
• Manage personal and family
health record
…
Surface
Skeleton
Structure
Scope
Strategy
33. 33
Business Goals Drive User Constituencies
and Contexts SupportedTo Form Strategy
business goals:
• Increase Patient Adoption
• Attract & retain high value patients by
providing” just in time” information
• Increase market share within large Healthcare
providers
user constituencies:
• Age group-30-70
• Educated, sophisticated
• …
usage contexts:
• Desktop & Laptop at home or office
• Smart phones from any where
• Tablets while lying on the couch
Surface
Skeleton
Structure
Scope
Strategy
35. Organization’s UX layers
CONTROLS : RESPONSIVE AND REUSABLE
Ensure UI consistency Reusability to reduce development time
Build Library of UI components for all
platforms ( Mobile/Tablet/Web)
designed components based on usability
standards
APPLICATION : ELEGANT, SMART AND RESPONSIVE
Design efficient workflow
Increase Patient adoption.
Retain High Value customers
Increase staff Adoption
Increase staff efficiency
THEME : PROVIDE MORE SCLECTION LIMIT CUSTOMIZATION
Productize the solution. Reduce customization Reduce implementation time Faster go to Market
INFLUENCE : ONE PLATFORM ONE EXPERIENCE
Increase Interoperability
Reduce Redundancy
Make it Future Safe
( Go Mobile)
Bring standardization across application
offering
Increase sales
You need an UX approach that operates on 4 layers.
This diagram explains why :
36. 36
Surface
Skeleton
Structure
Scope
Strategy
Aligning UCD process for Influence
Application & Control
Application
Influence Platform
Theme
Application & Control
Application & Control
• Build UI patterns Library for all platforms
• Build Icon and graphics library
• Create UI implementation guideline and style guide
• Create Branding and visual design for application
• Detail Heuristic review of all the existing applications
• Define user profiles and personas for each user group ( Patient, Staff, Admin)
• Information architecture and content strategy for Patient Portal with Mobile
First” approach
• Optimized workflow and UI flows for staff portal
• Create wireframes and prototype for critical modules in each portal ( Patient &
Staff is must) for Mobile & web
• Define application specific branding guideline
• Usability test
• Conduct User research/ Heuristic Evaluation platform level
• Define common Patterns across application
• Create personas
• Create wireframes ( Mobile/Web) for common platform features
• Conduct Usability test
• Expand the portal themes to provide more flexibility in selection. Limit
customization
Garrett’s UX layers Medseek’s UX layers High level UX activities at each Layer
37. 37
Detail UX activities at each Layer
UX Layer UX Activities Goals High level deliverables
Influence Platform • Heuristic & Expert evaluation of all the applications (
Empower, Influence)
• Identifying common goals, tasks and features for the
platform
• Define consistent UX flows, wireframes for common tasks
• Define Mobile Use cases for each, design for mobile and
tablets
• Conduct usability test with the old application
• Conduct usability test (Mobile & Web) for the newly
designed wireframes
• Establish a common branding and design language for the
entire platform
• . Ensure UI consistency
across platform
• . Remove redundancy of
features across application
suites
• Reduce development time
by building reusable UI
library , and fixing UX
issues early in the process
• Build foundation for Mobile
readiness
• Heuristic Evaluation report. Outlining
the key challenges and usability
issues across different applications
• List of identified common tasks and
features common across all
applications
• Common UI flows designed for all the
common features
• Wireframes for Mobile Tablet and
Web
• Interactive prototype for Mobile and
Web
• Usability test plan
• Usability test report
Theme . Review and evaluate existing implementation of the portal
across different clients ( Dignity, Bay Care etc)
. Note the differences and the similarities across differentiation
Define UI patterns. Build those as part of the product.
Enhance the UI themes.
Provide more choices to the
client.
Limit customization per client
provide more selection.
Example :
www.wordpress.com
www.weblee.com
39. WHY MOBILE FIRST & WHAT IS MOBILE FIRST
Responsive design is not just about UI Framework
40. What is not Mobile First/ Responsive
• It’s not about deciding or building an UI Framework ( Bootstrap).
• Selecting a framework is a technology strategy, which will help in porting web into Mobile. There needs to be an
UX strategy to complement the Technology strategy
• The framework itself will not ensure ideal user experience for Mobile users
• To build a successful responsive application there is a need defined content strategy, Information architecture
• For better user Experience on mobile, the Mobile User experience needs to be designed grounds up ( Mobile
first)
• Mobile Development can happen later but your Mobile Experience strategy should be defined NOW.
41. What is Mobile First/ Responsive design
• There are plenty of materials available on the web defining responsive design process. I won’t cover that in
depth.
• But at a high level it’s very similar to the process articulated in this document with the focus on Mobile
• The Process is to design the experience from the “Bottom up” ( smallest screen first) with focus on content.
• Forces to first define the most important content/ Task to be displayed when the screen gets smaller
42. Responsive workflow : 10 steps
• 1. Content inventory
• 2. Content reference wireframes
• 3. Design in text (structured content)
• 4. Linear design
• 5. Break point graph* ( it’s not same as the Media Query Break point )
• 6. Design for various breakpoints
• 7. HTML design prototype
• 8. Present prototype screenshots
• 9. Present prototype after revision
• 10. Document for production
46. The change in content and Navigation structure is defined by the content strategy and not by the UI framework ( bootstrap)
50. Breakpoints & the ever changing device landscape
• It’s impossible to design for
specific devices
• The design needs to be device
agnostic to be future safe
• A defined content strategy (
what’s the most important
content that users should see,
irrespective of the devices they
are using) is the way forward
• Media Query, Fluid Grid, floating
media are excellent technology
framework, but that doesn’t
decide content priority
• Mobile First means taking
“content first” approach
53. More on Responsive Process
Stephan Hay’s Responsive Design Workflow
• http://www.slideshare.net/stephenhay/mobilism2012
Viljami Salminen’s responsive workflow
• http://viljamis.com/blog/2012/responsive-workflow/
Mark Boulton’s Responsive workflow notes from the Responsive Summit:
• http://www.markboulton.co.uk/journal/comments/responsive-summit-workflow
Drew Clemen’s Design Process in the Responsive Age
• http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/
Ben Callahan’s Hands-on Responsive Web Design
• https://speakerdeck.com/u/bencallahan/p/hands-on-responsive-web-design?slide=12
Yellow Pencil’s Responsive web design process
• http://responsiveprocess.com/
55. UX Roles & Resources For Influence
Roles Deliverables Location Number of
resources
UX Architect Conducts Heuristic evaluation across platform
Conducts user Research, Usability test
Defines UI Flows, Components, wireframes
for the platform
Manages UI Patterns Library
Oversees UI Execution
Experience
Onsite ( 3-4 months)
Offshore ( During development, with
flexibility to travel on Need basis
• 1 Person (
onsite)
• 1 Person (
offshore. Should
spend first 4-8
weeks onsite)
Information Architect/ Interaction
Designers
Creates wireframes across multiple devices
Creates Interactive prototype
Helps UX architect in creating Usability test
scenarios, and usability test
Creates detail wireframes during sprint
Offshore
Should be onsite during prototype
development ( 4-6 weeks)
• 2 Persons (
Empower)
• 1 Person (
Convert)
• 1 Person ( Care
Navigator)
Visual Designers Creates Brand identity
Creates Icon & Graphics Library
Creates detail visual specification
Works closely with UI developer
Offshore • 1 Person ( Lead)
• 1 Graphic Artist
UI Developers/ Prototypers Builds reusable UI component library
Builds UI prototype across all platforms
Assists development team on UI during the
sprint
offshore • 1 person (
Platform)
• 1 Person (
Empower)
56. Roles, Skills & Experience
Role Skills Experience
UX Architect • Experience of managing client & offshore team for large products
• Experience with different platforms ( Web, Mobile, tablets) is a
must
• Experience of conducting user research, usability test
• Experience of managing and planning UX deliverables for large
software product
• 10-15 years
* Evaluation criteria should NOT just be number of
years. Focus should be given on demonstrated
skills
Information Architect/
Interaction Designers
• Extensive experience of working on cross platform UX projects
• Should have at least worked on one project which had mobile
design
• Expert in wire framing, low & hi fidelity prototyping
• Experience of participating and conducting usability test is a plus
• Strong in communication
• Interaction Design Lead ( 8-10 years)
• Interaction Designer ( 2-6 years)
* Should have very strong design portfolio. That
should be the primary criteria for selection
Visual Designers • Experience of defining visual identity and branding for cross
platform product
• Exceptionally good with visual layouts, typography, forms
• Should have worked on visual design for web, mobile tablets
• A strong portfolio demonstrating visual design skills is a must
• Visual Design Lead ( 8-12 years)
• Graphic Artist ( 2-4 years)
* Should have very strong design portfolio. That
should be the primary criteria for selection
UI Developers/
Prototypers
• Expert with HTML 5, CSS, and Java script
• Should have worked on responsive design project
• Should have the skills to create and customize UI components
• UI Development Lead ( 8-10 years)
• UI Developer ( 4-8 years)
58. Next 8-10 Weeks
• Heuristic evaluation/ Usability review of all
products
• Create list of common goals, tasks, and
features for the platform
• Define Mobile Use Case for each of those
features
• Review Patient portal implementation
across client. Define elements to be build
as part of the theme
• Create Mobile Content strategy &
Information Architecture
• Define flows, wireframes, for identified
features ( Web & Mobile)
• Build interactive HTML prototype ( Mobile
& Web, Tablet can be skipped)
• Review usability report shared by the
client
• Conduct Usability test ( existing
application
• Conduct Usability test with the new
prototype ( Patient & Staff is must)
• Create Visual design, and icon library
• Design new theme templates
• Review & Signoff
Week 10-12
UX:
Interaction Designers :
• Focus on getting the
wireframes ready for sprint
1&2
• Consider Mobile use case
Visual Designers :
• Focus on getting the visual
screen mock ups and
assets ready for sprint 1
UI developers :
• Focus on building reusable
UI component library
Engineering
• Development team can
start sprinting. But only
on stories which doesn’t
have UI dependencies
Sprint 0
Week 12-14
UX :
Interaction designers :
work on the wireframes for
sprint 2 & 3.
Visual designers :
• work on visual assets for
sprint 1
• Visual mockup screens for
sprint 2
UI developers
• work with the Dev sprint
team on the UI for sprint 1
• Continues building the UI
component library
Sprint 1
Week 14 & Beyond
The same n+1.5 rhythm
continues between UX and
Development team throughout
the development cycle
Sprint 2Strategy & Scope
Timelines
60. Who am I
Over the years I have helped organizations to :
• To set up & successfully run global User Experience and Product Management Practice ( Logitech, Philips, IBM, Convergys)
• Design and launch globally successful hardware and software products across multiple domains
Harmony Touch | Harmony Ultimate| Harmony Smart
Control
Philips Smart
TV
IBM Customer Connect Portal My Harmony Cloud Application
An Independent User Experience & Product Management consultant with 15 years of experience in managing great teams, designing and
launching world class products. I have played Key leadership & strategic roles in organizations like Philips Design, Logitech, IBM.
I am a Pragmatic Marketing Certified Product Manager and a certified Human Factors Specialist from HFI
Worked on multiple domains & across all platforms (mobile, Tablet, TV, Web). Consulted with several top multinationals & fortune 500 clients
Active participant and speaker at major International & National UX & Product Management Conferences.
• Invited by IKEA Sweden “Smart home for small Pockets” workshop | Participant 2012 UXPA conference in Las Vegas | Keynote speaker UGC conference in India
You can reach me at :
• LinkedIn : http://www.linkedin.com/in/subhasishk
• Email : subhasish.karmakar@gmail.com
• Portfolio
• Download PDF : It's a Four-Screen World
• View Online : It's a Four-Screen World
61. THANK YOU
Subhasish Karmakar
Independent UX Consultant
Portfolio
Download PDF : It's a Four-Screen World
View Online : It's a Four-Screen World
• Email : subhasish.karmakar@gmail.com
• LinkedIn : http://www.linkedin.com/in/subhasishk