Find out how to build real world user experiences using Adobe's newest products: Flash Catalyst and Flex Gumbo. I'll explore some best practices and pitfalls to watch out for in these early beta tools while building a prototype application from design through deployment. The audience will leave with an understanding of what these tools provide in their current builds, how they can be leveraged in the designer/developer workflow and some best practices for how to leverage their functionality in their own designs. I will provide all the source code and design notes for the application that we'll build.

1. XD with Flash Catalyst and
Flex Gumbo
Erik Loehfelm

2. What’s Experience Design?

3. What’s Experience Design?
‘The physical engagements between people, design,
computers (web technologies), and processes through
which the activation of a brand takes place.’

4. What’s Experience Design?
‘The physical engagements between people, design,
computers (web technologies), and processes through
which the activation of a brand takes place.’
Also termed UX or User Experience Design

5. What’s Experience Design?
‘The physical engagements between people, design,
computers (web technologies), and processes through
which the activation of a brand takes place.’
Also termed UX or User Experience Design
Multi-discipline: information architect, graphic design,
interaction design, cognitive sciences, usability
engineer, etc...

7. • 8GB Flash Drive
• 480-by-320-pixel resolution at 163 ppi
• Frequency response: 20Hz to 20,000Hz
• Quad-band (850, 900, 1800, 1900 MHz)
• Audio formats supported: AAC, Protected AAC,
MP3, MP3 VBR, Audible (formats 1, 2, and 3), Apple
Lossless, AIFF, and WAV

9. Tools for an XD Pro

10. Tools for an XD Pro
Pen and Paper

11. Tools for an XD Pro
Pen and Paper
Adobe CS4: Fireworks, Flash, Photoshop, Illustrator

12. Tools for an XD Pro
Pen and Paper
Adobe CS4: Fireworks, Flash, Photoshop, Illustrator
OmniGraffle

13. Typical Deliverables for an XD Pro

14. Typical Deliverables for an XD Pro
Project objectives

15. Typical Deliverables for an XD Pro
Project objectives
User needs - What problem are we solving?

16. “Implement solutions,
not features.”
- John Geleynse,
User Experience Evangelist, Apple

17. Typical Deliverables for an XD Pro
Project objectives
User needs - What problem are we solving?

18. Typical Deliverables for an XD Pro
Project objectives
User needs - What problem are we solving?
Application de nition statement (big picture)

19. Application de nition statement for iPhoto:
“Easy to use digital photo
editing, organizing, and
sharing app for casual and
amateur photographers.”
- John Geleynse,
User Experience Evangelist, Apple

20. Application de nition statement for iPhoto:
“Easy to use digital photo
editing, organizing, and
sharing app for medical
imaging professionals.”
- John Geleynse,
User Experience Evangelist, Apple

21. Typical Deliverables for an XD Pro
Project objectives
User needs - What problem are we solving?
Application statement

22. Typical Deliverables for an XD Pro
Project objectives
User needs - What problem are we solving?
Application statement
User Personas

23. Persona: Fred Fish
Fred Fish, Director of Food Services Background information
> Fred works at Boise Controls, a mid-sized manufacturer Fred grew up before computers and the Web were popular. He’s picked
of electronic devices used in home security systems. up enough to get by, but he’d rather use a cutting board than a keyboard.
> He supervises the chefs at each of the six sites and He started as a cook in a small restaurant and worked his way up to chef
oversees cafeterias and catering services. in a larger kitchen, then chef/manager of a small chain, and now works
> Not a big computer user, Fred can send email and use at Boise Controls. He’s a good manager and has seen many of his cooks
spreadsheets, but often needs help from his assistant. and chefs move on to their own restaurants, which pleases him.
> Personal: 55 years old, married, three grown children, Sometimes he prepares menus on his computer, but he might also write
Masters degree from Johnson & Wales University. them on paper and give it to his assistant to distribute.
“I’m a chef. Let’s get out of the office and into the kitchen!”
Key goals meal. They spend time in the kitchen On a good day, he can drag in some clip art
exploring each new dish. and do some formatting with fonts.
As a manager, Fred doesn’t get his hands
(literally) dirty the way he used to. He stops in When they settle on the quarterly menu, he He always had problems sending a message
at all the Boise Controls sites and sticks his sends the information out to the chefs, without the attachment, or an attachment
fingers into things once in awhile to stay in assistant chefs, site managers and his own with no message. That’s annoying and
touch with cooks and cooking. boss. embarrassing. That was one of the things
keeping him away from computers.
He wants to learn his computer tools, but not Some days, he asks his assistant to format the
at the expense of managing his people or menus. Other times he’ll do it with the new EZWRite seems to have some features to help
kitchens. EZWrite system they just installed on his with that. Anytime he writes something like
Macintosh laptop. “…the attached menu…” the program
Preparing & distributing menus prompts him if he doesn’t attach something. If
At the start of every quarter, he meets with the He’s figured out a lot of it, but not all of it. there were a Nobel Prize for software, he’d
head chefs and plans out the next quarter’s “One day,” he thinks, “someone has to figure nominate the people who designed this.
menus. That’s one of his favorite things out a way to reuse a menu layout so I don’t
because each chef gets to demonstrate a new have to start from scratch each time.”
Photo from Flickr, some rights reserved
source: http://www.user.com

24. Typical Deliverables for an XD Pro
Project objectives
User needs - What problem are we solving?
Application statement
User Personas

25. Typical Deliverables for an XD Pro
Project objectives
User needs - What problem are we solving?
Application statement
User Personas
Flow diagrams

26. Typical Deliverables for an XD Pro
Project objectives
User needs - What problem are we solving?
Application statement
User Personas
Flow diagrams
Wireframes

27. Typical Deliverables for an XD Pro
Project objectives
User needs - What problem are we solving?
Application statement
User Personas
Flow diagrams
Wireframes
Prototypes - Low Fidelity > High Fidelity

28. source: http://www.thinkxd.com

29. source: http://www.thinkxd.com

30. source: http://www.adaptivepath.com

31. source: http://www.adaptivepath.com

32. Enter Flash Catalyst!

33. Enter Flash Catalyst!
Disclaimer:

34. Enter Flash Catalyst!
Disclaimer:
I don’t work for Adobe.

35. Enter Flash Catalyst!
Disclaimer:
I don’t work for Adobe.
I’m working on assumptions based on the MAX build.

36. Enter Flash Catalyst!
Disclaimer:
I don’t work for Adobe.
I’m working on assumptions based on the MAX build.
Current application build doesn’t entirely support my
proposed approach.

37. Adobe’s Proposed Work ow

38. Adobe’s Proposed Work ow
Design in CS4

39. Adobe’s Proposed Work ow
Design in CS4
Round-trip from CS4 to Catalyst and back

40. Adobe’s Proposed Work ow
Design in CS4
Round-trip from CS4 to Catalyst and back
One-way from Catalyst to Flex Builder

41. Designer Developer

42. The XD Pro’s Work ow with Catalyst

43. The XD Pro’s Work ow with Catalyst
‘Boxes and Arrows’ in Catalyst

44. The XD Pro’s Work ow with Catalyst
‘Boxes and Arrows’ in Catalyst
Low delity prototypes in Catalyst

45. The XD Pro’s Work ow with Catalyst
‘Boxes and Arrows’ in Catalyst
Low delity prototypes in Catalyst
Iterate through higher delity prototypes in Catalyst

46. The XD Pro’s Work ow with Catalyst
‘Boxes and Arrows’ in Catalyst
Low delity prototypes in Catalyst
Iterate through higher delity prototypes in Catalyst
Catalyst to CS4 for introduction of styling and theme

47. The XD Pro’s Work ow with Catalyst
‘Boxes and Arrows’ in Catalyst
Low delity prototypes in Catalyst
Iterate through higher delity prototypes in Catalyst
Catalyst to CS4 for introduction of styling and theme
CS4 to Catalyst for high delity prototypes

48. The XD Pro’s Work ow with Catalyst
‘Boxes and Arrows’ in Catalyst
Low delity prototypes in Catalyst
Iterate through higher delity prototypes in Catalyst
Catalyst to CS4 for introduction of styling and theme
CS4 to Catalyst for high delity prototypes
CS4/Catalyst/Flex round-trip very high delity

49. Experience Designer/Graphic Designer Developer

50. Hmmm...

51. Hmmm...
Doesn’t quite work this way :(

52. Hmmm...
Doesn’t quite work this way :(
CS4 doesn’t support importing/opening of FXP

53. Experience Designer/Graphic Designer Developer

54. Experience Designer/Graphic Designer Developer

55. Hmmm...
Doesn’t quite work this way :(
CS4 doesn’t support importing/opening of FXP

56. Hmmm...
Doesn’t quite work this way :(
CS4 doesn’t support importing/opening of FXP
Round-trip from Flex -> Catalyst not intended

57. Experience Designer/Graphic Designer Developer

58. Experience Designer/Graphic Designer Developer

59. Workarounds

60. Workarounds
Low- delity component library in CS4

61. Workarounds
Low- delity component library in CS4
Version control from Flex -> Catalyst

62. Workarounds
Low- delity component library in CS4
Version control from Flex -> Catalyst
Not WYSIWYG after Flex

63. Our Project - Weather Widget!

64. Our Project - Weather Widget!
Weather app from the iPhone

65. Thanks!
360 ex@eloehfelm.otherinbox.com
http://erikloehfelm.blogspot.com
http://www.twitter.com/eloehfelm
http://www.adaptivepath.com/
iPhone Getting Started Videos - ADC Web Account at
http://developer.apple.com