Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fish Fingers & Custard: How to give your client what they want, even if they don’t know they want it.

Fish Fingers & Custard: How to give your client what they want, even if they don’t know they want it.

WordCamp Milwaukee 2013

A74cfc2ac33be24e9b2392dbd331e634?s=128

James Barrett

June 08, 2013
Tweet

Transcript

  1. Fish Fingers & Custard: HOW TO GIVE YOUR CLIENT WHAT

    THEY WANT, EVEN IF THEY DON’T KNOW THEY WANT IT.
  2. James Barrett Senior UX Consultant, Magenic

  3. The Value of Discovery Sessions Engage, Define, and Plan.

  4. Discovery Sessions… ! Empowers the client with a voice in

    the design / production of the project ! Saves you time, saves the client money, and saves heartache on both sides. ! Helps vet ideas and organize features before one pixel is drawn or one line of code is written.
  5. When your client says… “I want a blog on my

    company’s website.” “I want more traffic on my site.” “I heard that having a blog on my company’s website would make more people visit it.”
  6. When your client says… “I want HTML 5 on my

    site.” “Everyone’s talking about HTML 5, and I don’t want to be left behind.” “I don’t want my site to be obsolete.”
  7. When your client says… “I need a mobile app for

    my site.” “Mobile’s big right now, and I don’t want to miss out.” “My site needs to be accessible to the growing mobile user base.”
  8. Gathering Requirements You don’t know where you are until you

    know where you aren’t.
  9. General Guidelines ! Be interactive; get the client involved in

    the process with hands-on activities. ! Listen. Then listen some more. Then listen even more. ! Absorb now. Design later.
  10. Gathering Information ! Stakeholder Interviews ! Listen for patterns !

    Look for Golden Nuggets. ! Shadowing Users ! Bring a camera ! Check for artifacts ! Heuristic Evaluation ! Evaluate. Don’t Critique ! Keep it simple and direct
  11. Nielsen’s Heuristics ! Match between system and the real world

    ! User control and freedom ! Consistency and standards ! Error prevention ! Recognition rather than recall ! Flexibility and efficiency of use ! Aesthetic and minimalist design ! Help users recognize, diagnose, and recover from errors
  12. Sorting through the data Find a needle in a stack

    of needles.
  13. Affinity Mapping One of these things is a lot like

    the other…
  14. Affinity Map Process Feature 1 Feature 1 Step 1: Write

    down your discovered features on 3 x 5 cards: Step 2: Organize your cards based on “affinity”. Feature 1 Feature 4 Feature 3 Feature 10 Feature 9 Feature 7 Feature 6 Feature 8 Feature 5 Feature 2 Feature 11 Feature 12 Feature 13 Feature 14 Feature 15 Feature 16 Feature 17 Feature 18
  15. Affinity Map Process Step 3: Label your towers Feature 1

    Feature 4 Feature 3 Feature 10 Feature 9 Feature 7 Feature 6 Feature 8 Feature 5 Feature 2 Feature 11 Feature 12 Feature 13 Feature 14 Feature 15 Feature 16 Feature 17 Feature 18 Label 1 Label 2 Label 3 Label 4 Label 5
  16. Screen Map Do you know where you’re going to?

  17. Screen Map Process Step 1: Define your “root.” Step 2:

    Define Secondary Navigation Step 3: Define Tertiary and Remaining pages Step 4: Apply Technical Labels
  18. The Wrap up We’re almost done…

  19. The WordPress Factor ! Knowing what features matter most before

    design and development will make choosing plugins & custom coding easier. ! As you find similar projects (photo blogs, corporate sites, etc) you can identify design patterns that will help streamline your design / development ! Performing exercises like Screen Mapping will help define which template files you need to account for.
  20. Questions? jim@brts.us @seejimtweet http://www.slideshare.net/jamesbarrett52438174