Download - UX/UI Design : Methodology . Artifacts . Acumen

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

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

Leon Lee . Texas HHSC

HHSC Social Services – IT . .

Texas HHSC . Social Services IT 2

UX Strategic VenueCollaborative Brand Tagline

One Vision . One Effort

Business Stakeholders . IT Associates . Vendor Teams

Common Strategy & Artifacts

Integrated Methodology


UX Strategic Venue TaglineOld 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. MethodologyStrategic Challenges & Resolutions

2. ArtifactsCommon UX.UI Design Tools

3. AcumenCross-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

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


(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


(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


1.2 Methodology Resolution & Governance


Texas HHSC Portal Authority (PA)Single Point of Project Approval

PA Steering CommitteeFinal Arbitrator

Portal Authority Works to Ease Web JamsSource : www.hhsc.state.tx.us/newsletter/2015/05/11/

PA Management CommitteeAdvisory Recommendations

Optimize Project CostUI & Code ReUse Cross AgenciesCollaboration

Common HW/SW Environment

EnterpriseStyle Guide

Business Teams

IT TeamsCollaborativeEfforts

( UX/UI Discipline )

MajorDirectives

http://www.hhsc.state.tx.us/newsletter/2015/05/11/


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, butDoes influence Code ReUse


Style Guide : “House” Analogy

Painters Electricians

Plumbers

Carpenters

BuildersLandscapers

Architect BlueprintSingle Point of Effort

Targeted End Product

Vendors & Contractors


Style Guide : Real World Implementation

HHSC Style GuideSingle Point of Effort

Targeted UI Products

Vendors - Contractors

Service Delivery Center ( SDC )

Your Texas Benefits ( YTB )

UX Design ToolsetsFacilitate Style Guide


Style Guide UX/UI DirectiveMajor 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

ExpandedStyle Guide


2. ArtifactsDesign Model Tools


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


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

DesignApps


UI Hierarchy Module . Icon UsageSample : Mobile App . Designer Shoes

Axure

DesignApps

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


Axure

DesignApps

UI Wireframe . Icon UsageSample : 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 )


UI Visual Flat ( UI Mockup )Sample : Mobile App . Ladies Designer Shoes .

Home Page

DesignApps

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 )


2.2 Reverse Engineer

Texas HHSC UX Project Samples

2.1 Full Project Lifecycle


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


Login Password Reset Web App . Raw Requisites

External Consultancy . 5 pages recommendation Texas HHSC Business / IT Stakeholders

EIAM Web App Enterprise Solution

Industry standardscriteria

Refinements to criteria


Login Password Reset Web App . UseCase Diagram

2.1.1 UseCase Diagram

Create Business Logic Relationship Link Logic Flows & Interdependencies


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

UseCase Icons Legend

UseCase definition


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

37Texas HHSC . Social Services IT

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


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


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


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



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

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


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 )


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

10.2 (B) Password Auto-Check


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


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

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


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


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


YTB & LTSS Whiteboard FlowBusiness 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


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 ) SetVendor Staff CreationPage 1

… Page 295

Mockup Sample


YTB & LTSS UseCase Diagram-1 Cover PageUX Designer Creation

Project Caption Header

UseCase Icons Legend

UseCase definition


YTB & LTSS UseCase Diagram-2 . Reverse EngineeredYTB = Your Texas Benefits


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


YTB & LTSS UseCase Diagram-2 . Reverse EngineeredYTB = Your Texas Benefits


Authenticated Login ( Gated )• Quick visual queue via information partition• Assign indices for audience reference


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 EntitiesCBO = Community Based Organizations

• On-Demand Capture “Tribal Knowledge”• Document multi-point business logic• Not part of UI design, but part of business

logic


3. Acumen


Acumen & Skillset Evolution3-Tier Career Approach

Tier 1Graphics Designer

Tier 2Information Architect orUI Designer

Employee Colleague

( no prior graphic or UI design experience )

Tier 3User 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


4. Final Remarks


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


धन्यवा�द

Download - UX/UI Design : Methodology . Artifacts . Acumen

Top Related