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

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/