Survival Kit IBM Designcamp
IBM Design The mission of IBM Design is to help IBMers improve improve the usability and usefulness of our offerings. Our approach, IBM Design Thinking, changes the way the company creates value—everything from the way we make decisions to the way we collaborate to the way we design our offerings. This Survival Kit supports IBM Design Thinking through our skills development initiative, IBM Designcamp. For more information on Designcamp, contact [email protected]
Our portfolio values: Works Together Together
Works the Same
Works for Me Me
Tight integration across core technologies and interoperability intero perability with complementary complement ary ones
Common look and feel when targeting similar personas
Focused on the user across the entire offering lifecycle (learn, buy, adopt, maintain)
S o, you you’re ’re re read ady y to make your offering more delightful to use. But where do you start? The IBM Designcamp Survival Kit is loaded with tools to get you up and running with IBM Design Thinking: frameworks for managing a project, understanding user needs, designing great interfaces, and documenting feedback. Each page in this book is a worksheet—an interactive document you can use directly during the life of your project. Some are for personal use, while others will help you and your team collaborate and brainstorm. And if you want to dive deeper into each design discipline, we’ve compiled useful online resources in the back. Now you can get going, and you can always come back if you’re stuck.
Invest for Market Outcomes
Envision the User Experience
Playbacks Collaborate, Align, Engage!
How to Use This Kit The Survival Kit is a set of tools that put the user at the center of your project. Each worksheet can be used in isolation or as par t of a broader set of activities with your team and Sponsor Users. These tools help you establish the IBM Design Thinking framework, understand your users’ problems and motivations, explore new concepts, prototype designs, and evaluate with stakeholders. Implemented successfully,, this kit successfully k it will help you produce experiences that engage, enable, and delight. Remember, this is not a cookbook or a set of recipes. Remember, Nor is it a process or methodology. It’s a set of recommended practices that will help you think orthogonally and move beyond feature-centric feature-centric delivery.
What You’ You’ll ll Need You don’t You don’t need a MacBook Pro to do IBM Design Design Thinking; our needs are simple. Prepare your workspace with pads of sticky notes of various colors, some markers, and a drawing surface (a whiteboard or large pad will do). These tools encourage every every team member to engage in the thinking behind the design. If your team is distributed, there are plenty of virtual substitutes. And you’ll you’ll want to jump to a computer for higher ﬁdelity renderings of personas and prototypes to share with your team.
Suggested Activities There are inﬁnite ways to use the worksheets in this kit. Here are a few ideas to get you started:
IBM Design Thinking Ramp-Up—1.5 Hours Jumpstart your team with IBM Design Thinking with some activities that personalize the tools. Tell them you are seeking input for how to rethink your project framework and ask them to generate Empathy Maps (p. 12) and Scenario Maps (p. 14,17) for each role on a project. An Empathy Map should take 15 minutes and a Scenario Map 30 minutes. Hills Workshop—1 Hour per Hill Align your teams teams around the goals for the the project using the Hills (p. 4) worksheet. Think in terms of focused and measurable improv improvements ements in user experience. Research Distillation—5 Hours After concluding your your ethnography ethnography and user studies, you’ll have lots of notes to pore through. Take an afternoon to begin distilling this research. Write one observation or insight per sticky note and put it on the wall. Look for patterns (p. 6) and distill into high-level high-level personas (p. 10). Dig into each using Empathy Maps (p. 12), quantitative personas (p. 11), and as-is Scenario Maps (p. 14). Ideation—1 hour When you need to infuse your your project with new new ideas, host an ideation session with a pointed prompt. Keep your ideation rules (p. 18) and transformation cards (p. 19) close by. For For equal par ticipation, ask each team member to write 10 ideas, one per sticky note. Put them on the wall continue to encourage lots of wild ideas, regardless of feasibility. Then look for patterns and combinations (p. 6) before distilling to what the team can implement.
Glossary Glossar y Backlog Hill A document used to align the team team on the user stories stories A business goal for your your relase, framed around around user to deliver, their priority, and their status. experience.. A project usually has three Hills and a experience technical foundation. Client Playbacks A series of ad hoc Playbacks Playbacks delivered to to clients under NDA that demonstrate the market drivers and user experience of the of fering in development. development. Playback 0 A milestone milestone Playback at which which the team commits commits to delivering a particular user experience and begins reﬁning and delivering the design in parallel. Delivery Playbacks 1-N A series of milestone milestone Playbacks at which which the team team demonstrates demonstrat es end-to-end scenarios it is delivering using live code and/or high-ﬁdelity mockups. Design Thinking A process for envisioning envisioning the user user experience that involves diverging and converging on solutions. Epic A codable grouping grouping of user stories stories that spans scenarios so user stories do not repeat across epics. For example, “As a user, I want to manage my email.” Persona A user archetype based on role role and other characteristics that inﬂuence how a user interacts with the offering. Housed within the Release Blueprint Application and linked linked to from the Release Release Blueprint. Playback A demo of the user user experience of the offering offering in development, deve lopment, used to collect feedback from and align the team, stakeholders, and go-to-market.
Table of Contents
Table of Contents Core Practices
Empathy Map TBD TBD
Invest for Market Outcomes
Envision the User Experience
Playbacks Collaborate, Align, Engage!
Hills Hills align your team around the business goals of your project.
Use this sheet to plan each Hill. Who does your Hill impact? What value are you delivering? And how will you measure it? Use a combination of market and user research to illuminate the current state and opportunities.
Persona(s) or Role(s)
Pain Points & Opportunities Identify pain points for users and opportunities to improve the design.
With your empathy maps and scenarios in sight, write sticky notes identifying prominent pain points. Use a second sticky note color to identify opportunities for the design. Each pain point should have a corresponding opportunity, though some oppor tunities might not relate to pain points—for example those that respond to market trends or anticipate future pain points.
To-Be Scenario Map To-be scenario maps let teams rapidly ideate on future workﬂows.
Post a row of sticky notes on a wall representing the steps of a user’s to-be workﬂow. Beneath each step, create a column of color-coded sticky notes representing questions, comments, and ideas relating to that step. Once questions are answered, post comments over them. Use this arti fact as a springboard for ideation on par ticular steps. Each to-be scenario should be documented in the Release Blueprint in support of a Hill.
Ideation Rules These simple rules structure the chaos of ideation.
Ideas with big potential can be killed easily by negative attitudes, so keep these rules nearby or write them on the board before a brainstorm. Remember to build on ideas by saying. “Yes, and...” But keep things focused, stick to one strand at a time, and remember when it’s time to distill your ideas.
Encourage wild ideas
Build on the ideas of others
Stay focused on the topic
One conversation at a time
Go for quantity
Adapted from Alex Osborn and IDEO
Transformation Cards Transformation cards help unstick your ideas.
Transformation cards are suggestions of how to change or combine your existing ideas. Make a deck out of index cards or sticky notes, and pick one at random when the team feels stuck. Any modifying verb could work: magnify, minify, rearrange, adapt, etc.
Combine! How about an assortment?
Reverse! Reverse roles?
Substitute! Take another approach?
Combine! How about an alloy?
Modify! Change shape?
New Use! Put to other use?
Adapted from Alex Osborn
User Testing Use this checklist to prepare for real-time task-based tests.
When gathering feedback from users, prepare your prototypes, questions, and documentation methods ahead of time. This should be done by an objective third party (not the designer), though others should tag along for ﬁrst-hand obser vation.
Prepare scenarios and tasks
Test software and equipment
Ask biased questions
Create forms and surveys
Laugh or get frustrated
Perform a dry run
Recruit and schedule participants
Explain rationales or limitations
Invite observers and assign roles
Try to state the participant’s rationale
Provide users an overview
Ask for design advice
Ask to voice thoughts and actions
Ask about the future
Debrief after each task and at the end Thank the participant Encourage users to think out loud Ensure adequate recording
Feedback Capture Grid Feedback capture grids facilitate real-time capture or post-hoc unpacking of feedback on presentations and prototypes.
Section off a blank page or whiteboard into quadrants for things users like, critiques, questions raised, and ideas. Fill in each quadrant with hand-written or sticky notes.
Adapted from Stanford d.school
IBM Brand ibm.com/brand
One UI ibm.biz/BdxG76
Best Designs Gallery thebestdesigns.com
Gridpak Grid Generator gridpak.com
Noun Project thenounproject.com
Twitter Bootstrap GUI Framework twitter.github.com/bootstrap
Kuler Color Mixer kuler.adobe.com
Color Game color.method.ac
Framer Prototyper framerjs.com
Information Design Patterns infodesignpatterns.com
Drawscript Vector Converter drawscri.pt
Specctr Fireworks Annotations specctr.com
CSS Zen Garden csszengarden.com
Web Design Tuts+ webdesign.tutsplus.com
Web Development Tuts+ net.tutsplus.com Mobile Development Tuts+ mobile.tutsplus.com
Stakeholder Map TBD TBD