SlideShare a Scribd company logo
1 of 65
Download to read offline
XD with Flash Catalyst and
Flex Gumbo
Erik Loehfelm
What’s Experience Design?
What’s Experience Design?

‘The physical engagements between people, design,
computers (web technologies), and processes through
which the activation of a brand takes place.’
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
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...
•   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
Tools for an XD Pro
Tools for an XD Pro

Pen and Paper
Tools for an XD Pro

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

Pen and Paper
Adobe CS4: Fireworks, Flash, Photoshop, Illustrator
OmniGraffle
Typical Deliverables for an XD Pro
Typical Deliverables for an XD Pro

Project objectives
Typical Deliverables for an XD Pro

Project objectives
User needs - What problem are we solving?
“Implement solutions,
 not features.”
- John Geleynse,
  User Experience Evangelist, Apple
Typical Deliverables for an XD Pro

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

Project objectives
User needs - What problem are we solving?
Application de nition statement (big picture)
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
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
Typical Deliverables for an XD Pro

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

Project objectives
User needs - What problem are we solving?
Application statement
User Personas
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
Typical Deliverables for an XD Pro

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

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

Project objectives
User needs - What problem are we solving?
Application statement
User Personas
Flow diagrams
Wireframes
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
source: http://www.thinkxd.com
source: http://www.thinkxd.com
source: http://www.adaptivepath.com
source: http://www.adaptivepath.com
Enter Flash Catalyst!
Enter Flash Catalyst!

Disclaimer:
Enter Flash Catalyst!

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

Disclaimer:
I don’t work for Adobe.
I’m working on assumptions based on the MAX build.
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.
Adobe’s Proposed Work ow
Adobe’s Proposed Work ow

Design in CS4
Adobe’s Proposed Work ow

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

Design in CS4
Round-trip from CS4 to Catalyst and back
One-way from Catalyst to Flex Builder
Designer   Developer
The XD Pro’s Work ow with Catalyst
The XD Pro’s Work ow with Catalyst

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

‘Boxes and Arrows’ in Catalyst
Low delity prototypes in Catalyst
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
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
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
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
Experience Designer/Graphic Designer   Developer
Hmmm...
Hmmm...

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

Doesn’t quite work this way :(
CS4 doesn’t support importing/opening of FXP
Experience Designer/Graphic Designer   Developer
Experience Designer/Graphic Designer   Developer
Hmmm...

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

Doesn’t quite work this way :(
CS4 doesn’t support importing/opening of FXP
Round-trip from Flex -> Catalyst not intended
Experience Designer/Graphic Designer   Developer
Experience Designer/Graphic Designer   Developer
Workarounds
Workarounds

Low- delity component library in CS4
Workarounds

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

Low- delity component library in CS4
Version control from Flex -> Catalyst
Not WYSIWYG after Flex
Our Project - Weather Widget!
Our Project - Weather Widget!

Weather app from the iPhone
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

More Related Content

Similar to Erik Loehfelm - Experience Design with Flash Catalyst and Flex Gumbo

Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010
canarymason
 
Session on mockups
Session on mockupsSession on mockups
Session on mockups
Abdul Dibosh
 
Responsive Design - ISCTE
Responsive Design - ISCTEResponsive Design - ISCTE
Responsive Design - ISCTE
fidibiko
 
A2 Media Evaluation Question 2
A2 Media Evaluation Question 2A2 Media Evaluation Question 2
A2 Media Evaluation Question 2
Ashleat153
 
A2 Media Evaluation
A2 Media Evaluation A2 Media Evaluation
A2 Media Evaluation
Ashleat153
 
A2 Media Evaluation Q.2
A2 Media Evaluation Q.2A2 Media Evaluation Q.2
A2 Media Evaluation Q.2
Ashleat153
 
Evaluation question 2 A2 Media
Evaluation question 2 A2 MediaEvaluation question 2 A2 Media
Evaluation question 2 A2 Media
Ashleat153
 
Responsive, adaptive and responsible - keynote at NebraskaJS
Responsive, adaptive and responsible - keynote at NebraskaJSResponsive, adaptive and responsible - keynote at NebraskaJS
Responsive, adaptive and responsible - keynote at NebraskaJS
Christian Heilmann
 

Similar to Erik Loehfelm - Experience Design with Flash Catalyst and Flex Gumbo (20)

Alas, No Mind Meld: Designer-Developer Communication for a Harmonious Future
Alas, No Mind Meld: Designer-Developer Communication for a Harmonious FutureAlas, No Mind Meld: Designer-Developer Communication for a Harmonious Future
Alas, No Mind Meld: Designer-Developer Communication for a Harmonious Future
 
Responsive Web Design
Responsive Web Design Responsive Web Design
Responsive Web Design
 
Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010
 
Become a webdeveloper - AKAICamp Beginner #1
Become a webdeveloper - AKAICamp Beginner #1Become a webdeveloper - AKAICamp Beginner #1
Become a webdeveloper - AKAICamp Beginner #1
 
Session on mockups
Session on mockupsSession on mockups
Session on mockups
 
10 Things Designers Do That Piss Developers Off (And Vice Versa)
10 Things Designers Do That Piss Developers Off (And Vice Versa)10 Things Designers Do That Piss Developers Off (And Vice Versa)
10 Things Designers Do That Piss Developers Off (And Vice Versa)
 
Responsive Design - ISCTE
Responsive Design - ISCTEResponsive Design - ISCTE
Responsive Design - ISCTE
 
Why Can't We All Just Get Along? Improving Designer/Developer Collaboration
Why Can't We All Just Get Along? Improving Designer/Developer CollaborationWhy Can't We All Just Get Along? Improving Designer/Developer Collaboration
Why Can't We All Just Get Along? Improving Designer/Developer Collaboration
 
Embracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think ResponsivelyEmbracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think Responsively
 
Ubercool, pixel perfct & slick design… that just doesn't work
Ubercool, pixel perfct & slick design… that just doesn't workUbercool, pixel perfct & slick design… that just doesn't work
Ubercool, pixel perfct & slick design… that just doesn't work
 
A2 Media Evaluation Question 2
A2 Media Evaluation Question 2A2 Media Evaluation Question 2
A2 Media Evaluation Question 2
 
A2 Media Evaluation
A2 Media Evaluation A2 Media Evaluation
A2 Media Evaluation
 
A2 Media Evaluation Q.2
A2 Media Evaluation Q.2A2 Media Evaluation Q.2
A2 Media Evaluation Q.2
 
User Interface is King: Developing a Web App UI
User Interface is King: Developing a Web App UIUser Interface is King: Developing a Web App UI
User Interface is King: Developing a Web App UI
 
Evaluation question 2 A2 Media
Evaluation question 2 A2 MediaEvaluation question 2 A2 Media
Evaluation question 2 A2 Media
 
Preparing for the WebGeek DevCup
Preparing for the WebGeek DevCupPreparing for the WebGeek DevCup
Preparing for the WebGeek DevCup
 
HR DevFest - Web Design
HR DevFest - Web DesignHR DevFest - Web Design
HR DevFest - Web Design
 
Responsive, adaptive and responsible - keynote at NebraskaJS
Responsive, adaptive and responsible - keynote at NebraskaJSResponsive, adaptive and responsible - keynote at NebraskaJS
Responsive, adaptive and responsible - keynote at NebraskaJS
 
Preocupações Desenvolvedor Ágil
Preocupações Desenvolvedor ÁgilPreocupações Desenvolvedor Ágil
Preocupações Desenvolvedor Ágil
 
Enterprise UI/UX - design as code
Enterprise UI/UX - design as codeEnterprise UI/UX - design as code
Enterprise UI/UX - design as code
 

More from 360|Conferences

More from 360|Conferences (20)

InsideMobile Keynote
InsideMobile KeynoteInsideMobile Keynote
InsideMobile Keynote
 
Metaio Mobile Augmented Reality
Metaio Mobile Augmented RealityMetaio Mobile Augmented Reality
Metaio Mobile Augmented Reality
 
Web Os Hands On
Web Os Hands OnWeb Os Hands On
Web Os Hands On
 
Mobile Apps- Business Toolkit for the Manager
Mobile Apps- Business Toolkit for the ManagerMobile Apps- Business Toolkit for the Manager
Mobile Apps- Business Toolkit for the Manager
 
Making Real Money with Mobile Apps
Making Real Money with Mobile AppsMaking Real Money with Mobile Apps
Making Real Money with Mobile Apps
 
Unlocking Android
Unlocking AndroidUnlocking Android
Unlocking Android
 
Inside Mobile Widgets Publish
Inside Mobile Widgets PublishInside Mobile Widgets Publish
Inside Mobile Widgets Publish
 
You Know WebOS
You Know WebOSYou Know WebOS
You Know WebOS
 
Ignite Denver 4 Master Deck
Ignite Denver 4 Master DeckIgnite Denver 4 Master Deck
Ignite Denver 4 Master Deck
 
Chad Udell - Developers are from Mars, Designers are from Venus
Chad Udell - Developers are from Mars, Designers are from VenusChad Udell - Developers are from Mars, Designers are from Venus
Chad Udell - Developers are from Mars, Designers are from Venus
 
Wes Leonardo - Putting AIR into your Application
Wes Leonardo - Putting AIR into your ApplicationWes Leonardo - Putting AIR into your Application
Wes Leonardo - Putting AIR into your Application
 
Samuel Asher Rivello - PureMVC Hands On Part 1
Samuel Asher Rivello - PureMVC Hands On Part 1Samuel Asher Rivello - PureMVC Hands On Part 1
Samuel Asher Rivello - PureMVC Hands On Part 1
 
Adrian Pomilio - Flex Ajax Bridge and Legacy Applications
Adrian Pomilio - Flex Ajax Bridge and Legacy ApplicationsAdrian Pomilio - Flex Ajax Bridge and Legacy Applications
Adrian Pomilio - Flex Ajax Bridge and Legacy Applications
 
Samuel Asher Rivello - PureMVC Hands On Part 2
Samuel Asher Rivello - PureMVC Hands On Part 2Samuel Asher Rivello - PureMVC Hands On Part 2
Samuel Asher Rivello - PureMVC Hands On Part 2
 
Ryan Fishberg and Joan Lafferty - ItemsRenderers
Ryan Fishberg and Joan Lafferty - ItemsRenderersRyan Fishberg and Joan Lafferty - ItemsRenderers
Ryan Fishberg and Joan Lafferty - ItemsRenderers
 
Ryan Campbell - OpenFlux and Flex 4
Ryan Campbell - OpenFlux and Flex 4Ryan Campbell - OpenFlux and Flex 4
Ryan Campbell - OpenFlux and Flex 4
 
Ben Elmore - Do You Speak Flex
Ben Elmore - Do You Speak FlexBen Elmore - Do You Speak Flex
Ben Elmore - Do You Speak Flex
 
Francisco Inchauste - RIA Mojo - Making your Flex application standout with a...
Francisco Inchauste - RIA Mojo - Making your Flex application standout with a...Francisco Inchauste - RIA Mojo - Making your Flex application standout with a...
Francisco Inchauste - RIA Mojo - Making your Flex application standout with a...
 
Joe Johnston - FLEXperience - putting the Flex in UX
Joe Johnston - FLEXperience - putting the Flex in UXJoe Johnston - FLEXperience - putting the Flex in UX
Joe Johnston - FLEXperience - putting the Flex in UX
 
Bryc Barrand - The art of project management in large-scale Flex projects
Bryc Barrand - The art of project management in large-scale Flex projectsBryc Barrand - The art of project management in large-scale Flex projects
Bryc Barrand - The art of project management in large-scale Flex projects
 

Recently uploaded

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Recently uploaded (20)

Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 

Erik Loehfelm - Experience Design with Flash Catalyst and Flex Gumbo

  • 1. XD with Flash Catalyst and Flex Gumbo Erik Loehfelm
  • 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...
  • 6.
  • 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
  • 8.
  • 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
  • 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
  • 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.
  • 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
  • 52. Hmmm... Doesn’t quite work this way :( CS4 doesn’t support importing/opening of FXP
  • 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
  • 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