UX/UI Design : Methodology. Artifacts. Acumen 3 August 2015 HHSC Social Services IT.. Leon Lee. leon.lee@hhsc.state.tx.us Texas HHSC. Social Services IT One Vision, One Effort 1
Business Stakeholders. IT Associates. Vendor Teams UX Strategic Venue Collaborative Brand Tagline Common Strategy & Artifacts Integrated Methodology One Vision. One Effort Texas HHSC. Social Services IT 2
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 ) Texas HHSC. Social Services IT 3
Presentation Format 1. Methodology Strategic Challenges & Resolutions 2. Artifacts Common UX.UI Design Tools 3. Acumen Cross-leverage team expertise Texas HHSC. Social Services IT 4
1.1 Methodology Business Challenges Texas HHSC. Social Services IT 5
Strategic Business Impasse (A)Tribal Knowledge (B) Transitory Vendor Teams (C) Variable Design Artifacts Texas HHSC. Social Services IT 6
Islands of Knowledge & Expertise (A) Tribal Knowledge Time Sensitivity of Knowledge Knowledge Relevance Challenge Time vs. Obsolescence Mission-Critical Information coalesce to Stakeholder Group or Sub-Group Information & Process evolve fast, document obsolete, temporal volatile Documented Information Superseded Texas HHSC. Social Services IT 7
(B) Transitory Vendor Teams Voluntary Exit Select Vendor Assign Vendor to Project Compel to Exit Lost Bid Re-Bid Vendors Complete Project or Segments 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 Texas HHSC. Social Services IT 8
(C) Variable Design Artifacts Challenge Business Whiteboard Flowchart UI Wireframes ( Low Fidelity ) Hierarchy Module Data Flow Diagram UseCase Flow UI Wireframe ( High Fidelity ) To harness Synergetic Cross-Enterprise Effort Require Commonality of Design Models & Artifacts Models for Stepwise Refinement of business logic flows to UI application design Texas HHSC. Social Services IT 9
1.2 Methodology Resolution & Governance Texas HHSC. Social Services IT 10
Texas HHSC Portal Authority (PA) Single Point of Project Approval PA Steering Committee Final Arbitrator Collaborative Efforts IT Teams Major Directives PA Management Committee Advisory Recommendations Business Teams UI & Code ReUse Portal Authority Works to Ease Web Jams Source : www.hhsc.state.tx.us/newsletter/2015/05/11/ Optimize Project Cost Enterprise Style Guide ( UX/UI Discipline ) Cross Agencies Collaboration Common HW/SW Environment Texas HHSC. Social Services IT 11
Texas HHSC Portal Authority Style Guide Style Guide anchors UX/UI Design Collaboration Texas HHSC Portal Authority Standards Approval Internal Business & IT Teams Design Incorporation HHSC Style Guide ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Not dictate code format, but Does influence Code ReUse External Vendor Teams Shared Software Code Base ( Code ReUsevia UI features ) Texas HHSC. Social Services IT 12
Style Guide : House Analogy Architect Blueprint Single Point of Effort Targeted End Product Vendors & Contractors Builders Landscapers Painters Electricians Carpenters Plumbers Texas HHSC. Social Services IT 13
Your Texas Benefits ( YTB ) Service Delivery Center ( SDC ) Style Guide : Real World Implementation HHSC Style Guide Single Point of Effort Targeted UI Products UX Design Toolsets Facilitate Style Guide Vendors - Contractors Texas HHSC. Social Services IT 14
Style Guide UX/UI Directive Major Concentrations. 140 pages Traditional Style Guide Expanded Style Guide Applet UI Workflow Behavior ( shared code base ) Font Icons Color Palette ( ADA, Brand ) Font Typeface Precise UI Look & Feel. Search List Example ( shared code base ) Texas HHSC. Social Services IT 15
2. Artifacts Design Model Tools Texas HHSC. Social Services IT 16
(1) UseCase Diagram Four UX/UI Design Models & Methodology Common UI Design Models & Iconography Step-wise Refinement of UI & Business Logic (2) UI Hierarchy Modules Captures specific UX layer & instance Retrieve / Reuse prior UX projects (3) UI Wireframes Information Puzzle be UX structured (4) Visual Flats Texas HHSC. Social Services IT 17
UseCaseDiagram. Icon Usage Sample : Mobile App. Designer Shoes Design Apps Axure 8 Icons, Common IT Standards Map business requirements Simple of Complex User Flows Track Internal or External System Flows ( dependencies ) Texas HHSC. Social Services IT 18
UI Hierarchy Module. Icon Usage Sample : Mobile App. Designer Shoes Design Apps 5 Icons, Common IT Standards Transcribe prior UseCase flow Each Module = One UI / Web Page Visual appreciation of App Flow Axure Identify gated or choke points Acumen blend ( UI Design, Usability, Info Architecture ) Texas HHSC. Social Services IT 19
UI Wireframe. Icon Usage Sample : Mobile App. Designer Shoes Home Page Design Apps Axure 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 ) Texas HHSC. Social Services IT 20
UI Visual Flat ( UI Mockup ) Sample : Mobile App. Ladies Designer Shoes. Home Page Design Apps Axure ( UI Wireframe ) 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 Texas HHSC. Social Services IT 21
Texas HHSC UX Project Samples 2.1 Full Project Lifecycle 2.2 Reverse Engineer Texas HHSC. Social Services IT 22
2.1 Full UX Lifecycle Sample Raw Business Requisites -> UseCase -> UI Hierarchy -> Visual Flats Texas HHSC. Social Services IT 23
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 Texas HHSC. Social Services IT 24
Login Password Reset Web App. UseCase Diagram 2.1.1 UseCaseDiagram Create Business Logic Relationship Link Logic Flows & Interdependencies Texas HHSC. Social Services IT 25
Project Caption Header Login Password Reset Web App. UseCase#1. Cover Page UseCase definition UseCase Icons Legend Texas HHSC. Social Services IT 26
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 Texas HHSC. Social Services IT 27
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 UserIDand a Token with specified Lifetime Texas HHSC. Social Services IT 28
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 ) HelpDeskassign Temporary Password ( Step 3 ) User login with temporary Password Creates New Password based on IT standards Must complete User Profile Texas HHSC. Social Services IT 29
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 Texas HHSC. Social Services IT 30
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 Texas HHSC. Social Services IT 31
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 Texas HHSC. Social Services IT 32
Login Password Reset Web App 2.1.2 UI Hierarchy Chart Set Navigation Flow Create Navigation Hierarchy Texas HHSC. Social Services IT 33
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 ) Texas HHSC. Social Services IT 34
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 Texas HHSC. Social Services IT 35
Login Password Reset Web App. Visual Flats 2.1.3 Visual Flats Color Palette Font Icons & Font Typeface Brand MastHead, Footer, Imagery Note : For this sample project, given prior defined HHSC web page layout, able to by-pass UI Wireframe creation and design directly in UI Visual Flat Texas HHSC. Social Services IT 36
Login Password Reset Web App. Visual Flats 1.0 SDC Login Correlates to UI Module 1.0 SDC Login User to enter Login / Password Reset UserID link Reset Password link HHSC defined MastHead, Master Footer, Color Palette, etc. Texas HHSC. Social Services IT 37
Login Password Reset Web App. Visual Flats 2.0 Forgot UserID Correlates to UI Module 2.0 Forgot UserID Notice for User to call HelpDesk number UI & Code Logic holder ( future reset UserID feature ) Texas HHSC. Social Services IT 38
Login Password Reset Web App. Visual Flats 4.0 Forgot Password Correlates to UI Module 4.0 Forgot Password Enter UserID Captcha Text to prevent hacker automated scripting Texas HHSC. Social Services IT 39
Login Password Reset Web App. Visual Flats 5.0 Display Email Sent Message Correlates to UI Module 5.0 Display Email Sent Message Notification password reset link sent to user email account Texas HHSC. Social Services IT 40
Login Password Reset Web App. Visual Flats 2.1.5 Password Reset Email Message Sample ( Embedded Password Reset Message & Link ) Texas HHSC. Social Services IT 41
Login Password Reset Web App. Visual Flats Sample Email with Password Reset Link Message Message contains 24 hour time limit warning Token assigned to specific Link Texas HHSC. Social Services IT 42
Login Password Reset Web App. Visual Flats 2.1.6 User Email Link to Security Questions Page ( Token. UserID. Lifetime ) Texas HHSC. Social Services IT 43
Login Password Reset Web App. Visual Flats 10.1 Security Questions Page with Captcha Correlates to UI Module 10.1 Security Questions Page with Captcha Must answer all User-defined Security Questions in User Profile No retry limit. Not case sensitive Will not inform User which one is incorrectly answered Embedded Captcha Text to prevent hacker automated scripting Texas HHSC. Social Services IT 44
Login Password Reset Web App. Visual Flats 10.2 Create New User Password Correlates to UI Module 10.2 Create New User Password Password double entry for verification IT Password Creation Criteria auto-check off list ( Hold area for additional Business or IT criteria ) Texas HHSC. Social Services IT 45
Login Password Reset Web App. Visual Flats 10.2(B) Create New User Password Correlates to UI Module 10.2 Create New User Password 10.2(B) Password Auto-Check, an instance of this 10.2 web page Showcasing Password Creation Criteria check off status Texas HHSC. Social Services IT 46
Login Password Reset Web App. Visual Flats 10.2(C) Password Creation Error Correlates to UI Module 10.2 Create New User Password 10.2(C) Password Creation Error, an instance of this 10.2 web page Showcasing Password Creation Error Message status Texas HHSC. Social Services IT 47
Login Password Reset Web App. Visual Flats 10.3 New User Password Confirmed Correlates to UI Module 10.3 New User Password Confirmed New User Password created, saved, ready for immediate use SDC Login Page button link Texas HHSC. Social Services IT 48
Login Password Reset Web App. Visual Flats 1.0 SDC Login Correlates to UI Module 1.0 SDC Login Navigated from 10.3 New User Password Confirmed web page User can immediately use new Password Texas HHSC. Social Services IT 49
2.2 Reverse Engineer UX Sample White Board Requisites -> UI Mockups -> UseCase Diagrams Texas HHSC. Social Services IT 50
YTB = Your Texas Benefits LTSS = Long Term Service & Support YTB & LTSS Whiteboard Flow Business Stakeholder Creation White Board with mission-critical business logic for web app Rote re-memorization of business flow for each session Texas HHSC. Social Services IT 51
YTB = Your Texas Benefits Page 1 YTB Visual Flats ( UI Mockup ) Set Vendor Staff Creation Mockup Sample Total 295 UI Mockups ( all flow variations ) Page 295 Business challenged to memorize UI mockups without a map Desire need to quickly correlate UI feature sets : Authenticated Login ( Gated ) vs. Anonymous Login ( non-gated ) Texas HHSC. Social Services IT 52
Project Caption Header YTB & LTSS UseCase Diagram-1 Cover Page UX Designer Creation UseCase definition UseCase Icons Legend Texas HHSC. Social Services IT 53
YTB = Your Texas Benefits LTSS = Long Term Service & Support YTB & LTSS UseCase Diagram-2. Reverse Engineered Anonymous Login ( non-gated ) UX Designer review all 295 UI mockups Trace all UI navigation paths and silos Reconstitute structured map based on information architect Texas HHSC. Social Services IT 54
YTB = Your Texas Benefits LTSS = Long Term Service & Support YTB & LTSS UseCase Diagram-2. Reverse Engineered Quick visual queue via information partition Assign indices for audience reference Authenticated Login ( Gated ) Texas HHSC. Social Services IT 55
CBO = Community Based Organizations YTB & LTSS UseCase Diagram-2. Reverse Engineered Business need expanded CBO UseCase flow Implement immediate collaboration On-Demand Capture Tribal Knowledge Texas HHSC. Social Services IT 56
CBO = Community Based Organizations YTB & LTSS UseCase Diagram-4. CBO Process Entities On-Demand Capture Tribal Knowledge Document multi-point business logic Not part of UI design, but part of business logic Texas HHSC. Social Services IT 57
3. Acumen Texas HHSC. Social Services IT 58
Acumen & Skillset Evolution 3-Tier Career Approach Collaborative Efforts Employee Colleague ( no prior graphic or UI design experience ) UX/UI Designer Business & IT Stakeholders Tier 1 Graphics Designer UI Visual Flats ( Enriched Mockups ) Site Personas Web or Desktop Publication Tier 2 Information Architect or UI Designer UseCase. UI Hierarchy. UI Wireframe Tier 3 User Experience Designer Texas HHSC. Social Services IT 59
4. Final Remarks Texas HHSC. Social Services IT 60
Final Remarks UX/UI Design Business Logic & Information Flow Puzzle Solution Harness Design Acumen ( Graphics, Information, User Persona ) Targeted & Stepwise Refined UI Design ( UseCase, Wireframe, Visual Flats ) Facilitate Business Initiatives, IT Governance & Client Adoption Texas HHSC. Social Services IT 61
ध यव द Texas HHSC. Social Services IT 62