sixty design tools
TRANSCRIPT
Design Tools
September 29, 2011
This work is licensed under the Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-nd/3.0/ or send a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.
Tool Name
What I need… The information or decisions (output) I need to move to the next step.
What I have… What I have for input, from a previous tool or somewhere else.
What I can do… My skills and available tools, and the time I have available.
element level
(A Note About Process)
There are literally 100’s of design processes. [12]
None of them are “right”.
(A Note About Process)A sure fire way to fail at a process is to work too hard to follow it. Even worse is forcing people to follow it. Judging a process based on how well people comply is like judging a product based on whether all the features were delivered on time—it misses the point.
-Jeff Patton
…in product software teams, we generally work on all types of software efforts, from very small fixes, performance improvements, and minor features, up to large projects and company-wide initiatives. It makes no sense to treat these all the same. The level of investment is totally different, the risks are totally different, and the techniques we use to ensure success are different.
- Marty Cagan [11]
Strategy
Strategy is where it all begins: What do we want to get out of the product? What do our users want?
strategy
Strategy Feedback
•broad direction•alignment with:
•the market •company culture •other products & direction •other opportunities
strategy
Strategy IxD Tools•ad-hoc personas•provisional personas•formal personas
•competitive analysis
•experience map
•concept map *•"unsliced" story map•"visiontype”•stakeholder interviews
•product manifesto
strategy
•design studio•SWOT analysis•heuristic review *
* exercise
Ad-Hoc Personas
Need
Have
Can
...collaborators to stop being self-referential, or to think more empathetically about real-world people with goals as input to real-world situations, and if it's ok if they're temporal.
strategy
...an imagination, the ability to describe the value of personas, and a team that would be accepting of this kind of tool.
...use any word processing or layout application, use a photo search site and write a tiny bit, and have one day available.
Description
Provisional Personas
Need
Have
Can
...collaborators to stop being self-referential, or to think more specifically about real-world people with goals as input to real-world situations, with more basis in reality than ad-hoc personas, and it's ok if they're temporal.
strategy
...access to product managers, support, or training staff who have some primary contact with users and you can get half a day with them, plus a few days or a week to put them together.
...run an affinity diagramming exercise and use any word processing or layout application, use a photo search site and write a tiny bit, and you have a few days available.
Description
Formal Personas
Need
Have
Can
...information to make decisions about product direction, collaborators to stop being self-referential, or to think more empathetically, as input to real-world situations, with a solid basis in reality, and you need them to hold up over time.
strategy
...time to do primary research, access to users or potential users, access to collaborators for one or two days to workshop the results, and a budget for stipends.
...do recruiting, screening and scheduling participants, do the research, provide a record of those conversations, run a persona workshop, use a photo search site and write a tiny bit, and you have several weeks to a few months available.
Description
Competitive Analysis
Need
Have
Can
... clear thematic direction for your product, to avoid or address competitors early.
strategy
...a clear and agreed-upon list of competitors.
...find or create an appropriate framework for conducting competitive analysis, write or diagram clearly, use a word processing or layout application, and have a week or two available.
Description
Experience Map
Need
Have
Can
...a collaboratively-developed, shared, and organized vision of the information gathered from research and a good jumping-off point for a story map.
...qualitative research.
...lead a workshop including all the people who conducted, saw or read about the research, and you have a few days.
strategy
Description
Experience Map
Choose a fewmodels
Decide which he wants
Buy the car
Make a list of stuff he wants
Search based on his criteria
Check best-looking cars
Check Consumer Reports
Test drive all of them
Ask his friend
Rent one
Find the cars locally
Physically visit the dealer
Search dealer reviews
Negotiate the cost
Get KBB and Edmunds prices
time
strategy
Example
Concept Map
Need
Have
Can
...a collaboratively-developed, shared, and organized vision of the information gathered from research and a good jumping-off point for a story map.
...qualitative research.
...lead a workshop including all the people who conducted, saw or read about the research, and you have a few days.
strategy
Description
‘Unsliced’ Story Map
Need
Have
Can
... move the team into more tangible territory with some agreement on stories around how a user would interact with the product.
...a group of people with some ideas about what the product might do or an experience map; representatives from product, engineering and design with the time and interest to participate.
...lead a storymapping workshop, and have a few days or a week available.
strategy
Description
‘Unsliced’ Story Map
Choose a fewmodels
Decide which he wants
Buy the car
Make a list of stuff he wants
Search based on his criteria
Check best-looking cars
Check Consumer Reports
Test drive all of them
Ask his friend
Rent one
Find the cars locally
Physically visit the dealer
Search dealer reviews
Negotiate the cost
Get KBB and Edmunds prices
time
strategy
Example
Visiontype
Need
Have
Can
...a tangible representation of big concepts to help generate focus and movement, something executives can understand and buy-in on, or a way to build key customer excitement.
...one or more big ideas, some ideas about personas, and agreement on some relatively specific stories or scenarios.
...create professional-looking mockups that you can make appear interactive through HTML, clickable PDFs or images, Flash, etc., and have one to several weeks.
strategy
Description
Stakeholder Interviews
Need
Have
Can
...to capture the input of any stakeholders, official or not, to get a sense for how they should be involved in the product going forward,
...stakeholders who care deeply about the outcome of the project.
...identify all the stakeholders(!), interview, distill and play back the results of the interviews, and have a few days or weeks.
strategy
Description
Product Manifesto
Need
Have
Can
...a clear statement of the priorities, beliefs and principles that guide the product team to provide focus and more easily resolve questions later.
...the big idea, reasonably focused.
...collaborate with Product Management and ideally engineering to write, and get buy-in from your team on a short product manifesto.
strategy
Description
Opportunity Assessmentstrategy
Product Manifesto – Orthogonal Tool
1. Exactly what problem will this solve? (value proposition)
2. For whom do we solve that problem? (target market)
3. How big is the opportunity? (market size)
4. What alternatives are out there? (competitive landscape)
5. Why are we best suited to pursue this? (our differentiator
6. Why now? (market window)
7. How will we get this product to market? (go-to-market strategy)
8. How will we measure success/make money from this product? (metrics/revenue strategy)
9. What factors are critical to success? (solution requirements
10. Given the above, what’s the recommendation? (go or no-go)
Design Studio
Need
Have
Can
...to involve many stakeholders or collaborative team members, and to move very quickly from one big idea to one or several ideas developed to structure or skeleton.
...some idea of a new product, target market, or opportunity.
...lead a large group of people in an intensive workshop setting, and have several days to a few weeks to plan, run, and then synthesize the output.
strategy
Description
SWOT Analysis
Need
Have
Can
...to understand why an existing product isn't doing what the business needs it to, or to provide clear thematic direction for a new product.
...an existing product.
...find or create an appropriate framework for conducting a SWOT analysis, write or diagram clearly, use a word processing or layout application, and a week available.
strategy
Description
Heuristic Review
Need
Have
Can
Description
...a prioritized list of ways to improve an existing product.
...an existing product.
...write and use any word processing or layout application, and have a few days or weeks, depending on the size of the product.
strategy
A cognitive walkthrough starts with a task analysis that specifies the sequence of steps or actions required by a user to accomplish a task, and the system responses to those actions.
The reviewer then walks through the steps asking themselves a set of questions at each step. Data is gathered during the walkthrough, and afterwards a report of potential issues is compiled.
- Wikipedia
Heuristic Reviewstrategy
Example
A pluralistic walkthrough uses group meetings where users, developers, and human factors people step through a scenario, discussing each dialogue element. [9]
Heuristic ReviewExample
strategy
Other Places to Look•backlog•customer feedback•traffic
•research / data from existing products
strategy
Scope
Scope transforms strategy into requirements: What features will the product need to include?
scope
Scope Feedback
• focus:• big ideas• themes• primary user or market targets
• generally what we're doing, for whom, and why
scope
Scope IxD Tools•"sliced" story map•prioritized personas•goal venn *
•product models
•illustrated storyboards
•written scenarios *•feature prioritization matrix
* exercise
scope
‘Sliced’ Story Map
Need
Have
Can
Description
...ideas and features sorted into priorities, including MVP to move forward on next steps, and agreed to by the larger team.
...an "unsliced" story map and any idea about how to prioritize (manifesto, prioritized personas, etc.), plus team members with availability and interest.
...get the core team in a room for a day or two, lead the slicing, and get a final thumbs-up / thumbs-down.
scope
‘Sliced’ Story MapExample
Choose a fewmodels
Decide which he wants
Buy the car
Make a list of stuff he wants
Search based on his criteria
Check best-looking cars
Check Consumer Reports
Test drive all of them
Ask his friend
Rent one
Find the cars locally
Physically visit the dealer
Search dealer reviews
Negotiate the cost
Get KBB and Edmunds prices
time
necess ity
release #1
release #2
release #3
scope
Prioritized Personas
Need
Have
Can
Description
...direction and focus to limit scope.
...any kind of personas.
...lead a heated session to drive agreement around the prioritization and document that agreement.
scope
Goal Venn
Need
Have
Can
Description
...a way to take into account and reconcile multiple sets of goals, especially to identify opportunities where they overlap.
...multiple sets of goals.
...work alone or with collaborator(s) over a few hours or days.
scope
Product Model
Need
Have
Can
Description
...more clarification or agreement from the team on what the product will and will not do, or inspiration or clarity from underlying objective truths.
...an at least general understanding of what the product will and will not do.
...use any kind of mapping tool (or pencil and paper) and have a few days to a few weeks.
scope
Illustrated Storyboards
Need
Have
Can
Description
...a tangible representation of big concepts to help generate focus and movement, something executives can understand and buy-in on, and you need it quickly.
...one or more big ideas, some ideas about personas, and agreement on some relatively specific stories or scenarios.
...create professional-looking stories, through sketching or illustration, and have a few days.
scope
Written Scenarios
Need
Have
Can
Description
...detailed real-world stories to bridge the gap between concept and implementation, strategy and scope, to be reviewed, collaborated on and approved by teams who prefer solo work and reading.
...personas with goals, and an understanding of strategy.
...write, and have a few days to a week.
scope
Feature Prioritization Matrix
Need
Have
Can
Description
...some way of sorting through and agreeing on prioritization of an overwhelming number of requests to be able to move forward.
...one or several big lists of features, requirements or stories (as in a backlog, PRD, help desk logs, etc.).
...get buy-in from product and engineering, do this kind of very focused and detailed work, use Excel, and have a few days or weeks.
scope
(remember to set up your scales so that a high number = good and a low number = bad or vice-versa)
scopeFeature MatrixExample
Structure
Structure gives shape to scope: How will the pieces of the product fit together and behave?
structure
Structure Feedback
• structural intent (utilitarian, entertaining, focuses, etc.)
• structural objects• priorities of structural objects• relationships between structural objects
structure
Structure IxD Tools•sketched flows *•user flows / storyboards•functional diagrams
•navigation model
•information architecture
•product maps
structure
Sketched Flows
Need
Have
Can
Description
...detailed stories to bridge the gap between scope and structure, to be created and approved by teams who prefer collaborating or visual representations, or to get an early sense of technical feasibility.
...personas of any kind, and a good understanding of strategy and scope.
...draw, and have a few days.
structure
User Flows
Need
Have
Can
Description
...detailed stories from the user perspective that take into account offline activities, more refined and "final" than sketched flows, to be created and approved by teams who prefer collaborating or visual representations, to share with stakeholders, or to get an early sense of technical feasibility.
...personas of any kind, possibly sketched flows, and a good understanding of strategy and scope.
...use an illustration tool and have one to several weeks.
structure
Functional Diagrams
Need
Have
Can
Description
...to understand or get agreement on a detailed map of how a system or set of systems work, and/or to check technical feasibility, to be reviewed, collaborated on and approved by teams who prefer visual representations.
...some understanding of strategy, scope, and any relevant business or engineering requirements.
...use an illustration tool and have one to several weeks.
structure
Navigation Model
Need
Have
Can
Description
...the relationship between the content and objects, agreement on organizational strategy, a sense of depth vs. breadth and how much each page must do.
...a broad idea (or several) of the content and objects and their priorities.
...use some kind of mapping tool (including pencil and paper) to map out options.
structure
Information Architecture
Need
Have
Can
Description
...to see whether the navigation model will hold up, to account for every page, and to see what the navigation elements will need to support (usually for a content-based site).
...a fairly detailed idea of the content and objects and agreement on their relationships and priorities (as from a navigation model).
...use some kind of mapping tool to map out options.
structure
Product Map
Need
Have
Can
Description
...to see what the areas of the site will be, to account for every page, to be able to see and rationalize systems across the site, and to see what each page will need to accommodate (usually for an app).
...a solid understanding of strategy and scope, and a good sense of what the objects are you'll be dealing with from workflows or similar.
...use a mapping tool and have one to several weeks.
structure
Skeleton
Skeleton makes structure concrete: What components will enable people to use the product?
skeleton
Skeleton Feedback
• general mood (powerful, simple, etc.)
• specific elements and information• hierarchy of elements• relationship between the elements
skeleton
Skeleton IxD Tools•concept sketches *•page framework•concept wireframes
•page type wireframes
•annotated wireframes (functional specifications)
•basic prototype•component library
* exercise
skeleton
Concept Sketches
Need
Have
Can
Description
…specific early reactions to my ideas from the Product Manager and engineering, a start on how key ideas might be instantiated in this project very quickly and without too much effort or time invested.
…an idea of what the product does and its scope, plus a few ideas about how that might play out.
…quickly draw broad areas of a screen, but only have a few hours.
skeleton
Page Framework
Need
Have
Can
Description
...to get agreement on the relationship between broad page areas, and the focus of the site.
...a solid sense of strategy, scope and structure — you know what the big pieces are. Sometimes some wireframes have been completed.
…quickly draw broad areas of a screen, and have a few hours to days.
skeleton
Concept Wireframes
Need
Have
Can
Description
…specific reactions to my ideas from the Product Manager, a start on how key ideas might be instantiated in this project.
…an idea of what the product does and its scope, plus a few ideas about how that might play out.
…quickly draw broad areas of a screen, and I have a few days to work out some ideas.
skeleton
Page Type Wireframes
Need
Have
Can
Description
...to get agreement on the elements of the page, their relationship to one another and functionality, as well as technical feasibility, without worrying about visual appearance.
...a solid sense of strategy, scope and structure — you know what the big pieces are and how they'll fit together. Often the next stage after workflows, maps or concept wireframes.
...use some kind of wireframing tool and have a week to several weeks available.
skeleton
Basic Prototype
Need
Have
Can
Description
...to develop a feeling of what it will be like to use the product, either for team or stakeholder buy-in, or for usability research.
...team agreement on detailed real world stories.
...create a rough prototype using paper, prototyping or illustration tools, and have one to several weeks.
skeleton
Component Library
Need
Have
Can
Description
...to reuse elements as part of a system to avoid complexity for you, the engineers and the users, and to simplify documentation going forward.
...a good understanding of several page elements.
...create and maintain detailed specifications of behavior, and use the system appropriately going forward.
skeleton
Surface
Surface brings everything together visually: What will the finished product look like?
surface
Surface Feedback
• visual appearance and mood: colors, fonts, spacing, etc.
• all graphics: buttons, logos, icons, etc.
• possibly copy and typos
surface
Surface D Tools•annotated wireframes / mockups•mood boards•visual direction comps
•final mockups
•detailed prototype
•production artwork•visual specification •design library•bugs
surface
Annotated Wireframes / Mockups
Need
Have
Can
Description
...to deliver a detailed description to engineering and QA so that it can be built as you've designed it.
...an agreed-upon set of objects, wireframes and elements.
…can write, diagram or animate a detailed description of how the states, functionality and element actions, including all possible cases.
surface
Mood Board
Need
Have
Can
Description
...to quickly narrow in on a visual direction with the core team and stakeholders.
...a good sense of your audience, but little other precedence.
...collect examples of images, objects, text, and sites into collections, and have a few days.
surface
Visual Direction Comps
Need
Have
Can
Description
...to narrow in on a specific visual design direction with the team.
...a solid sense of your audience, a general sense of visual direction from existing products or mood boards, and what one or several pages must accomplish from maps or wireframes.
...create a variety of polished mockups and have one to several weeks.
surface
Final Mockups
Need
Have
Can
Description
...to finalize visual design with the team, and to provide engineering with mockups of each page type.
...accounted for all page types with wireframes or maps and agreed on visual direction.
...create polished mockups and have one to several weeks.
surface
Detailed Prototype
Need
Have
Can
Description
...to show exactly what it will be like to use the product, either for team or stakeholder buy-in, for usability research, or as a specification for engineering and QA.
...team agreement on detailed real world stories, in the form of user flows or maps or a basic prototype.
...create a realistic-seeming prototype using paper, prototyping or illustration tools, and have one to several weeks.
surface
Production Artwork
Need
Have
Can
Description
...to deliver final, production-ready artwork to engineering.
...final page type mockups and an understanding of necessary variations.
...create production-ready artwork based on an understanding of how the page will be built, and have one to several days.
surface
Visual Specification
Need
Have
Can
Description
...to deliver a detailed description to engineering and QA so that it can be built as you've designed it.
...final page type mockups and an understanding of necessary variations.
...create a detailed specification based on an understanding of how the page will be built, and have one to several days.
surface
Design Library
Need
Have
Can
Description
...to reuse elements as part of a system to avoid complexity for you, the engineers and the users, and to simplify documentation going forward.
...agreed-upon final design for several page types and a set of elements that are reused from page to page.
...create and maintain detailed specifications of appearance, and use the system appropriately going forward.
surface
Bugs
Need
Have
Can
Description
...to respond to a product in development, to ensure it’s released as designed.
...access to the bug database engineering and QA are using, access to the product in development, and existing documentation.
...follow proper QA processes, file a clear bug and have a few hours to a few days or a week.
surface
Nota Bene
• For all of these, garbage in, garbage out.
• Agreements must be documented somewhere.
• These are some tools, not THE tools.
(We Didn’t Cover Research)
• “Back-Pocket” Research• Guerilla2 Research (airports)• Guerilla Research• Five for Fridays• Formal Usability• In-Home Visits
usabilit y e
thno
g raphic
Example Processes1. Formal personas
2. Competitive analysis
3. Unsliced story map
4. Prioritized personas
5. Sliced story map
6. Written scenarios
7. Storyboards
8. Product map
9. Concept wireframes
10. Page framework
11. Page type wireframes
12. Basic prototype
13. Mood boards
14. Visual direction comps
15. Final mockups
16. Detailed prototype
17. Production artwork
18. Visual spec
19. Widget library
More Reading1. Don’t Make Me Think, Steve Krug2. The Inmates are Running the Asylum, Alan Cooper3. The User is Always Right, Steve Mulder and Ziv Yaar4. The Elements of User Experience, Jesse James Garrett5. About Face: The Essentials of Interaction Design, Alan Cooper6. “From Use to User Interface”, Jeff Patton
http://www.slideshare.net/abcd82/from-use-to-user-interface-presentation7. “Personas for Product Management”, Marty Cagan http://www.svpg.com/personas-for-product-
management/ 8. “Death to Personas! Long Live Personas!”, Elizabeth Bacon & Steve Calde
http://www.slideshare.net/ebacon/death-to-personas-long-live-personas-presentation9. “Summary of Usability Inspection Methods”, Jakob Nielsen
http://www.useit.com/papers/heuristic/inspection_summary.html 10. Usability Inspection Methods, Jakob Nielsen11. “SVPG Newsletter: Process Police”, Marty Cagan http://www.svpg.com/process-police/12. “How Do You Design”, Hugh Dubberly http://www.dubberly.com/articles/how-do-you-design.html13. Writing Effective Use Cases, Alistair Cockburn14. “Rapid Prototyping Tools”, Dan Harrelson http://www.adaptivepath.com/blog/2009/03/24/rapid-
prototyping-tools/15. Inspired: How To Create Products Customers Love, Marty Cagan16. Ad Hoc Personas: http://www.uie.com/events/virtual_seminars/ad_hoc_personas/ (she describes a pretty
difficult technique)17. Designing for Interaction: Creating Innovative Applications and Devices, EPub18. By Dan Saffer
Much, much more to add here
Good Luck!
Call us if you need anything else, and thank you!
Audrey [email protected]
Nathan [email protected]
This work is licensed under the Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-nd/3.0/ or send a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.