Post on 27-Jan-2015
description
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
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
User ExperienceDesign
Content
BehaviourForm
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
Content
BehaviourForm
Information Architects
GraficDesigners
InteractionDesigners
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
No Design without Research
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
No Design without Research
Who? What? Why? How?
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
UX Design follows the 5S Pattern
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
Abstract
Concrete
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
Research
Implementation
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
Strategy
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
StrategyFind out● Context● Purpose/Range● Focus Group(s)● Mission Statement
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
Scope
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
ScopeFind out● Personas● Their Goals● Their Motivation● Their Usecases
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
Personas A Short Introduction
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
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
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
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
The Weiss family Jeff & Lize Kevin & friends
Example: Swiss Winter Resort
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
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
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
Structure
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
StructureFind out● Workflows● User Priorities: Tasks & Information
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
Skeleton
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
Skeleton
Translate Usecases and Tasks to Prototypical Screens
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
Skeleton
Translate Usecases and Tasks to Prototypical Screens
Make Prototypes → Test → Iterate
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
Skeleton
Tests verify assumptions on● Tasks● Workflows● Content
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
Skeleton
Define Patterns for Interaction and Design Principles
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
Surface
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
Surface
Design Layouts and Grafical Elements.
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
Surface
Implement Design and Interactions
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
Surface
Implement Design and Interactions
Implement → Test → Iterate
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
Surface
Tests give feedback on● Functionality● Content● Aesthetics
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
Recap
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
Mission, Focus Groups
Personas, Tasks
Workflows, Information Architecture
Prototypes, Design Patterns
Screens, Implementation
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
Any Questions?
Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process
Thank you!
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/