ux/ui design : methodology . artifacts . acumen

Download UX/UI Design : Methodology . Artifacts . Acumen

Post on 18-Aug-2015

110 views

Category:

Business

1 download

Embed Size (px)

TRANSCRIPT

  1. 1. Texas HHSC . Social Services IT 1One Vision, One Effort UX/UI Design : Methodology . Artifacts . Acumen 3 August 2015 Leon Lee . Texas HHSC HHSC Social Services IT . .
  2. 2. Texas HHSC . Social Services IT 2 UX Strategic Venue Collaborative Brand Tagline One Vision . One Effort Business Stakeholders . IT Associates . Vendor Teams Common Strategy & Artifacts Integrated Methodology
  3. 3. Texas HHSC . Social Services IT 3 UX Strategic Venue Tagline Old Asian Collaborative Proverb ( Kai Tzan Guan ) ( Bi Shu Yao Nah Dao Tzai Dao ) To Open a Restaurant One Must Own the Butcher Knife ( To Open a Restaurant One Must Know How to Cook and Not Be Totally Dependent on Other Chefs )
  4. 4. Texas HHSC . Social Services IT 4 Presentation Format 1. Methodology Strategic Challenges & Resolutions 2. Artifacts Common UX.UI Design Tools 3. Acumen Cross-leverage team expertise
  5. 5. Texas HHSC . Social Services IT 5 1.1 Methodology Business Challenges
  6. 6. Texas HHSC . Social Services IT 6 Strategic Business Impasse (A) Tribal Knowledge (B) Transitory Vendor Teams (C) Variable Design Artifacts
  7. 7. Texas HHSC . Social Services IT 7 (A) Tribal Knowledge Time Sensitivity of Knowledge Documented Information Superseded Islands of Knowledge & Expertise Knowledge Relevance Challenge Time vs. Obsolescence Mission-Critical Information coalesce to Stakeholder Group or Sub-Group Information & Process evolve fast, document obsolete, temporal volatile
  8. 8. Texas HHSC . Social Services IT 8 (B) Transitory Vendor Teams Re-Bid Vendors Select Vendor Voluntary Exit Complete Project or Segments Compel to Exit Vendors Transition In, Transition Out Selected Vendor, Complete Project Tasks Exit Project : Completed Tasks, ReBid Project, Lost Bid Need Consistent Project documentation for Knowledge Transfer Assign Vendor to Project Lost Bid
  9. 9. Texas HHSC . Social Services IT 9 (C) Variable Design Artifacts Challenge Business Whiteboard Hierarchy Module Flowchart UI Wireframe ( High Fidelity ) UI Wireframes ( Low Fidelity ) UseCase Flow To harness Synergetic Cross-Enterprise Effort Require Commonality of Design Models & Artifacts Models for Stepwise Refinement of business logic flows to UI application design Data Flow Diagram
  10. 10. Texas HHSC . Social Services IT 10 1.2 Methodology Resolution & Governance
  11. 11. Texas HHSC . Social Services IT 11 Texas HHSC Portal Authority (PA) Single Point of Project Approval PA Steering Committee Final Arbitrator Portal Authority Works to Ease Web Jams Source : www.hhsc.state.tx.us/newsletter/2015/05/11/ PA Management Committee Advisory Recommendations Optimize Project CostUI & Code ReUse Cross Agencies Collaboration Common HW/SW Environment Enterprise Style Guide Business Teams IT TeamsCollaborative Efforts ( UX/UI Discipline ) Major Directives
  12. 12. Texas HHSC . Social Services IT 12 Texas HHSC Portal Authority Style Guide Style Guide anchors UX/UI Design Collaboration Texas HHSC Portal Authority HHSC Style Guide ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval Design Incorporation Shared Software Code Base ( Code ReUse via UI features ) Not dictate code format, but Does influence Code ReUse
  13. 13. Texas HHSC . Social Services IT 13 Style Guide : House Analogy Painters Electricians Plumbers Carpenters Builders Landscapers Architect Blueprint Single Point of Effort Targeted End Product Vendors & Contractors
  14. 14. Texas HHSC . Social Services IT 14 Style Guide : Real World Implementation HHSC Style Guide Single Point of Effort Targeted UI Products Vendors - Contractors Service Delivery Center ( SDC ) Your Texas Benefits ( YTB ) UX Design Toolsets Facilitate Style Guide
  15. 15. Texas HHSC . Social Services IT 15 Style Guide UX/UI Directive Major Concentrations. 140 pages Font Icons Color Palette ( ADA, Brand ) Font Typeface Precise UI Look & Feel . Search List Example ( shared code base ) Applet UI Workflow Behavior ( shared code base ) Traditional Style Guide Expanded Style Guide
  16. 16. Texas HHSC . Social Services IT 16 2. Artifacts Design Model Tools
  17. 17. Texas HHSC . Social Services IT 17 Four UX/UI Design Models & Methodology Common UI Design Models & Iconography Step-wise Refinement of UI & Business Logic Captures specific UX layer & instance Retrieve / Reuse prior UX projects (1) UseCase Diagram (2) UI Hierarchy Modules (3) UI Wireframes (4) Visual Flats Information Puzzle be UX structured
  18. 18. Texas HHSC . Social Services IT 18 UseCase Diagram . Icon Usage Sample : Mobile App . Designer Shoes 8 Icons, Common IT Standards Map business requirements Simple of Complex User Flows Track Internal or External System Flows ( dependencies ) Axure Design Apps
  19. 19. Texas HHSC . Social Services IT 19 UI Hierarchy Module . Icon Usage Sample : Mobile App . Designer Shoes Axure Design Apps 5 Icons, Common IT Standards Transcribe prior UseCase flow Each Module = One UI / Web Page Visual appreciation of App Flow Identify gated or choke points Acumen blend ( UI Design, Usability, Info Architecture )
  20. 20. Texas HHSC . Social Services IT 20 Axure Design Apps UI Wireframe . Icon Usage Sample : Mobile App . Designer Shoes Home Page 8 Icons, Common IT Standards, capture all nuance of Wireframe Mission-critical Display Elements Coordinate Business/IT resources No Color, Font Typeface, Brand Imagery ( avoid Rabbit Hole challenge )
  21. 21. Texas HHSC . Social Services IT 21 UI Visual Flat ( UI Mockup ) Sample : Mobile App . Ladies Designer Shoes . Home Page Design Apps Axure Align with Business - Marcom - Brand teams Brand Color, Font Typeface, Imagery Fill In details from UI Wireframe Intend for hand-off to IT development team ( UI Wireframe )
  22. 22. Texas HHSC . Social Services IT 22 2.2 Reverse Engineer Texas HHSC UX Project Samples 2.1 Full Project Lifecycle
  23. 23. Texas HHSC . Social Services IT 23 2.1 Full UX Lifecycle Sample Raw Business Requisites -> UseCase -> UI Hierarchy -> Visual Flats
  24. 24. Texas HHSC . Social Services IT 24 Login Password Reset Web App . Raw Requisites External Consultancy . 5 pages recommendation Texas HHSC Business / IT Stakeholders EIAM Web App Enterprise Solution Industry standards criteria Refinements to criteria
  25. 25. Texas HHSC . Social Services IT 25 Login Password Reset Web App . UseCase Diagram 2.1.1 UseCase Diagram Create Business Logic Relationship Link Logic Flows & Interdependencies
  26. 26. Texas HHSC . Social Services IT 26 Login Password Reset Web App . UseCase #1 . Cover PageProject Caption Header UseCase Icons Legend UseCase definition
  27. 27. Texas HHSC . Social Services IT 27 Login Password Reset Web App . UseCase #2 User goto Reset Password Page User enters UserID Correct UserID, Email sent to User with Password Reset Link Incorrect UserID, no error notice either Business Logic emphasis by IT Team
  28. 28. Texas HHSC . Social Services IT 28 Login Password Reset Web App . UseCase #3 User Profile DOES Exist System checks if User Profile DOES exist ( for Security Questions ) If exists, create Email with Password Reset Link Assign this Email Link to UserID and a Token with specified Lifetime
  29. 29. Texas HHSC . Social Services IT 29 Login Password Reset Web App . UseCase #4 User click on Email Password Reset Link User Profile NOT Exist If User Profile NOT exists, unable to use Security Questions ( Step 1) User to contact HelpDesk ( Step 2 ) HelpDesk assign Temporary Password ( Step 3 ) User login with temporary Password Creates New Password based on IT standards Must complete User Profile
  30. 30. Texas HHSC . Social Services IT 30 Login Password Reset Web App . UseCase #5 User click on Email Password Reset Link User Profile DOES Exist If User Profile DOES exists, able to use Security Questions Verify Email Link assigned to UserID, Token, and Lifetime Proceed to create new Password Page
  31. 31. Texas HHSC . Social Services IT 31 Login Password Reset Web App . UseCase #6 Create new Password Page 1) Token Status Token expired - redo the entire password reset process Token active - answer Security Questions ( no retry limit ) 2) Security Questions Status Cannot answer Security Questions, contact HelpDesk Answer Security Questions, create new Password based on IT standard 3) Account Lock-Out Status Failed Login with new password 3 times, Account Locked-Out, contact HelpDesk Gone beyond 90-day limit for Password Change while in process, contact HelpDesk
  32. 32. Texas HHSC . Social Services IT 32 Login Password Reset Web App . UseCase #7 HelpDesk assistance flow 1) User cannot recall UseID 2) User Account Locked Out failed login 3 times 3) User Account Locked Out past 90-day Password Reset Limit 4) User unable answer all User Profile Security Questions
  33. 33. Texas HHSC . Social Services IT 33 Login Password Reset Web App 2.1.2 UI Hierarchy Chart Set Navigation Flow Create Navigation Hierarchy
  34. 34. Texas HHSC . Social Services IT 34 Login Password Reset Web App . UI Hierarchy #1 Maps UI navigation flow Defines 3 login scenarios : 1) User account lock out ( past 90-day reset limit, failed login 3 times ) 2) User forgot UserID 3) User forgot Password ( send email password reset link )
  35. 35. Texas HHSC . Social Services IT 35 Login Password Reset Web App . UI Hierarchy #2 Defines navigation flow after clicking on Email Password Reset link 1) Security Questions New Password Relogin Successful 2) Unable answer Security Questions 3) Unable create new Password 4) Token expired while creating new Password
  36. 36. Texas HHSC .