A Short Handbook On Digital Product Design: Chapter Five — Design Toolkit
If you have stumbled upon this post, you should know that this is the fifth and final chapter in a short handbook on digital product design. If you missed the previous chapters, they are linked below.
Table of Contents
- Chapter One: Intro to Product Design
- Chapter Two: Good Design
- Chapter Three: Design Thinking
- Chapter Four: Design Process
- Chapter Five: Design Toolkit
“We become what we behold. We shape our tools, and thereafter our tools shape us.” ― Marshall McLuhan
Chapter Five: Design Toolkit
In Chapter Four, we discussed how you could use the design process to solve a functional problem with a formal solution. We reviewed each of the following phases in detail:
- Discover (Strategy and Research)
- Define (Synthesize)
- Develop (Ideate and Evaluate)
- Deliver (Prototype and Iterate)
In each phase of the Design Process, we looked at a few common methods a designer can use to accomplish his or her objectives. At the end of each phase, I listed a set of outputs or what you would expect to create during each phase. In this final chapter, I will provide you with a set of tools that will allow you to create those outputs and make the entire design process easier and more collaborative.
By now, you know that the design process is messy. There is a vast difference between the four-phase design process described in this handbook and how the design process works in practice or the real world.
Richard Banfield makes this point in one brilliant tweet.
To help us manage this messy reality, modern design tools have evolved into dynamic and collaborative platforms that can manage the entire design process.
My goal in this chapter is to provide you with a list of tools and resources that will allow you to start designing digital products immediately. Sticking with the theme of simple, I have organized the tools by various functions of a product design process or workflow. However, many of today’s modern tools and products perform multiple functions and are platforms that have extensive capabilities. I have listed a few tools in more than one place.
I am not going to review or go into detail describing how these different tools work. I am simply going to provide a list and let you explore each one on your own. I will highlight my favorite tools, but I am not endorsing one tool or product over another.
In addition to the list of tools, I have also collected several books and educational resources that I have found helpful along my journey in Product Design. If you have any recommendations or aren’t seeing a tool or resource that should be listed, drop me a note.
You can quickly find a tool or resource in this chapter by searching:
- Research
- User Flows & Site Maps
- Wireframing
- Prototyping
- Design
- Animation
- User Testing
- Design Systems
- Handoff
- Monitoring & Analytics
- Sketch Plugins & UI Kits
- Books on Design
💥 = Personal Favorite
Research
Typeform💥
Beautifully designed conversational forms and surveys.
Wufoo
Build and share online forms, collect data and payments, and automate your workflows.
Optimal Workshop
A user research platform that helps you and your team make decisions with confidence. Handles recruitment and analysis.
Ethino
Complete research platform. Find real people for user research (in-person, remote UX, online, surveys, and panels).
Organization & Ideation
Mural💥
Think and collaborate visually in a digital workspace.
Milanote💥
An easy-to-use tool to organize your ideas and projects into visual boards.
MindMeister
An online mind mapping tool that lets you capture, develop and share ideas visually.
Coggle
A very simple tool to create and share mindmaps and flow charts.
XMind
A full-featured mind mapping and brainstorming tool, designed to generate ideas, inspire creativity, and bring you efficiency both in work and life.
Boords
The online storyboarding app for creative professionals. Create storyboards and gather feedback all in one place.
User Flows & Site Maps
Lucid Chart💥
A visual workspace that combines diagramming, data visualization, and collaboration. Great for user flow diagrams and customer journeys.
Whimsical💥
A visual workplace to communicate ideas. (Wireframes, User Flows, Sticky Notes, Mind Maps)
FlowMapp
An online tool for creating visual Sitemaps and User Flows which helps you effectively design and plan User Experience.
MockFlow
A solution for planning UI/UX. Visualize user interfaces, create user flows, document styles and approve designs.
Overflow
Turn your designs into playable user flow diagrams.
Wireframing
Wireframe.cc💥
A very simple tool to quickly create wireframes.
HotGloo
A wireframe and prototyping tool designed to build wireframes for web, mobile and wearables.
Prototyping
InVision💥
A complete digital product design platform.
Framer X💥
A rapid prototyping and design tool.
Marvel POP
A tool that can turn any sketch or image into an interactive prototype.
Flinto
A simple tool to create interactive and animated prototypes.
Design
Sketch💥
The digital design toolkit. Design, prototype, collaborate, and hand-off all in one platform.
InVision💥
A complete digital product design platform.
Framer X💥
A rapid prototyping and design tool.
UX Pin
Design, prototype, and collaborate all in one platform.
Oragami
Explore, iterate, and test your ideas. A new tool for designing modern interfaces.
Marvel
Wireframe, design, and prototype in an all-in-one design platform.
Figma
Design, prototype, and collaborate all in the browse with this tool.
Adobe XD
Wireframe, design, prototype, present, and share amazing experiences for web, mobile, voice — all in one app.
Animation
Principle💥
An easy to use animation tool. Design animated and interactive user interfaces.
Hype
A keyframe-based animation system to bring your content to life.
User Testing
Lookback
Remote and in-person user testing platform.
User Testing
A “Human Insight Platform” for user testing.
Helio.app
Get feedback and validate designs with an easy to use design testing platform.
UsabilityHub
A remote user research platform that takes the guesswork out of design decisions by validating them with real users.
Design Systems
Pattern Lab💥
Build thoughtful, pattern-driven user interfaces using atomic design principles.
Lingo💥
Visually organize all your assets in one place. Create and share living style guides, asset libraries and more.
InVision💥
A complete digital product design platform.
Handoff
Avocode💥
A platform-independent tool that helps teams turn Sketch, PSD, XD, AI, and Figma designs to the Web, React Native, iOS, or Android code.
Pattern Lab💥
Build thoughtful, pattern-driven user interfaces using atomic design principles
Framer X
Visually render React, learn how to design advanced animations and import production components.
Abstract
Version control for Sketch files + handoff.
Zeplin
Handoff designs and styleguides with accurate specs, assets, code snippets — automatically
Monitoring & Analytics
Qualaroo💥
Targeted user feedback across your products.
hotjar💥
A visual platform that helps you understand your users and make the right changes (heatmaps, recordings, user funnels, polls, and surveys).
Usabilla
A platform that allows you to collect both qualitative and quantitative insights from your users to make the right optimization decisions.
Crazy Egg
Understand the customer journey with Snapshots, Heatmaps, and Recordings.
Mix Panel
Analyze user behavior across your sites and apps.
Favorite Sketch Plugins & UI Kits
Because Sketch is such a big part of my design process, I couldn’t leave you without listing a few of my favorite plugins.
Sketch Runner
Perform Sketch actions quicker with your keyboard. Launch, search and execute. Designing becomes a breeze. (Spotlight of Sketch)
Icon Font
A plugin that helps you easily insert and manage icons from icon fonts.
Anima App
Create responsive and interactive high-fidelity prototypes, all inside Sketch.
Craft
Easily sync your Sketch designs to InVision.
Bootsketch
Start your Sketch project with 200+ Bootstrap components.
UX Power Tools
A design system UI kit for Sketch.
Must-Read Books on Design
- Don’t Make Me Think by Steve Krug
- 100 Things Every Designer Needs to Know About People by Susan Weinschenk
- Just Enough Research by Erika Hall
- Designing Products People Love: How Great Designers Create Successful Products by Scott Hurff
- Design of Everyday Things by Don Norman
- Emotional Design: Why We Love (Or Hate) Everyday Things by Don Norman
- Universal Methods of Design: 100 Ways to Research Complex Problems, Develop Innovative Ideas, and Design Effective Solutions by Bruce Hanington
- Observing the User Experience, Second Edition: A Practitioner’s Guide to User Research by Mike Kuniavsky and Andrea Moed
- Innovating for People: Handbook of Human Centered Design Methods by the LUMA Institute
- The Service Innovation Handbook by Lucy Kimbell
- This is Service Design Thinking: Basics, Tools, Cases by Marc Stickdorn
- This Is Service Design Doing: Applying Service Design Thinking in the Real World by Marc Stickdorn
- 101 Design Methods: A Structured Approach for Driving Innovation in Your Organization by Vijay Kumar
- The Field Study Handbook, Field Edition by Jan Chipchase and Lee John Phillips
- Convivial Toolbox: Generative Research for the Front End of Design by Liz Sanders
- Lean UX: Designing Great Products with Agile Teams by Jeff Gothelf
- The Elements of User Experience: User-Centered Design for the Web and Beyond by Jesse James Garrett
- Atomic Design by Brad Frost
- Web Form Design: Filling in the Blanks by Luke Wroblewski
- The Inmates Are Running the Asylum: Why High Tech Products Drive Us Crazy and How to Restore the Sanity by Alan Cooper
- About Face: The Essentials of Interaction Design by Alan Cooper
- Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days by Jake Knapp
- Mobile First by Luke Wroblewski
- Animation Handbook by Ryan McLeod
Thanks for reading. I hope you’ve enjoyed this handbook on digital product design. If you have any feedback or would like to connect, my contact details are below.
Follow me on Medium and Twitter (@andrewzallie), and don’t forget to clap if you liked this short handbook on digital product design!
