SlideShare a Scribd company logo
1 of 20
Fish Fingers &
Custard:
HOW TO GIVE YOUR CLIENT WHAT THEY WANT,
EVEN IF THEY DON’T KNOW THEY WANT IT.
James Barrett
Senior UX Consultant, Magenic
The Value of Discovery Sessions
Engage, Define, and Plan.
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.
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.”
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.”
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.”
Gathering Requirements
You don’t know where you are until you know where you aren’t.
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.
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
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
Sorting through the data
Find a needle in a stack of needles.
Affinity Mapping
One of these things is a lot like the other…
Affinity Map Process
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
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
Screen Map
Do you know where you’re going to?
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
The Wrap up
We’re almost done…
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.
Questions?
jim@brts.us
@seejimtweet
http://www.slideshare.net/jamesbarrett52438174

More Related Content

Similar to Fish fingers & custard

Silverlight won't save your user experience - you will!
Silverlight won't save your user experience - you will!Silverlight won't save your user experience - you will!
Silverlight won't save your user experience - you will!Shane Morris
 
Browsee - AI assisted tool to improve User Experience on your Website
Browsee - AI assisted tool to improve User Experience on your WebsiteBrowsee - AI assisted tool to improve User Experience on your Website
Browsee - AI assisted tool to improve User Experience on your WebsiteShraddhaSrivastava78
 
HTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & PlanningHTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & PlanningPaul Crimi
 
Data-Driven Design for User Experience
Data-Driven Design for User Experience Data-Driven Design for User Experience
Data-Driven Design for User Experience Emi Kwon
 
Craig Bradford Driftrock MeetUp
Craig Bradford Driftrock MeetUpCraig Bradford Driftrock MeetUp
Craig Bradford Driftrock MeetUpDistilled
 
Certified Scrum Product Owner: class desk, posters and photos
Certified Scrum Product Owner: class desk, posters and photosCertified Scrum Product Owner: class desk, posters and photos
Certified Scrum Product Owner: class desk, posters and photosAlexey Krivitsky
 
05 DIGI CREATIVE people&process
05 DIGI CREATIVE people&process05 DIGI CREATIVE people&process
05 DIGI CREATIVE people&processSheSaysCREATIVE
 
Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Michele Ide-Smith
 
How To Grow Your Agency With Data Capture
How To Grow Your Agency With Data CaptureHow To Grow Your Agency With Data Capture
How To Grow Your Agency With Data CaptureQuickTapSurvey
 
Design for Good or Evil. World Usability Day & Limina
Design for Good or Evil. World Usability Day & LiminaDesign for Good or Evil. World Usability Day & Limina
Design for Good or Evil. World Usability Day & LiminaLimina
 
NYU Web Intensive - Week 3 Class 1
NYU Web Intensive - Week 3 Class 1NYU Web Intensive - Week 3 Class 1
NYU Web Intensive - Week 3 Class 1studiokandm
 
Daniel Rabinovich Web20 San Francisco
Daniel Rabinovich Web20 San FranciscoDaniel Rabinovich Web20 San Francisco
Daniel Rabinovich Web20 San FranciscoDaniel Rabinovich
 
Product Management 2010 02 16
Product Management 2010 02 16Product Management 2010 02 16
Product Management 2010 02 16Gareth Knight
 
WellsFargo Collaborative Roadmapping Presentation
WellsFargo Collaborative Roadmapping PresentationWellsFargo Collaborative Roadmapping Presentation
WellsFargo Collaborative Roadmapping PresentationEnthiosys Inc
 
Final Year Project Presentation
Final Year Project PresentationFinal Year Project Presentation
Final Year Project PresentationSyed Absar
 
The Professional Design Process
The Professional Design ProcessThe Professional Design Process
The Professional Design Processugencarelle
 

Similar to Fish fingers & custard (20)

Behavioral Analytics: Stop Guessing. Get Clarity - Priyanka Ved, Microsoft
Behavioral Analytics: Stop Guessing. Get Clarity - Priyanka Ved, MicrosoftBehavioral Analytics: Stop Guessing. Get Clarity - Priyanka Ved, Microsoft
Behavioral Analytics: Stop Guessing. Get Clarity - Priyanka Ved, Microsoft
 
Silverlight won't save your user experience - you will!
Silverlight won't save your user experience - you will!Silverlight won't save your user experience - you will!
Silverlight won't save your user experience - you will!
 
Browsee - AI assisted tool to improve User Experience on your Website
Browsee - AI assisted tool to improve User Experience on your WebsiteBrowsee - AI assisted tool to improve User Experience on your Website
Browsee - AI assisted tool to improve User Experience on your Website
 
Trends & Tools in UX
Trends & Tools in UXTrends & Tools in UX
Trends & Tools in UX
 
HTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & PlanningHTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & Planning
 
Data-Driven Design for User Experience
Data-Driven Design for User Experience Data-Driven Design for User Experience
Data-Driven Design for User Experience
 
Craig Bradford Driftrock MeetUp
Craig Bradford Driftrock MeetUpCraig Bradford Driftrock MeetUp
Craig Bradford Driftrock MeetUp
 
The Odd Couple of UX Design
The Odd Couple of UX DesignThe Odd Couple of UX Design
The Odd Couple of UX Design
 
Certified Scrum Product Owner: class desk, posters and photos
Certified Scrum Product Owner: class desk, posters and photosCertified Scrum Product Owner: class desk, posters and photos
Certified Scrum Product Owner: class desk, posters and photos
 
05 DIGI CREATIVE people&process
05 DIGI CREATIVE people&process05 DIGI CREATIVE people&process
05 DIGI CREATIVE people&process
 
Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013
 
How To Grow Your Agency With Data Capture
How To Grow Your Agency With Data CaptureHow To Grow Your Agency With Data Capture
How To Grow Your Agency With Data Capture
 
Design for Good or Evil. World Usability Day & Limina
Design for Good or Evil. World Usability Day & LiminaDesign for Good or Evil. World Usability Day & Limina
Design for Good or Evil. World Usability Day & Limina
 
NYU Web Intensive - Week 3 Class 1
NYU Web Intensive - Week 3 Class 1NYU Web Intensive - Week 3 Class 1
NYU Web Intensive - Week 3 Class 1
 
Personas And Scenarios
Personas And ScenariosPersonas And Scenarios
Personas And Scenarios
 
Daniel Rabinovich Web20 San Francisco
Daniel Rabinovich Web20 San FranciscoDaniel Rabinovich Web20 San Francisco
Daniel Rabinovich Web20 San Francisco
 
Product Management 2010 02 16
Product Management 2010 02 16Product Management 2010 02 16
Product Management 2010 02 16
 
WellsFargo Collaborative Roadmapping Presentation
WellsFargo Collaborative Roadmapping PresentationWellsFargo Collaborative Roadmapping Presentation
WellsFargo Collaborative Roadmapping Presentation
 
Final Year Project Presentation
Final Year Project PresentationFinal Year Project Presentation
Final Year Project Presentation
 
The Professional Design Process
The Professional Design ProcessThe Professional Design Process
The Professional Design Process
 

Fish fingers & custard

  • 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 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.

Editor's Notes

  1. Empowers the client with a voice in the design / production of the project: Projects go much better when the client feels involved.Saves you time, saves the client money, and saves heartache on both sides: Good discovery sessions cut down on the number of revisions, which saves you time, decreases the production saving the client money, and makes everyone happy.Helps vet ideas and organize features before one pixel is drawn or one line of code is written. Feature requests half way into design or production can have cascading affects throughout the project.
  2. In this instance, the core of the issue is that they want to increase traffic. While a blog would accomplish that, educating the client on the amount of work that goes into a blog (content writing, comment pruning, etc) may not be something the want to focus on. Fit the feature to the client.
  3. Buzz words drive company owners insane! Possibly a previous freelancer could have filled there heads with all sorts of things that they needed. While keeping up with modern technologies, it’s important to vet the reasoning behind those decisions – Find the right solution.
  4. There are big differences both programmatically and budgetary between a mobile “site” and a mobile app. Find out the experience the client wants users to have before commiting to one or the other.
  5. Hands on activities put a different kind of energy in the room, but its important to read your client.Tell the “I Just don’t like the color blue” storyDon’t start designing in the middle of the session. You might go down a rabbit hole and miss a key piece of information that renders that design useless
  6. HE’s are good only for current sites.
  7. Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. Match between system and the real worldThe system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. User control and freedom Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. Error prevention Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action. Recognition rather than recall Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. Flexibility and efficiency of use Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. Help and documentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.
  8. Define affinity
  9. Explain how some towers can exist under the same label, and that if a tower is too long, there is a good chance it should be two or more towers.