Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Memi Beltrame
The UX Design Process
Creating User Exp...
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
User
Experience
Design
Content
Behaviour
Form
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Content
Behaviour
Form
Information
Architects
Grafic
...
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
No Design
without Research
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
No Design
without Research
Who? What? Why? How?
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
UX Design follows
the 5S Pattern
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Abstract
Concrete
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Research
Implementation
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Strategy
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Strategy
Find out
● Context
● Purpose/Range
● Focus G...
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Scope
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Scope
Find out
● Personas
● Their Goals
● Their Motiv...
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Personas
A Short Introduction
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
A Persona is a representative
of a certeain user grou...
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Personas
● Are tangible
● Provide a common ground
for...
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Personas
● Name them
● Give them a background
● Defin...
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
The Weiss familyJeff & Lize Kevin & friends
Example: ...
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
The Weiss familyJeff & Lize Kevin & friends
Who are t...
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Example: Swiss Winter Resort
The Weiss familyJeff & L...
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Structure
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Structure
Find out
● Workflows
● User Priorities:
Tas...
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Skeleton
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Skeleton
Translate Usecases and Tasks
to Prototypical...
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Skeleton
Translate Usecases and Tasks
to Prototypical...
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Skeleton
Tests verify assumptions on
● Tasks
● Workfl...
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Skeleton
Define Patterns for
Interaction and Design
P...
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Surface
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Surface
Design Layouts and
Grafical Elements.
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Surface
Implement Design and
Interactions
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Surface
Implement Design and
Interactions
Implement →...
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Surface
Tests give feedback on
● Functionality
● Cont...
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Recap
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Mission, Focus Groups
Personas, Tasks
Workflows,
Info...
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Any Questions?
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Thank you!
Liip Techtalk November 9th
2010
Memi Beltrame: The UX Design Process
Creative Commons Credits:
By Steve Polyak
http://www....
Upcoming SlideShare
Loading in …5
×

Elements of UX Design

9,804 views

Published on

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

Published in: Technology, Business, Design

Elements of UX Design

  1. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Memi Beltrame The UX Design Process Creating User Experience from Research to Implementation Liip techtalk, November 9th 2010
  2. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process User Experience Design Content Behaviour Form
  3. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Content Behaviour Form Information Architects Grafic Designers Interaction Designers
  4. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process No Design without Research
  5. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process No Design without Research Who? What? Why? How?
  6. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process UX Design follows the 5S Pattern
  7. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Abstract Concrete
  8. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Research Implementation
  9. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Strategy
  10. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Strategy Find out ● Context ● Purpose/Range ● Focus Group(s) ● Mission Statement
  11. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Scope
  12. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Scope Find out ● Personas ● Their Goals ● Their Motivation ● Their Usecases
  13. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Personas A Short Introduction
  14. Liip Techtalk November 9th 2010 Memi 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
  15. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Personas ● Are tangible ● Provide a common ground for conversation ● Help prioritize tasks in regard to business relevance
  16. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Personas ● Name them ● Give them a background ● Define their level of skills ● Define motivation & needs
  17. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process The Weiss familyJeff & Lize Kevin & friends Example: Swiss Winter Resort
  18. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process The Weiss familyJeff & Lize Kevin & friends Who are they? What are their needs? Example: Swiss Winter Resort
  19. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Example: Swiss Winter Resort The Weiss familyJeff & 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
  20. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Structure
  21. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Structure Find out ● Workflows ● User Priorities: Tasks & Information
  22. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Skeleton
  23. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Skeleton Translate Usecases and Tasks to Prototypical Screens
  24. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Skeleton Translate Usecases and Tasks to Prototypical Screens Make Prototypes → Test → Iterate
  25. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Skeleton Tests verify assumptions on ● Tasks ● Workflows ● Content
  26. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Skeleton Define Patterns for Interaction and Design Principles
  27. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Surface
  28. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Surface Design Layouts and Grafical Elements.
  29. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Surface Implement Design and Interactions
  30. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Surface Implement Design and Interactions Implement → Test → Iterate
  31. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Surface Tests give feedback on ● Functionality ● Content ● Aesthetics
  32. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Recap
  33. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Mission, Focus Groups Personas, Tasks Workflows, Information Architecture Prototypes, Design Patterns Screens, Implementation
  34. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Any Questions?
  35. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Thank you!
  36. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Creative Commons Credits: By Steve Polyak http://www.flickr.com/photos/spolyak/1031569673/ By David – Studio 757 http://www.flickr.com/photos/studio757/4515640847/ By Sport Communities http://www.flickr.com/photos/sportcommunities/2200759639/

×