UX/UI design methodology using modeling artifacts of UseCase Diagrams for raw business logic transcription, UI Hierarchy Modules & Wireframes for UI navigation design, UI Visual Flats for site persona & online branding design. 2 sample projects included showcasing use of modeling methodology.

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. 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. 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. 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. Texas HHSC . Social Services IT 5
1.1 Methodology
Business Challenges

6. Texas HHSC . Social Services IT 6
Strategic Business Impasse
(A) Tribal Knowledge
(B) Transitory Vendor
Teams
(C) Variable Design Artifacts

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. 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. 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. Texas HHSC . Social Services IT 10
1.2 Methodology
Resolution & Governance

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. 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. 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. 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. 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. Texas HHSC . Social Services IT 16
2. Artifacts
Design Model Tools

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. 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. 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. 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. 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. Texas HHSC . Social Services IT 22
2.2 Reverse Engineer
Texas HHSC UX Project Samples
2.1 Full Project Lifecycle

23. Texas HHSC . Social Services IT 23
2.1 Full UX Lifecycle Sample
Raw Business Requisites -> UseCase -> UI Hierarchy -> Visual Flats

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. 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. Texas HHSC . Social Services IT 26
Login Password Reset Web App . UseCase #1 . Cover PageProject Caption Header
UseCase Icons Legend
UseCase definition

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. 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. 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. 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. 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. 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. Texas HHSC . Social Services IT 33
Login Password Reset Web App
2.1.2 UI Hierarchy Chart
Set Navigation Flow Create Navigation Hierarchy

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. 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. Texas HHSC . Social Services IT 36
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

37. Texas HHSC . Social Services IT
37
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.
1.0 SDC Login

38. Texas HHSC . Social Services IT 38
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 )
2.0 Forgot UserID

39. Texas HHSC . Social Services IT 39
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
4.0 Forgot Password

40. Texas HHSC . Social Services IT 40
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
5.0 Display Email
Sent Message

41. Texas HHSC . Social Services IT 41
Login Password Reset Web App . Visual Flats
2.1.5 Password Reset
Email Message Sample
( Embedded Password Reset Message & Link )

42. Texas HHSC . Social Services IT 42
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

43. Texas HHSC . Social Services IT 43
Login Password Reset Web App . Visual Flats
2.1.6 User Email Link to Security
Questions Page
( Token . UserID . Lifetime )

44. Texas HHSC . Social Services IT 44
Login Password Reset Web App . Visual Flats | 10.1 Security
Questions Page with Captcha
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

45. Texas HHSC . Social Services IT 45
Login Password Reset Web App . Visual Flats | 10.2 Create New User Password
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 )

46. Texas HHSC . Social Services IT 46
Login Password Reset Web App . Visual Flats | 10.2(B) Create New User Password
10.2 (B) Password
Auto-Check
• 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

47. Texas HHSC . Social Services IT 47
Login Password Reset Web App . Visual Flats | 10.2(C) Password Creation Error
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

48. Texas HHSC . Social Services IT 48
Login Password Reset Web App . Visual Flats | 10.3 New User Password Confirmed
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

49. Texas HHSC . Social Services IT 49
Login Password Reset Web App . Visual Flats | 1.0 SDC Login
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

50. Texas HHSC . Social Services IT 50
2.2 Reverse Engineer UX Sample
White Board Requisites -> UI Mockups -> UseCase Diagrams

51. Texas HHSC . Social Services IT 51
YTB & LTSS Whiteboard Flow
Business Stakeholder Creation
YTB = Your Texas Benefits
LTSS = Long Term Service & Support
• “White Board” with mission-critical business logic for web app
• Rote re-memorization of business flow for each session

52. Texas HHSC . Social Services IT 52
YTB = Your Texas Benefits
• Total 295 UI Mockups ( all flow variations )
• 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 )
YTB Visual Flats ( UI Mockup ) Set
Vendor Staff Creation
Page 1
… Page 295
Mockup Sample

53. Texas HHSC . Social Services IT 53
YTB & LTSS UseCase Diagram-1 Cover Page
UX Designer Creation
Project Caption Header
UseCase Icons Legend
UseCase definition

54. Texas HHSC . Social Services IT 54
YTB & LTSS UseCase Diagram-2 . Reverse EngineeredYTB = Your Texas Benefits
LTSS = Long Term Service & Support
• UX Designer review all 295 UI mockups
• Trace all UI navigation paths and silos
• Reconstitute “structured map” based on information architect
Anonymous Login ( non-Gated )

55. Texas HHSC . Social Services IT 55
YTB & LTSS UseCase Diagram-2 . Reverse EngineeredYTB = Your Texas Benefits
LTSS = Long Term Service & Support
Authenticated Login ( Gated )• Quick visual queue via information partition
• Assign indices for audience reference

56. Texas HHSC . Social Services IT 56
YTB & LTSS UseCase Diagram-2 . Reverse Engineered
• Business need expanded CBO UseCase flow
• Implement immediate collaboration
• On-Demand Capture “Tribal Knowledge”
CBO = Community Based Organizations

57. Texas HHSC . Social Services IT 57
YTB & LTSS UseCase Diagram-4 . CBO Process EntitiesCBO = Community Based Organizations
• On-Demand Capture “Tribal Knowledge”
• Document multi-point business logic
• Not part of UI design, but part of business logic

58. Texas HHSC . Social Services IT 58
3. Acumen

59. Texas HHSC . Social Services IT 59
Acumen & Skillset Evolution
3-Tier Career Approach
Tier 1
Graphics Designer
Tier 2
Information Architect or
UI Designer
Employee Colleague
( no prior graphic or
UI design experience )
Tier 3
User Experience Designer
UX/UI Designer Business & IT Stakeholders
Web or Desktop Publication
UseCase . UI Hierarchy . UI Wireframe
Collaborative Efforts
UI Visual Flats ( Enriched Mockups )
Site Personas

60. Texas HHSC . Social Services IT 60
4. Final Remarks

61. Texas HHSC . Social Services IT 61
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

62. Texas HHSC . Social Services IT 62
धन्यवाद