For a Good User ExperienceUX Design Goals, Methods, Tools

& Tales

William Washington | WashingtonKevin Makice| Indiana

Kuali Student UX

Next-generation

People-centric

Rich user experience

Kuali Student Vision

Getting from here to there

Development Evaluation & Adoption Use

Here

Functional Needs

User Needs

Experience

Experience

Development Adoption Use

Design(iterations)

PrototypeEvaluate

Analysis

“Requirements emerge as users begin to see the evolving design...when they see what you're building, they'll say what they meant.”

- Alan Cooper

User Centered Design is a solution

Useful

Usable

Desirable

The Goals of UCD

“Design is not just what it looks like and feels like - Design is how it works.”

Steve Jobs

• A design discipline that is implemented through UCD

• Concerns itself with all aspects of a person’s experience with a product: behavior, form, and content.

User Experience Design (UX)

• Simplicity

• User Control & Freedom

• Orientation & Exploration

• Good metaphors

The UX Perspective

• Consistency & Standards

• Error prevention & recovery

• Good feedback

• Efficiency of use

• Good help, when needed

• Core Team: UX Strategy, Design Patterns, Navigation Architecture, etc.UXA & Sr. UX Designer on Core team

• Parallel Delivery Teams:Delivery of functional areasUX Designer on each Parallel Delivery Team

UX team & methodology are in place

Kuali Student is moving toward Agile development.

The system functions evolve from simple to complex through iterative development.

UX and UCD must fit into an Agile process

IterateBacklog & prioritize usability and functional enhancementsBacklog

Design & Developsimplest solution

Evaluate through implementation

The user interface of KS is built on an evolving Rice foundation – KRAD.

• Gaps exist……between what KRAD can do and what KS needs.

…between what KRAD can do and what developers can do.

• Gaps must be tracked and managed.

UX must work within technical constraints

Design patterns & style guide

UI templates & stencils for rapid prototyping

Well-managedUI framework gaps

Successful UX in an Agile context

Functional Gaps

UIMVisual Examples

Functional Gaps

Axure LibraryInteractive Widgets

Design patterns are time-tested solutions to recurring design problems.

User Interface Model (UIM)

Development

Quality Assurance

Collaborative Design

UX Dev PO

Backlog

Functional Gaps

UIMVisual Examples

The UIM is a key resource for PDT collaboration.

• Helps UX make UI decisions

• Provides sample code to Developers

• Reveals known gaps to help PO prioritize

Vision for the UIM

Functional Gaps

UIMVisual Examples

UI Patterns

• Early Analysis• UX Principles

UX Dev PM

UX Dev PO

Patterns are defined and validated

• User research identifies new design needs

• Core analysis expresses desired user interfaces

• PDT Development reveals real-world interaction solutions

Building the UIM

UI Patterns

PDT Development

• Collaborative Design & Development

Core

Functional Gaps

UIMVisual Examples

UI Patterns KS Kitchen SinkKRAD

Dev UI Dev UX

Building the UIM

SMEUsers

Validate UIM through

user testing

Rice Jiras KS Jiras

ORMock Code

Our collective knowledge is stored in the UIM.

• UX research informsthe rationale for what we need to build

• Kitchen Sink validates what can be built

• PDT iteration reveals new patterns to validate

Axure is software for wireframing and rapid prototypingof web and desktop applications.

Applying the UIM to Axure widgets

Functional Gaps

Axure LibraryInteractive Widgets

UX

The Axure widget libraries help UX build wireframes quickly.

• Encapsulates KS knowledge of the UI

• Matches current visual design

• Provides higher fidelity interactivity for rapid prototyping

Vision for the Axure Widget Library

Development

Quality Assurance

Collaborative Design

Backlog

Functional Gaps

Axure LibraryInteractive Widgets

Widgets are built in response to design decisions in UIM.

• Reflects current supported function and visual design

• Includes desired (but unsupported) UI behavior

• Requires periodic updates by a UX designer

Building the Axure widget libraries

UX

Functional Gaps

UIMVisual Examples

UX

Dev

UX in Action: An example

What do I do with this information? Where do I go?

Brainstorming with the UIM

Mockups with Axure

The State of the UIM

New Platform

Rice Platform (KRAD)Google Web Kit

June 2012

KD12 “Finished”Initial UIM

Futu

re

Desired

Validated

# Pa

tter

ns &

Com

pone

nts

Gap

2009

UI D

evel

oper

s

The State of Axure widget libraries

New Platform

Rice PlatformGoogle Web Kit

June 2012

KD12 “Finished”Initial UIM

Desired

Validated

# Pa

tter

ns &

Com

pone

nts

Futu

re

Gap

• UCD methods must fit into Agile development process

• UIM and Axure widgets encapsulate knowledge for quick design & prototyping

• Functional gaps in the UI framework must be well managed

For a good user experience in KS

• “Finish” the UIMDocument what we want/know

Dedicated UI Developer resources

• More user input as part of the processIncorporate user research into methodology

Evaluate UIM patterns with real users

Next Steps

Done!

Photo: http://www.flickr.com/photos/bahaius/5108145883

Questions?

“No shortcuts today. I’m in a hurry.” Swiss proverb

Photo: http://www.flickr.com/photos/jason_coleman/16103399

Bonus!