Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Mobile First Design Strategy & Process

2 947 vues

Publié le

This Evaluation Report was created to provide guideline and recommendations on
- How to build in house UX practice
- What to align your UX goals with business goals
- What kind of skills are needed in the team and how to hire
- What is mobile First, and how to approach responsive design

Publié dans : Technologie, Business

Mobile First Design Strategy & Process

  1. 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. 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. 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. 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. 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. 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
  8. 8. WHY? Customers are demanding, Adoption rate is falling, Increasing Mobile adoption
  9. 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. 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. 11. YOUR & YOUR CUSTOMERS BIGGEST COMPLAINS Challenges with the existing platform
  12. 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. 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. 14. BUSINESS GOALS FOR “INFLUENCE” One Platform, Unified experience, multiple devices
  15. 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
  16. 16. USER EXPERIENCE GOALS There are different opinions but no defined goals ( Gap #1)
  17. 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. 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. 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. 20. HOW TOACHIEVE THE UX GOALS Recognize the need, define a process, build a team, focus on execution
  21. 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. 22. EXISTING PROCESS : EVALUATION No defined Process, UX is an afterthought, lack of resources ( Gap # 2)
  23. 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. 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)
  25. 25. PROCESS OVERVIEW User Centered Design
  26. 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
  27. 27. J.J.GARRETT’S UCD FRAMWORK Five layers of User Experience
  28. 28. 28 User Experience is Built From Dependent Layers Jesse James Garrett’s Elements of User Experience: http://www.jjg.net/elements/
  29. 29. 29 The Surface Layer Describes Finished Visual DesignAspects Surface Skeleton Structure Scope Strategy
  30. 30. 30 The Skeleton Describes Screen Layout and Functional Compartments in the Screen Surface Skeleton Structure Scope Strategy
  31. 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. 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. 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
  34. 34. ADOPTING THE FRAMEWORKAT YOUR COMPANY Customize it for your needs
  35. 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. 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. 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
  38. 38. 38 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com UX activities at each Layer UX Layer UX Activities Goals High level deliverables 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 Increase Patient Adoption Increase efficiency of the staff Information architecture strategy with Mobile in Mind Detail mobile UI architecture framework Wireframes of the key modules ( Patient and Staff is must) Interactive Prototype in 3 different platforms Visual Design Style guide for for each application A detail UX deliverable and execution plan aligned with Development Controls • Build UI patterns Library for all platforms • Build Icon and graphics library • Create UI implementation guideline and style guide • Reusability • Consistency • UI Patterns Library ( Mobile/Web) • Icon and graphics library( Mobile/Web) • UI guideline and do’s and don’t for the development and the implementation team
  39. 39. WHY MOBILE FIRST & WHAT IS MOBILE FIRST Responsive design is not just about UI Framework
  40. 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. 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. 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
  43. 43. Product Owner, UX Architect, Interaction designer Responsive design process Product Owner, BA, UX Architect, Interaction designer, Visual Designer, Tech Interaction designer, Visual Designer, Tech Interaction designer, Visual Designer, Tech USER TEST SKILLS
  44. 44. Responsive design process : Viljami Salminen
  45. 45. The change in content and Navigation structure is defined by the content strategy and not by the UI framework ( bootstrap)
  46. 46. 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
  47. 47. Breakpoints & Layout selection
  48. 48. Consequence of Mobile Last
  49. 49. 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/
  50. 50. SKILLS & RESOURCES An onsite & Offshore model
  51. 51. 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)
  52. 52. 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)
  53. 53. TIMELINES Start now, plan for UX, focus on execution, save time later
  54. 54. 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
  55. 55. WHOAM I A brief introduction about myself
  56. 56. 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
  57. 57. 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