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

Fish Fingers & Custard: How to give your client...

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

WordCamp Milwaukee 2013

James Barrett

June 08, 2013
Tweet

More Decks by James Barrett

Other Decks in Design

Transcript

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

    THEY WANT, EVEN IF THEY DON’T KNOW THEY WANT IT.
  2. 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.
  3. 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.”
  4. 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.”
  5. 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.”
  6. 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.
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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.