Site planning: Letting User Experience Guide Workflow


Published on

Too many websites start with a list of functionality, and get straight into building out wireframes and prototypes without a solid sense of who their users are and what experience they're looking to have with your site. The result? A website that isn't effective at reaching the audience that you need to reach, or extra work re-doing things during development once you realize that users don't actually need it, or need something different.

This presentation outlines a simple, practical approach to user experience that you can use to start a site plan on the right foot.

Slides from a session presented at Design for Drupal Camp Boston, June 2010.

Published in: Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Site planning: Letting User Experience Guide Workflow

  1. 1. <ul>Drupal site planning </ul><ul>Letting user experience guide workflow </ul><ul>@danigrrl </ul>
  2. 2. <ul>The process </ul><ul><li>Identify who you want – and who you don't want – to visit your site
  3. 3. Use “want” list to identify specific audience targets. Establish: </li><ul><li>Personality traits
  4. 4. Content preferences
  5. 5. Key content “landing areas”
  6. 6. Interaction preferences </li></ul><li>Turn “landing areas” into wireframes/prototypes based on established content and interactive preferences.
  7. 7. Use wireframes to determine site workflow: modules, views, blocks, etc. </li></ul>
  8. 8. Getting down to basics t <ul><li>Think on your feet
  9. 9. Use mindmaps, sketchbooks and whiteboards to quickly sketch out ideas
  10. 10. Iterate
  11. 11. Refine through research </li></ul>
  12. 12. Want/Not Want <ul><li>Helps figure out content (i.e. how do you attract the people you want and turn off the ones you don't?)
  13. 13. Makes it easier to lose functionality that doesn't fit the ultimate goal </li></ul>
  14. 14. <ul>Practical example. </ul>Here's a guy. His name is Joe. Joe is a serial entrepreneur. Type A, with a wicked case of ADD. He launches new businesses because he can't sit still for too long, and finds the best people he can to run them. While he tries to be smart with his money, he has no issue paying well if he's confident he has the right person for the job. He's looking for someone to help him launch a website for his latest venture.
  15. 15. <ul>What does Joe want to see? </ul><ul><li>The quality of your work (portfolio)
  16. 16. The types of clients you work for (client list, home page)
  17. 17. Insight on how you think (process, blog)
  18. 18. How to get in touch with you (contact information) </li></ul>AND REALLY NOTHING ELSE.
  19. 19. <ul>How does he want to interact with these things? </ul>Joe's a busy guy. He thinks visually, not verbally. He will likely click around on a couple of different links, but he's a skimmer. Priorities: <ul><li>Focus on visuals rather than text
  20. 20. Give the option of reading, but don't require it
  21. 21. Don't make him work to find important information (especially contact info) </li></ul>
  22. 22. So where are Joe's “landing pages?” <ul><li>Project landing page
  23. 23. Project node page
  24. 24. Clients page
  25. 25. Process page
  26. 26. Contact page </li></ul>
  27. 27. <ul>Constructing the wireframes </ul>Portfolio: will probably click around, maybe wants to see a bit of information about the project, but mostly wants to see the pictures. New >> Current ^
  28. 28. <ul>Constructing the wireframes </ul>Process: Joe's a busy guy. He prefers visuals to words, and tends to skim. He doesn't need all the details; just a high-level overview. He needs to trust that you know what you're doing. New >> Current ^
  29. 29. <ul>Constructing the wireframes </ul>Blog: will probably skim through a couple of entries, click on a couple that interest him, maybe check out a couple of tags here and there. If he likes what he sees, he wants to be able to comment or subscribe to the feed. v New >> Current ^
  30. 30. <ul>Breaking it down </ul>Use the wireframes to identify the key views, classes, blocks, etc. that you need to create.
  31. 31. <ul>Thanks! </ul><ul>Any questions? </ul><ul>@danigrrl </ul>
  32. 32. <ul>Thanks! </ul><ul>Any questions? </ul>