1

Notes for User Experience Strategy Discussion

Candace SoderstonKuali Rice

User Experience Architect

6-30-2011

2

User Experience Strategy (Notes for Discussion)

UX Philosophy:

• Deepen our collective understanding of people

• Bridge users directly into the design & evaluation process (users = IT Professionals, Application Developers, Business Analysts, Faculty/Staff, Students, etc.)

• Steward Best Practice:• Design tenets, patterns, principles, execution • Worthy user problems/goals • UX engagement rigor (what users?, what patterns?, when in the process?, how engaged?)

UX Goals:

• Maximize user uptake– immediate reaction and self-discovery / awareness

• Minimize user disruption – bridge from old to new (revolution is OK, with bridge)

• Maximize user productivity – known pain points and bottlenecks eliminated, desired new tasks enabled, perception of time to goal (significantly reduced)

3

Continuous Discovery

Continuous Envisioning

Continuous Development

Product Development

Experiential Prototypes / Architectures Business Propositions

End-to-end scenario definition

Deep Dive Observational studies -- “Day in the Life of … “

Prioritized tasks / pain points

Key learning

Key learning

Example: Integrated User Experience in Software EngineeringUser focus and cross-disciplinary teamwork, in parallel, concurrently – multiple time horizons (V1 & future):

Continuous Design & Definition

V1 V2 V3

4

UX covers multiple “time-horizons”

Early UX Engagement – before next release (2.1): Insights gathered on key user tasks before development moves on to future release: User prioritization across key UI/task improvement opportunities User needs / requirements (per identified task domain) Current pain points analysis Defined user scenarios for key tasks

Integrated UX Engagement – during release (2.0): Key task opportunities – designing the “how” in current release: UI interaction models, UI Specs, UI widgets Information architecture, navigation, labeling User/Application task flows Storyboard, Wireframes, Prototypes Visual design artifacts

Horizon 1 Major Partner: Developers & Technical Architect

Horizon 2 Major Partner: Business Analyst & Technical Architect

5

Building a Scalable User Experience Process:

End – Release to field

Graphic treatment& Refinements to all

Information presentationInteractive prototypes

Widgets (buttons, inputs)Refinements

Information ArchitectureApplication flows & concepts

Wireframes, storyboards

Defined user scenariosFunctionality required to meet

business & user needs

User task prioritization:User goals, tasks, habits

perceptions & context

Start -- Business NeedsOriginal model above: Jesse James Garrett, 2000

“Platinum” UX starts @ strategy

“Silver” UX starts @ structure

“Bronze” UX starts @ skeleton

“Basic Health” UX starts @ surface

“Gold” UX starts @ scope

No UX for some projects(but they can use common

design specs & artifacts)

6

Ultimate Objective from early research -- Understand communities’/users’ priorities

Customer Dissatisfaction with Current Solutions

Customer Ratings of Future Task

Importance

High

Low

Low High

Strategic Opportunity

Differentiation

Rate & Pace

Avoid/ Exit

7

Comparative Design

Walkthrough

Task Analysis

BenchmarkAssessment

PrototypeDesign

Evaluations

Competitor Evaluation

Design Validation Beta Survey

1

2

3

4

5

6

Typical UX Activities: Timeline and Methodologies

1. Understand users, their environment, the tasks they perform, and the importance/satisfaction with how those task are currently performed

8

2. Conduct expert user assessment of key tasks on competitor products

Comparative Design

Walkthrough

Task Analysis

BenchmarkAssessment

PrototypeDesign

Evaluations

Competitor Evaluation

Design Validation Beta Survey

1

2

3

4

5

6

Typical UX Activities: Timeline and Methodologies

9

Comparative Design

Walkthrough

Task Analysis

BenchmarkAssessment

PrototypeDesign

Evaluations

Competitor Evaluation

Design Validation Beta Survey

1

2

3

4

5

6

3. Create high level mockup of new design and evaluate with users

Typical UX Activities: Timeline and Methodologies

10

Comparative Design

Walkthrough

Task Analysis

BenchmarkAssessment

PrototypeDesign

Evaluations

Competitor Evaluation

Design Validation Beta Survey

1

2

3

4

5

6

4. Refine the design, conduct user assessments of prototypes with iterative evaluations and improvements

Typical UX Activities: Timeline and Methodologies

11

Comparative Design

Walkthrough

Task Analysis

BenchmarkAssessment

PrototypeDesign

Evaluations

Competitor Evaluation

Design Validation Beta Survey

1

2

3

4

5

6

5. Validate the design with users in the context of defined task scenarios and a ‘real’ environment

Typical UX Activities: Timeline and Methodologies

12

Comparative Design

Walkthrough

Task Analysis

BenchmarkAssessment

PrototypeDesign

Evaluations

Competitor Evaluation

Design Validation Beta Survey

1

2

3

4

5

6

6. Compare finished product to competitor product(s) with representative users to verify that usability objectives have been met

Typical UX Activities: Timeline and Methodologies

13

Affinity with key future directions (ARC, TRC, Foundation) Need-State of the current UI (or lack of) Relationship with key user pain points Team passion & belief in importance of the area, long-

term impact, innovation-coolness, visibility across community

AND amount of effort & resources available / time in cycle!

Prioritization framework for UX coverage:

14

Getting Creating Designing Creating Managing Managing Managing

Started Applications Workflow Rules Organization Identity Notifications

Understanding Current Solutions: Likes and Dislikes?

Deployment

Research

and

Design

Install, Setup,

Configure, Migrate, Upgrade, Update

KRAD

Research

and

Design

KRMS

Research

and

Design

KIM

Research

and

Design

Personas

Great Kuali UX – Great resulting community Uptake!

Key User Scenarios

UX Scenarios

Persona / profiles

KEW

Research

and

Design

KOM

Research

and

DesignUI Specs & Models

WireframesWidgets

Prototypes

UX across the Landscape for Kuali Rice?

KEN

Research

and

Design

15

Determine UX coverage model for 2.1 projects:

June 2011Feb 2012Oct 2011

-----------------------------------------------------First months:Immersion / bootcamp into Kuali:1. KRMS tactical UX improvements2. KRAD Accessibility - research standards / tools,

evaluations of 2.03. Gap analysis:

• Define UX research needed for 2.1• Form user groups needed for 2.1 (up to 3

groups, 3 demographics profiles)• Review/edit/add new material into Rice

User’s Guide?

-------------Top Rice 2.1 UX candidates:• KRAD UX (structure, skeleton, surface – arch/design)• KEW UX (strategy - research)• Getting started (scope)• (Import/Export?)

-------------------------------------------Rice 2.0 end & 2.1 Requirements candidates:Prioritize / select key UX task domains for 2.1 and coverage model: • Ease of getting started? – none?• Creating / assembling apps? (KRAD) - Silver• Creating workflow? (KEW) – Platinum (beginning)• Creating/editing rules? (KRMS) – none?• Managing identity? (KIM) – none?• Managing organizations? (KOM) – none?• Managing notifications? (KEN – Import/Export) – none?

16

Rice UX – 2.1 work items - in context

End – Release to field

Graphic treatment& Refinements to all

Information presentationInteractive prototypes

Widgets (buttons, inputs)Refinements

Information ArchitectureApplication flows & concepts

Wireframes, storyboards

Defined user scenariosFunctionality required to meet

business & user needs

User task prioritization:User goals, tasks, habits

perceptions & context

Start -- Business NeedsOriginal model above: Jesse James Garrett, 2000

Workflow UI research – user requirements &

current tools UI review

KRAD 2.1 work

17

Technical Architecture

Content Publishing

Business Analysis / Planning

SW Development

User Experience

ArchitectureUser-centered, cross-

disciplinaryTeam formation

The project manager conveys priorities from ARC & board, coordinates the staffing and plan, schedules and ensures process/intersects, removes obstacles, tracks data to objectives, reviews and makes, approves, and owns decisions (with direction from ARC, TRC, Rice board).

The cross-disciplinary team crosses functions and together designs and manages to the objectives / targets, engages with users in feedback/validation exercises, interprets input, turns it into design & architecture decisions -- cross-facets/functions.

Items that are controversial and can’t be conclusively decided in the cross-disciplinary teams go to program & executive team with recommendations driven by data (customer / user).

Typical skills in user-centered design team:

Project Management

18

Typical skills in user-centered design team, cont:

Example Team Structure

Business Analyst / Market Strategy & Planning

··Segment Definitions and Characteristics expertise··Identification of Software Solutions and Description of their offerings in feature/function, and task/environment terms··University requirements/Technology forecasting expertise..Surrogate input for some end user segments

Information Developer

··Instructional / training design expertise ··Communication / technical concepts expertise··Documentation packaging expertise ··Translation expertise··Online / Hardcopy prototypes

Lead Technical Architect

··SW Architecture expertise ··SW Programming expertise ··SW Packaging expertise..SW Prototypes, schematics, & functional models··Industry/Technology forecasting expertise

Software Developer

··SW & UI Programming expertise ..SW Prototypes, schematics, & functional models

Marketing / Communications

··Advertising and Point-of-Sale materials··Current customer & channel contact··Knowledge of competitive situations··Knowledge of cross-cultural marketing needs··Impact of design on marketability – expertise··Communication

Support & Service

··Impact of design on service costs – expertise··History of current field problems··Current customer contact ··Help desk planning

and Design

• UI interaction models / sequence / steps / obstacles• UI designs: hand drawings / storyboards / wireframes /

prototypes• Visual and Physical Design expertise• Color / size / layout / balance / positioning• Aesthetics / metaphor / imaging / visual grammar

User Experience Architecture, Research

• User needs / habits / abilities / wants (including special needs audience / accessibility / color-blindness, etc.)

• User profiles / persona definitions • Opportunity maps (most important/frustrating tasks) • Use-case scenarios – user task scenario definitions• Competitive evaluation - hand-on, user experience

19

In addition to focus on key task

domains, there are “horizontal” UX

aspects that benefit all tasks / features

for UX leadership

see next slides

20

Some Horizontal UX Aspects (for strategy discussion )

1. Common, re-usable UI controls & templates framework -- architecture & library

2. Common persona definitions/understanding across feature teams

3. Accessibility focus for standards compliance & leadership

4. Common Install, Setup, Configuration, Migration, Upgrade, Update - Architectural Framework and Requirements

5. Error message Architecture/framework, message database, action-orientation, language

6. Terminology control – Strategy, Research, Dictionary / Lexicon / Ontology

7. Unifying portal for discovery & launchpoints – populated by Kuali functions that are installed, per individual’s authorization/role?

21

Aspects of UI Development Process Maturity:

Common, re-usable UI controls and frameworks

Free design space across feature teams

No UI guidance or review , no commonality

Common UI templates / models

Common UI guidelines / objectives

UI design process in placeSome projects usingSome user involvement

Mature

Immature

Common Artifacts

TeamworkAspects

No design process formalized – UI task flow & design done while executingNo user involvement

All key projects using UI design processUsers evaluating all key projects (structured methodology, sampling control and non-biasing approach)

22

UI Controls – Example Design PatternsPatterns represent optimal solutions to common interaction design problems within specific contexts. Examples:

• Data Views (grids, tables, lists)

• Form edit views & mechanics• Property views• Status / notifications• Breadcrumb/Path• Start/Home page portals

framework• Paginate (‘chunking’) • Dashboard Views• Wizard framework• Monitor Long-Running

Ops/Tasks

• How to Launch Action/Task• Multi-select• Drag-drop• Next/Back• Scroll• Explore • Browse• Search• Filter• Tag

23

Details: Shared UI controls library

Envision a UI controls library that all can use:• Use of the standard controls expected/required in all Kuali specs.

• All developers browse the UI controls library first before spec’cing / executing. Awareness promoted

• Innovation solicited and shared – PMs/Devs across the community who think they can do a better control can submit a prototype to a UI architecture review board for review/evaluation, to get full support:

• If deemed an improvement, it replaces or adds to the current control and all feature teams inherit the benefit.

• Otherwise, it goes into a community “sandbox” area for all to see and play with for future ideation, but does not get service/support in the official Kuali set (free ‘open-source-like’ model, alpha code). Wiki/blog content.

• Library includes complex controls/frameworks, (Wizards, etc.), not just OS-level controls.

• On the web for all to use.

• Easy to find through our and other websites.

Objective: Users can transfer their learning!Software is UI compatible!Developers can share UI primitives and therefore spend more time on other

challenges!

See: https://wiki.kuali.org/display/STUDENT/User+Interaction+Model

(from KS team, W.Washington et.al.)

Others: http://fluidproject.org/http://dojotoolkit.org/widgetsGoogle's widget libraryYahoo's widget library

24

Details: Umbrella, goal-based portal?

Single Unifying Kuali Application Portal design, inclusive for all users?

Enable role separation / authorization / delegation /

collaboration

Enable customization by institution (granular roles/permissions)

Enable customization by users (their own frequently-used function page).

Enable users to handle role changes/evolution, collaboration, delegation through their familiar portal

25

Key UX needs? Easy discoverability & navigation to features / tasks

Adaptive / flexible UI - enable role-based, task-based, and team-based workspace UI. Allow all roles to use same UI framework – populate w/ appropriate tasks.

Work-flow delegation & authorization model to facilitate separation of duties as well as exception scenarios

Action-based management ‘only show me what I need to be concerned about’

System and business process metrics – e.g., notifications on key business indicator thresholds

26

Terminology control? – Strategy, Research, Dictionary / Lexicon / Ontology

Point of Contact for formative research and coordination / control of terminology?

This work is in the front-end, early UI concept development phase, before improvements are defined and before specs are written.

Skills in psycho-linguistics and research methodologies.

Liaison with industry-wide standards bodies, universities, other MS divisions’ lexicons.

Research techniques: contextual inquiry, card-sorting, concept/affinity mapping, cloze procedures, multiple choice/matching.

Consistent & standard terminology simplifies user experience.

(Example above from a job posting for SAS)

27

Roles overlap – some tasks are done by multiple “personas”

Roles change – tasks done by one persona shift to another

Tasks vary in frequency, difficulty, importance --

What do we know?

task1 task2 task3 task40

2

4

6

8

10

12

14

Average Scores

DifficultyImportanceFrequency

28

IT Pros & information worker/end users have much in common:

Spend most of their electronic time in email, internet and spreadsheets.

Are challenged with constant multi-tasking and interruption, and carry their learning from one tool to another.

Expect to be able to do all tasks through a GUI.

Want to be able to traverse through software in both object/action and action/object sequences, depending on which better fits the immediate goal.

29

There are also differences in IT Pro behavior vs information worker/end users

They expect tasks to be “scriptable”.

They want better integration across GUIs and command line/scripting capabilities.

Example: Do task for the first time through a GUI, then use the underlying script output used by the GUI as a template for subsequent tasks (able to copy/paste & edit)

30

Brainstorming Exercise:

What UI and UX aspects are … … most difficult to achieve now in 2.0? …… need UI widget or model for 2.1? …… need additional focus in 2.1? …

(See results at https://docs.google.com/a/kuali.org/document/d/1OWWn07CBwxJtFGXYP1Y4gXBijg5PL61K_fhu75AHAVw/edit?hl=en_US

31

Appendix

for optional viewing …

next slides are one example from proprietary software for enterprises (Users = IT Professionals)