Site planning: Letting User Experience Guide Workflow

  • 2,705 views
Uploaded 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 …

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.

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,705
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
41
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1.
      Drupal site planning
      Letting user experience guide workflow
      @danigrrl
  • 2.
      The process
    • Identify who you want – and who you don't want – to visit your site
    • 3. Use “want” list to identify specific audience targets. Establish:
      • Personality traits
      • 4. Content preferences
      • 5. Key content “landing areas”
      • 6. Interaction preferences
    • Turn “landing areas” into wireframes/prototypes based on established content and interactive preferences.
    • 7. Use wireframes to determine site workflow: modules, views, blocks, etc.
  • 8. Getting down to basics t
    • Think on your feet
    • 9. Use mindmaps, sketchbooks and whiteboards to quickly sketch out ideas
    • 10. Iterate
    • 11. Refine through research
  • 12. Want/Not Want
    • Helps figure out content (i.e. how do you attract the people you want and turn off the ones you don't?)
    • 13. Makes it easier to lose functionality that doesn't fit the ultimate goal
  • 14.
      Practical example.
    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.
      What does Joe want to see?
    • The quality of your work (portfolio)
    • 16. The types of clients you work for (client list, home page)
    • 17. Insight on how you think (process, blog)
    • 18. How to get in touch with you (contact information)
    AND REALLY NOTHING ELSE.
  • 19.
      How does he want to interact with these things?
    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:
    • Focus on visuals rather than text
    • 20. Give the option of reading, but don't require it
    • 21. Don't make him work to find important information (especially contact info)
  • 22. So where are Joe's “landing pages?”
  • 27.
      Constructing the wireframes
    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.
      Constructing the wireframes
    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.
      Constructing the wireframes
    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.
      Breaking it down
    Use the wireframes to identify the key views, classes, blocks, etc. that you need to create.
  • 31.
      Thanks!
      Any questions?
      @danigrrl
  • 32.
      Thanks!
      Any questions?