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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →

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

Transcript

20 slides
  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.

More Decks by James Barrett

Other Decks in Design