The Digital Product Stack: 44 Tools of the Trade – Jon Myers ✈ – Medium
Over the years, as a a startup founder and digital product designer, how I’ve collaborated with others on designing, building and maintaining digital products be it mobile applications or Saas products has evolved significantly.
Currently, there is a constant surge of specialized tools that are focused on the digital product design and building process.
Presently, I’m in startup mode, and working with a local development team here on the ground in Vietnam — on building a digital product (React.JS/ Native, Node) — and things are going exceptionally well. We’re two weeks ahead of schedule at the moment and things are going almost too well.
One reason I believe we are doing so well with our development team is due to how we have set up our software stacks, how we have created the design systems, the clarity of the technical infrastructure and technical requirements and how we’re managing the process.
Thus, I thought I would share my Digital Product Stack, which makes the creation of digital products smoother.
I’ve used all these tools, currently, some are planned in my case, and some are actual.
Some of this may seem excessive to some, but in my experience specialized always trumps generalized for more complex products.
No doubt — this all adds up. And in the beginning, you may have to minimize costs.
The Starting Point
Most product decisions should be based on evidence, not guesses and assumptions.
The Philosophy: Sources, systems, and automation
This means sources of truth that all parties agree on, where key stakeholders in your organization are responsible for maintaining those systems of truth. Whereby, most members of your team can refer to these sources of truth.
For example, and as I will dive deeper into later, you want a source of truth for your product requirements, technical requirements for your sprints, user research, analytics and so on.
This describes how you use your sources of truth, how you systemize the prioritization of product requirements, etc., and establish product criteria based on the source of truth in an evidence driven manner. Your systems are entirely dependent on the context and use case your product demands.
Basically, how you are systemizing everything from gathering and populating data into your prototypes to issue tracking to keeping your finger on the pulse of your product and user.
Every tool in your stack should have a clear and explicit use case.
Documentation, Data and SOP Truths
1. Long Form — DropBox Paper
This is an elegant online documentation system that also makes use of a simple folder structure, which is easy to navigate. The documents themselves are clean, legible and easy to read. Longer form documents such as your mission and vision planning are a good fit here. There are a lot of restrictions on text styling, so your documents aren’t overrun with everyone changing up the styles.
It goes without saying, we’re using Dropbox for storage.
2. Data for Prototypes and User Research — Airtable
A smarter version of Google Sheets. It’s a spreadsheet meets database. If you’re building a digital product, it’s essential you use real data in your prototypes. The failure to do so will result in broken assumptions and will likely result in your designs “breaking”.
Additionally, Airtable can be useful for user research:
How to build a UX research system that runs on autopilot
3. Wiki/ SOPs — Notion
This is a multi-dimensional tool and could be used for other use cases here, however, I always err on the side of specialized tools versus general tools. In this case, Notion is a good tool for SOP sources of truth for everything from your company procedures to your marketing to your product team and so on.
4. Data Warehouse — Segment
You build a tracking plan of what user behaviors and events you are tracking in your application in Segment. You send all your data from Stripe, Google Analytics, etc., to Segment. And, then you are able to triangulate various scenarios to help you keep your finger on the pulse of your product, keep your finger on the pulse of the users — and you can start to dig into more complex scenarios of usage attrition and so on.
Versus having all these services load on the page, you have one service loading.
How to Create a Tracking Plan
There are many dimensions to the product design process. One thing that is essential is having a source of truth and documentation for your assumptions, features and product roadmap.
5. Product Management/ Product Roadmap — ProductBoard
Out of all the tools mentioned here, I would say this one is one of the most important AND one that many will overlook, lop into other areas and simply neglect.
ProductBoard has been an absolute game changer. I love this tool.
It’s a clear, robust way to document your product requirements and generate a product roadmap. Further, you can connect it to various inputs for user feedback. You can connect your help center to ProductBoard, and that input goes into a research bucket that must be processed.
Further, you can map real user personas to ProductBoard — and weight features based on feedback from those personas. You can also map out the competition’s features and weight feature parity.
The number one rule of product management is prioritization.
You need a way to weight and prioritize features and ProductBoard makes it easy to set up and maintain.
Additionally, you can connect outside inputs from your team to those features, but ultimately — the Product Owner/ Manager has the final say on the product truth.
If you use Jira for development management, the Product Manager can push features from ProductBoard into Jira, which the Lead Engineer/ Development Manager can then process and mark for the development pipeline.
If you decide to cheap out on this (not recommended) — you could use Google Sheets. I have a templatefor that:
6. User Feedback and Feature Requests — Canny
Good products are born from listening and you need listening systems in place to hear user feedback and identify trends. Further, users need a way to “feel heard” — Canny gives you an out and place to direct users for the inevitable requests that arise.
This entails how you are implementing your user research into UX design, how you achieve HD prototypes, how you iterate on the designs and how you hand them over to devs.
7. UX/ UI — Sketch
Point blank, Sketch sits at the center of the modern design prototyping ecosystem. Sketch has a wide plugin ecosystem and there is a host of specialized web services that have sprung up to further expand the functionality of Sketch.
If you’re still prototyping in Photoshop you’re doing yourself an extreme disservice, which creates a bottleneck, which slows down your design process. It’s arcane and slow at this point.
There are other challengers such as Figma and AdobeXD that are trying to go after Sketch, but they’re late to the game.
We do all UX flows and all HD prototypes in Sketch. We generate all mobile responsive screens in Sketch. One document handles all screens for the entire app you’re designing.
What makes Sketch powerful is its robust Symbols system.
Modern design is all about Design Systems. Puzzle pieces, components that are fitted together to achieve your layouts. Maintaining components with Sketch’s symbols system is fast and a breeze.
To this point, you can maintain all the styles driving your document easily in Sketch.
Handing your designs to a dev team is a breeze as well.
You’ll need some plugins to take full advantage of Sketch.
Sketch Plugin Rundown
8. Sketch Runner
It’s like Alfred for Sketch. It speeds things up considerably. I work with zero icons exposed and simply spend most of my design time executing commands in Runner.
You can also manage all your plugins straight up in Runner.
Rename It Plugin
Essential for maintaining naming consistency.
This is a powerful plugin that allows you to populate your prototypes with data, managing spacing issues, etc., and sync.
Designing Data with Sketch Using Craft
30 Free Sketch Plugins
9. Design Communication/ Feedback — Invision
Invision allows you to keep everyone in loop, gather feedback and make your prototypes interactive.
10. Quick and Dirty Image Optimization and Edits — Pixelmator
11. Design Version Control — Abstract
12. Motion Prototyping — Framer
13. Honorable Motion Mention — Principle
14. Designer to Developer Handoff — Zeplin
Still the best. No asking around for images, icons and devs can get all attributes straight from here.
Team Communications and Project Management
15. Team Communications — Slack
Still the best in my opinion. They have so many integrations it makes it a no-brainer.
16. Project Management — Asana
They have improved a lot of the years. Collaborating on special projects and milestone initiatives here makes sense.
As mentioned with Segment above, you need a central data truth and you need tools that help you keep your finger on the pulse of the users and products. These talk to Segment.
17. Behavioral Analysis — Mixpanel
18. Behavioral Marketing Automation, Chat and Help Desk — Intercom
19. Web, Paid — Google Analytics
20. Visual — HotJar
21. Real User Feedback/ Research — User Testing
APIs and Other Useful Services
Modern application development is basically about gluing things together. Some cool stuff you can glue into your app and save yourself time.
22. User Onboarding — AppCues
Many people neglect user onboarding and try and bolt it on at the end. AppCues allows you to get in front of this and consider onboarding from the get go.
23. CMS — Primic
A ready to go CMS for your app.
24. Social — GetStream
Bolt social into your app and go.
25. Blockchain — Chain
Chain Core is enterprise-grade blockchain infrastructure that enables organizations to build better financial services from the ground up.
26. Connect to User’s Bank Accounts — Plaid
Ever wonder how services like Acorns and Robinhood allow you to log into your US bank account. They use Google Ventures backed company, Plaid. It’s like Stripe for banking applications.
27. Flexible Backend on the Fly — Graph.cool
Cheesy name, but may be useful for quick and dirty validation if you’re on the GraphQL train.
28. Business Intelligence — ChartMogul
29. A/B Testing — Optimizely
30. Data Enrichment — ClearBit
31. Charting/ Dashboards — Chartio
32. Online Bookeeping — Bench
33. Incorporation — Stripe Atlas
34. Forms, Surveys and NPS scoring — Typeform
35. Design Inspiration — Muzli
36. Saas Resources and Education — Saastr
37. Testing, Learning and Growth Hacking — Growth Hacker
38. Bookmarking — Raindrop
39. Real-Time Monitoring — Mention
40. Quick and Dirty Landing Page Creation — Webflow
41. Daily Slack Standups — Standuply
42. Collection of Design Systems
43. The Essential Guide to Growing Your Early-Stage SaaS Startup
44. SaaS Metrics 2.0 — A Guide to Measuring and Improving what Matters
Notably absent is a rundown on development management tools and development issue tracking. Devs are a quirky bunch and it’s best to let them use what they feel is best for them.
I’d be curious to hear from others.
What’s in your stack?