UX - UI Design (PDFDrive)

HHSC Social Services – IT . .
UX/UI Design : Methodology . Artifacts . Acumen

3 August 2015
Leon Lee . leon.lee@hhsc.state.tx.us Texas HHSC . Social Services IT One Vision, One Effort
1
UX Strategic Venue
Business Stakeholders . IT Associates . Vendor Teams
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 )
Presentation Format
1. Methodology
Strategic Challenges & Resolutions
2. Artifacts
Common UX.UI Design Tools
3. Acumen
Cross-leverage team expertise

1.1 Methodology
Business Challenges
Strategic Business Impasse
(A) Tribal Knowledge
(B) Transitory Vendor

Teams
(C) Variable Design Artifacts

(A) Tribal Knowledge
“Islands” of Knowledge & Expertise
Time Sensitivity of
Knowledge
• Knowledge Relevance Challenge – Time vs. Obsolescence

• Mission-Critical Information coalesce to Stakeholder Group or Sub-Group Documented Information
• Information & Process evolve fast, document obsolete, temporal volatile Superseded

(B) Transitory Vendor Teams
Voluntary Exit
Assign Vendor
to Project
Select Vendor
Complete Project
or Segments
Lost Bid
Compel to Exit Re-Bid Vendors
• 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

(C) Variable Design Artifacts Challenge
Business Whiteboard Flowchart UI Wireframes

( Low Fidelity )
UseCase Flow UI Wireframe

Hierarchy Module Data Flow Diagram
( 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

1.2 Methodology
Resolution & Governance
Texas HHSC Portal Authority (PA)
Single Point of Project Approval
PA Steering Committee Collaborative IT Teams

Final Arbitrator Efforts
PA Management Committee
Major
Advisory Recommendations
Directives
Business Teams
UI & Code ReUse Optimize Project Cost Enterprise Cross Agencies Common HW/SW
Style Guide Collaboration Environment
Portal Authority Works to Ease Web Jams
Source : www.hhsc.state.tx.us/newsletter/2015/05/11/ ( UX/UI Discipline )
Texas HHSC Portal Authority Style Guide
Style Guide anchors UX/UI Design Collaboration
Texas HHSC Portal Authority
Standards Internal Business & IT Teams

Approval
Design
Incorporation
HHSC Style Guide

( Precise UX/UI Look and Feel ) Style Guide Lead
( UX/UI Team )
Not dictate code format, but External Vendor Teams

Does influence Code ReUse
Shared Software Code Base

( Code ReUse via 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
Carpenters
Painters Electricians
Plumbers
Your Texas Benefits ( YTB )
Style Guide : Real World Implementation
Service Delivery Center ( SDC )
HHSC Style Guide
Single Point of Effort
Targeted UI Products UX Design Toolsets

Facilitate Style Guide
Vendors - Contractors

Style Guide UX/UI Directive
Major Concentrations. 140 pages
Traditional Expanded
Style Guide 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 )
2. Artifacts
Design Model Tools
Four UX/UI Design Models & Methodology
(1) UseCase Diagram
• Common UI Design Models & Iconography
• Step-wise Refinement of UI & Business Logic
• Captures specific UX layer & instance

• Retrieve / Reuse prior UX projects
(2) UI Hierarchy
Modules
(3) UI Wireframes
Information “Puzzle” be UX structured
(4) Visual Flats

UseCase Diagram . 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 )

UI Hierarchy Module . Icon Usage
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”

Axure
• Acumen blend
( UI Design, Usability, Info Architecture )

UI Wireframe . Icon Usage
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 )
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 UX Project Samples
2.1 Full Project Lifecycle
2.2 Reverse Engineer

2.1 Full UX Lifecycle Sample
Raw Business Requisites -> UseCase -> UI Hierarchy -> Visual Flats

Login Password Reset Web App . Raw Requisites
Texas HHSC Business / IT Stakeholders

External Consultancy . 5 pages recommendation
EIAM Web App Enterprise Solution

Industry standards Refinements
criteria to criteria

Login Password Reset Web App . UseCase Diagram
2.1.1 UseCase Diagram
Create Business Logic Relationship Link Logic Flows & Interdependencies

Project Caption Header Login Password Reset Web App . UseCase #1 . Cover Page
UseCase definition
UseCase Icons Legend

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

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

• 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

• 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

• 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
• 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

Login Password Reset Web App
2.1.2 UI Hierarchy Chart
Set Navigation Flow Create Navigation Hierarchy

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 )

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

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

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 )

Login Password Reset Web App . Visual Flats | 4.0 Forgot Password

Forgot Password”
• Enter UserID
• Captcha Text to prevent hacker

automated scripting

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

2.1.5 Password Reset

Email Message Sample
( Embedded Password Reset Message & Link )

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

2.1.6 User Email Link to Security

Questions Page
( Token . UserID . Lifetime )

Login Password Reset Web App . Visual Flats | 10.1 Security
Questions Page with Captcha

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

Login Password Reset Web App . Visual Flats | 10.2 Create New User Password

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 )

Login Password Reset Web App . Visual Flats | 10.2(B) 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

Login Password Reset Web App . Visual Flats | 10.2(C) Password Creation Error

• “10.2(C) Password Creation

Error”, an instance of this 10.2
web page
• Showcasing Password Creation

Error Message status

Login Password Reset Web App . Visual Flats | 10.3 New User Password Confirmed

New User Password Confirmed”
• New User Password created,

saved, ready for immediate use
• SDC Login Page button link

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

2.2 Reverse Engineer UX Sample
White Board Requisites -> UI Mockups -> UseCase Diagrams

YTB = Your Texas Benefits
YTB & LTSS Whiteboard Flow
LTSS = Long Term Service & Support
Business Stakeholder Creation
• “White Board” with mission-critical business logic for web app

• Rote re-memorization of business flow for each session

YTB Visual Flats ( UI Mockup ) Set
Vendor Staff Creation
Page 1
Mockup Sample
… Page 295
• 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 )

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 & LTSS UseCase Diagram-2 . Reverse Engineered
• UX Designer review all 295 UI mockups

Anonymous Login ( non-Gated ) • Trace all UI navigation paths and silos
• Reconstitute “structured map” based on information architect

YTB & LTSS UseCase Diagram-2 . Reverse Engineered
• Quick visual queue via information partition Authenticated Login ( Gated )

• Assign indices for audience reference

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”

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

3. Acumen
Acumen & Skillset Evolution
3-Tier Career Approach
Collaborative Efforts
Employee Colleague
UX/UI Designer Business & IT Stakeholders
( no prior graphic or
UI design experience )
UI Visual Flats ( Enriched Mockups )

Site Personas
Tier 1
Graphics Designer
Web or Desktop Publication

Tier 2
Information Architect or
UI Designer
Tier 3
User Experience Designer
UseCase . UI Hierarchy . UI Wireframe Texas HHSC . Social Services IT 59
4. Final Remarks
Final Remarks
UX/UI Design – Business Logic & Information Flow “Puzzle” Solution
Harness Design Acumen Targeted & Stepwise Refined UI Design Facilitate Business Initiatives,
( Graphics, Information, User Persona ) ( UseCase, Wireframe, Visual Flats ) IT Governance & Client Adoption

धयवाद

UX - UI Design (PDFDrive)

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

UX - UI Design (PDFDrive)

Uploaded by

Copyright:

Available Formats

HHSC Social Services – IT . .

UX/UI Design : Methodology . Artifacts . Acumen

Common Strategy & Artifacts

One Vision . One Effort

( Kai Tzan Guan )

( Bi Shu Yao Nah Dao Tzai Dao )

Texas HHSC . Social Services IT 4

(A) Tribal Knowledge

(B) Transitory Vendor

(C) Variable Design Artifacts

• Knowledge Relevance Challenge – Time vs. Obsolescence

Texas HHSC . Social Services IT 7

• Vendors Transition In, Transition Out

Texas HHSC . Social Services IT 8

Business Whiteboard Flowchart UI Wireframes

UseCase Flow UI Wireframe

• To harness Synergetic Cross-Enterprise Effort

Texas HHSC . Social Services IT 9

PA Steering Committee Collaborative IT Teams

Texas HHSC Portal Authority

Standards Internal Business & IT Teams

HHSC Style Guide

Not dictate code format, but External Vendor Teams

Shared Software Code Base

Targeted End Product

Vendors & Contractors

Targeted UI Products UX Design Toolsets

Texas HHSC . Social Services IT 14

Applet UI Workflow Behavior

• Captures specific UX layer & instance

Information “Puzzle” be UX structured

(4) Visual Flats

Texas HHSC . Social Services IT 17

• 8 Icons, Common IT Standards

• Track Internal or External System Flows

Texas HHSC . Social Services IT 18

• 5 Icons, Common IT Standards

• Each Module = One UI / Web Page

• Identify “gated” or “choke points”

Texas HHSC . Social Services IT 19

• 8 Icons, Common IT Standards,

• Mission-critical Display Elements

• No Color, Font Typeface, Brand Imagery

• Align with Business - Marcom - Brand teams

• “Fill In” details from UI Wireframe

Texas HHSC . Social Services IT 21

2.1 Full Project Lifecycle

2.2 Reverse Engineer

Texas HHSC . Social Services IT 22

Texas HHSC . Social Services IT 23

Texas HHSC Business / IT Stakeholders

EIAM Web App Enterprise Solution

Texas HHSC . Social Services IT 24

2.1.1 UseCase Diagram

Create Business Logic Relationship Link Logic Flows & Interdependencies

Texas HHSC . Social Services IT 25

UseCase Icons Legend

• User goto Reset Password Page

• User enters UserID

• Correct UserID, Email sent to User with

• Incorrect UserID, no error notice either

Texas HHSC . Social Services IT 27