USER EXPERIENCE DESIGN

• Customer journey

• Scenarios

• Use cases

• User stories

UX

UX værktøjskassen

Disciplines

UX designninja

User research practices

Information architecture

Visual design

Interaction design

Editing & curating

Concept development

Design proces management

PERSONAS

DESIGN FOR USERS

needs

experiences

goals

thoughts

context of use

emotions

expectations

CUSTOMER JOURNEY MAP

PERSONA

Oracle . CX Design Bootcamp. http://bit.ly/cxdesign

What is a Customer Journey Map?

cus!tom!er jour!ney map

! visually illustrates customers’ processes, needs, & perceptions throughout their interaction and relationship with an organization

[ Example Journey Maps ] http://bit.ly/QrMfH3

http://bit.ly/NMdWZe http://bit.ly/PAsw6J

SCENARIO

PERSONA

SCENARIOS

Scenarios describe likely goal-driven interactions between types of users (personas) and the system.

• Consists of goals, expectations, motivations, actions and reactions

• Aims to mirror the real context and usage

• Does not yet include system-specific solutions E.g.: “Robert clicks on a green button...”Better : “Robert proceeds to...”

USER CASE

PERSONA

USE CASEA Use Case is "an end to end sequence of interactions between an actor and a system that yields a result of observable value to an actor”.

• Actor does something

• System does something

• Actor does something else

• System does something else

USER STORIES

PERSONA

USER STORIES

Written sequences of actions and events that lead to an outcome

• Good stories are standalone, short and testable

• Bridge between users, designers and developers

• A quick way to process new requirements

“As a <role>, I want to <do what >so that I could <benefit how>.”

USER STORIES• Describes one specific need

• Not too detailed

• Testable

“As an organizer I want to click on various days in calendar

I want to provide several meeting day options.”

NEXT UP:

Prototyping - continued

Prototypes & wire frames

Prototype

Information architecture

Interaction design Graphic design

Purpose: for testing AND for exploring conceptual ideas the designer is putting into the solution!!

Prototypes & wire frames

• Paper prototyping

• Low fidelity prototype

• High fidelity prototype

Paper prototyping• Quick and cheap to produce. • Ease to redesign based on testing and findings

through the process

http://www.pinterest.com/unhaengels/paper-prototyping-ux/

https://www.youtube.com/watch/?v=9wQkLthhHKA

http://www.lynda.com/Web-Interaction-Design-tutorials/Foundations-UX-Prototyping/133349-2.html

Low fidelity prototyping• Created on computer

• simple button links might work

• Get a sense of flow and experience

Tools:

Powerpoint/keynote

Balsamiq Mockups

Axure

High fidelity prototyping• May include real content

• simple button links should work

• Get a sense of experience and aesthetics

• To get client buy-in and support

Tools:

Html

Adobe CS tools (Muse)

axure

Balsamiq mock ups

Paper prototypingNote taker Facilitator “Computer”

Case 1: use your real life project to come up with an app

example: An app with a point system for frequent bus travellers

Paper prototyping

Case 2:

Restaurant wants to put their wine menu on a tablet, so guests can find the right wine that goes with their meal. Create a paper prototype to explore how a user interface could work.

Assignment:

Create together 4-5 screens on paper. (Remember your C.R.A.P learning)

Paper prototyping

Example

Test your paper prototype

2-3 randomly selected groups will test their prototype on a subject!