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.

UX development – Drupaljam 2015

796 views

Published on

UX development presentatie, gegeven op Drupaljam 2015. Proces en tools om design en development beter op elkaar af te stemmen

Published in: Design
  • Be the first to comment

UX development – Drupaljam 2015

  1. 1. UX development Roy Scholten, Drupaljam 2015
  2. 2. Business DesignTechnology
  3. 3. Process
  4. 4. Definition Execution Double Diamond
  5. 5. Define the right problem/ opportunity Find the right solution Definition Execution
  6. 6. Define the right problem/ opportunity Find the right solution Plan ShipInsight Definition Execution
  7. 7. Define Design DevelopDiscover Plan ShipInsight Definition Execution Define the right problem/ opportunity Find the right solution
  8. 8. Define Design DevelopDiscover Plan ShipInsight Diverge DivergeConverge Converge Definition Execution
  9. 9. Define the right problem/ opportunity Define Design Find the right solution DevelopDiscover Definition Execution Plan ShipInsight
  10. 10. In more detail
  11. 11. Discover Frame the opportunity: “Why?” ‣ Market ‣ Customer ‣ Product strategy
  12. 12. Discover Market ‣ Who are the competitors? ‣ How do they differentiate? ‣ Market trend analysis Customer ‣ Persona ‣ User feedback ‣ Analytics Product strategy ‣ Value proposition ‣ Elevator pitch ‣ Prioritisation Frame the opportunity: “Why?”
  13. 13. Define Formulate the plan: “What?” ‣ Visual & interaction concept ‣ Experience strategy ‣ Content strategy ‣ Technical analysis
  14. 14. Define Concept ‣ Design mockups ‣ Customer journey maps ‣ Scenarios (epics) Experience ‣ Design principles ‣ Engagement metrics Content ‣ Key messages ‣ Messaging architecture Formulate the plan: “What?”
  15. 15. Design Deliver the optimal solution: “How?” ‣ Design exploration ‣ Interactive prototyping ‣ Content modelling
  16. 16. Design Form ‣ Sketching ‣ Storyboards ‣ Style tiles Function ‣ Wireframes ‣ Interactive prototyping ‣ Usability testing Content ‣ Sitemap ‣ Content modelling Deliver the optimal solution: “How?”
  17. 17. Develop Deliver the optimal solution: “How?” ‣ Detailed design ‣ Content production ‣ Code
  18. 18. Develop Design ‣ Detailed mockups ‣ Component based style guides Content ‣ Content production Code ‣ Backend (content model) ‣ Frontend (visual design and interactions) Deliver the optimal solution: “How?”
  19. 19. Design makes strategy concrete Define Design Design supports engaging experiences DevelopDiscover Definition Execution Plan ShipInsight
  20. 20. Tools
  21. 21. Design Form ‣ Sketching ‣ Storyboards ‣ Style tiles Function ‣ Wireframes ‣ Interactive prototyping ‣ Usability testing Content ‣ Sitemap ‣ Content modelling Deliver the optimal solution: “How?”
  22. 22. Define Design Develop Form Function Content Design
  23. 23. Define Design Develop Form Function Content UX development Design & development
  24. 24. Creative brief Prototype Content model
  25. 25. Creative brief
  26. 26. Creative brief: making sure that everybody is working on the same project
  27. 27. Creative brief Define Design Develop Form Function Content
  28. 28. Short form creative brief ‣ Project objective ‣ Personas ‣ Scenarios ‣ Design principles
  29. 29. Short form creative brief ‣ Objective = Why. What are the business goals? ‣ Personas = Who. Target audience ‣ Scenarios = What. What do people want to achieve? ‣ Principles = How. The values that drive how it will work
  30. 30. Content model
  31. 31. Content model: a formal representation of structured content as a collection of content types & their inter- relationships.
  32. 32. Content model Define Design Develop Form Function Content
  33. 33. It’s not about pages
  34. 34. Content model
  35. 35. Content model ‣ Different content types ‣ Fields per content type ‣ Relationships between types
  36. 36. Training & Events Industry topics Resource library Consumer topics News AboutContact
  37. 37. Training & Events Industry topics Position papers Facts & Figures Topic Success stories Position papers Topic Success stories Position papers Facts & Figures Topic Resource library Facts & Figures Re- sources Videos Info- graphics Market data Case studies Slides Consumer topics Article Success stories Video Article Success stories Video Article Video Article News Blog News-letters Industry news About Staff JobsContact
  38. 38. Content model
  39. 39. ndustry topics Resource library Consumer topics News About Content model Concept Design Implement
  40. 40. Resources Prototype
  41. 41. Prototype: an early sample, model or release of a product, built to test a concept or process or to act as a thing to be learnt from
  42. 42. Prototype Define Design Develop Form Function Content
  43. 43. Static deliverables are static
  44. 44. Why prototype?
  45. 45. Easier to understand = better feedback
  46. 46. Responsive!
  47. 47. Share the URL, use it on your own device
  48. 48. Forces you to use real content, working links
  49. 49. Prototypes can be tested
  50. 50. Prototyping is a team sport
  51. 51. Dus!
  52. 52. Define Design DevelopDiscover Plan ShipInsight Double Diamond Define the right problem/ opportunity Find the right solution
  53. 53. UX development Work together to fill the gaps
  54. 54. Instead of (only) wireframes…
  55. 55. UX development Creative brief Content model Prototype
  56. 56. Dankuwel
  57. 57. Resources ‣ Content modelling ‣ Short form creative brief ‣ UX checklist on github ‣ Usability rules of thumb ‣ The Pragmatic Designer’s 10 Things ‣ Books & more books ‣ All photos via New Old Stock

×