The document outlines Memi Beltrame's presentation on the UX design process at a November 2010 Liip techtalk. The process involves 5 phases - strategy, scope, structure, skeleton, and surface. Each phase involves research such as focus groups and personas, prototyping, testing, and iteration to understand users and design the optimal experience from content to interactions. The goal is to translate user needs into a tangible design through prototyping and testing at each step.

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/