ux/ui design : methodology . artifacts . acumen · ( precise ux/ui look and feel ) style guide lead...

62
Texas HHSC . Social Services IT 1 One Vision, One Effort UX/UI Design : Methodology . Artifacts . Acumen 3 August 2015 Leon Lee . [email protected] HHSC Social Services – IT . .

Upload: vunguyet

Post on 15-Feb-2019

225 views

Category:

Documents


5 download

TRANSCRIPT

Page 1: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

Texas HHSC . Social Services IT 1One Vision, One Effort

UX/UI Design : Methodology . Artifacts . Acumen3 August 2015

Leon Lee . [email protected]

HHSC Social Services – IT . .

Page 2: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 3: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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 )

Page 4: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

Texas HHSC . Social Services IT 4

Presentation Format

1. MethodologyStrategic Challenges & Resolutions

2. ArtifactsCommon UX.UI Design Tools

3. AcumenCross-leverage team expertise

Page 5: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

Texas HHSC . Social Services IT 5

1.1 Methodology Business Challenges

Page 6: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

Texas HHSC . Social Services IT 6

Strategic Business Impasse

(A) Tribal Knowledge

(B) Transitory Vendor

Teams

(C) Variable Design Artifacts

Page 7: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 8: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 9: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 10: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

Texas HHSC . Social Services IT 10

1.2 Methodology Resolution & Governance

Page 11: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 12: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 13: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

Texas HHSC . Social Services IT 13

Style Guide : “House” Analogy

Painters Electricians

Plumbers

Carpenters

BuildersLandscapers

Architect Blueprint

Single Point of Effort

Targeted End Product

Vendors & Contractors

Page 14: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 15: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 16: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

Texas HHSC . Social Services IT 16

2. ArtifactsDesign Model Tools

Page 17: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 18: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 19: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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 )

Page 20: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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 )

Page 21: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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 )

Page 22: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

Texas HHSC . Social Services IT 22

2.2 Reverse Engineer

Texas HHSC UX Project Samples

2.1 Full Project Lifecycle

Page 23: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

Texas HHSC . Social Services IT 23

2.1 Full UX Lifecycle Sample

Raw Business Requisites -> UseCase -> UI Hierarchy -> Visual Flats

Page 24: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 25: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 26: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

Texas HHSC . Social Services IT 26

Login Password Reset Web App . UseCase #1 . Cover PageProject Caption Header

UseCase Icons Legend

UseCase definition

Page 27: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 28: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 29: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 30: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 31: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 32: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 33: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

Texas HHSC . Social Services IT 33

Login Password Reset Web App

2.1.2 UI Hierarchy Chart

Set Navigation Flow Create Navigation Hierarchy

Page 34: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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 )

Page 35: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 36: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 37: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

Texas HHSC . Social Services IT37

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.

Page 38: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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 )

Page 39: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 40: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 41: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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 )

Page 42: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 43: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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 )

Page 44: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

Texas HHSC . Social Services IT 44

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

Page 45: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

Texas HHSC . Social Services IT 45

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 )

Page 46: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

Texas HHSC . Social Services IT 46

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

Page 47: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

Texas HHSC . Social Services IT 47

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

Page 48: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

Texas HHSC . Social Services IT 48

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

Page 49: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

Texas HHSC . Social Services IT 49

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

Page 50: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

Texas HHSC . Social Services IT 50

2.2 Reverse Engineer UX Sample

White Board Requisites -> UI Mockups -> UseCase Diagrams

Page 51: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 52: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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 CreationPage 1

… Page 295

Mockup Sample

Page 53: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

Texas HHSC . Social Services IT 53

YTB & LTSS UseCase Diagram-1 Cover Page

UX Designer CreationProject Caption Header

UseCase Icons Legend

UseCase definition

Page 54: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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 )

Page 55: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 56: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 57: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 58: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

Texas HHSC . Social Services IT 58

3. Acumen

Page 59: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 60: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

Texas HHSC . Social Services IT 60

4. Final Remarks

Page 61: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

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

Page 62: UX/UI Design : Methodology . Artifacts . Acumen · ( Precise UX/UI Look and Feel ) Style Guide Lead ( UX/UI Team ) Internal Business & IT Teams External Vendor Teams Standards Approval

Texas HHSC . Social Services IT 62

ध�यवाद