36
Liip Techtalk November 9 th 2010 Memi Beltrame: The UX Design Process Memi Beltrame The UX Design Process Creating User Experience from Research to Implementation Liip techtalk, November 9 th 2010

Elements of UX Design

Embed Size (px)

DESCRIPTION

An Overview on the Process of creating User Experience from Research to Implementation.

Citation preview

Page 1: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

Memi Beltrame

The UX Design Process

Creating User Experiencefrom Research to Implementation

Liip techtalk, November 9th 2010

Page 2: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

User ExperienceDesign

Content

BehaviourForm

Page 3: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

Content

BehaviourForm

Information Architects

GraficDesigners

InteractionDesigners

Page 4: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

No Design without Research

Page 5: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

No Design without Research

Who? What? Why? How?

Page 6: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

UX Design follows the 5S Pattern

Page 7: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

Abstract

Concrete

Page 8: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

Research

Implementation

Page 9: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

Strategy

Page 10: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

StrategyFind out● Context● Purpose/Range● Focus Group(s)● Mission Statement

Page 11: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

Scope

Page 12: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

ScopeFind out● Personas● Their Goals● Their Motivation● Their Usecases

Page 13: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

Personas A Short Introduction

Page 14: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

A Persona is a representative of a certeain user group.

Define Target Audience

Analyze Users Group Users Form Persona

Peter

Sue

Marc

Page 15: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

Personas● Are tangible● Provide a common ground for conversation ● Help prioritize tasks in regard to business relevance

Page 16: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

Personas● Name them● Give them a background ● Define their level of skills● Define motivation & needs

Page 17: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

The Weiss family Jeff & Lize Kevin & friends

Example: Swiss Winter Resort

Page 18: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

The Weiss family Jeff & Lize Kevin & friends

Who are they? What are their needs?

Example: Swiss Winter Resort

Page 19: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

Example: Swiss Winter Resort

The Weiss family Jeff & Lize Kevin & friends● Middle class couple● Jeff: Lawyer, Lize: Teacher● Travel a Lot● Like sports & nature● Want to find out on their own what suits them most

● Student● Very social snowboard nerd● Good offers are crucial to him● Likes adreanline kicks● Depends on public transport● Wants to get on the slopes as easily as possible

● Shoe-Shop owners with 2 kids● Have been here before once● Come by car● Only during school holidays● Want to be sure to get best offers to match their budget

● Need planning support

Page 20: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

Structure

Page 21: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

StructureFind out● Workflows● User Priorities: Tasks & Information

Page 22: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

Skeleton

Page 23: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

Skeleton

Translate Usecases and Tasks to Prototypical Screens

Page 24: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

Skeleton

Translate Usecases and Tasks to Prototypical Screens

Make Prototypes → Test → Iterate

Page 25: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

Skeleton

Tests verify assumptions on● Tasks● Workflows● Content

Page 26: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

Skeleton

Define Patterns for Interaction and Design Principles

Page 27: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

Surface

Page 28: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

Surface

Design Layouts and Grafical Elements.

Page 29: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

Surface

Implement Design and Interactions

Page 30: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

Surface

Implement Design and Interactions

Implement → Test → Iterate

Page 31: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

Surface

Tests give feedback on● Functionality● Content● Aesthetics

Page 32: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

Recap

Page 33: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

Mission, Focus Groups

Personas, Tasks

Workflows, Information Architecture

Prototypes, Design Patterns

Screens, Implementation

Page 34: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

Any Questions?

Page 35: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

Thank you!

Page 36: Elements of UX Design

Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process

Creative Commons Credits:

By Steve Polyakhttp://www.flickr.com/photos/spolyak/1031569673/

By David – Studio 757http://www.flickr.com/photos/studio757/4515640847/

By Sport Communitieshttp://www.flickr.com/photos/sportcommunities/2200759639/