HomeNewsThe Digital Product Stack: 44 Tools of the Trade – Jon Myers ✈ – Medium

The Digital Product Stack: 44 Tools of the Trade – Jon Myers ✈ – Medium

medium bookmark / Raindrop.io |

1*yZen3JbqyMbXz5-_2Jh0Zw.jpeg1*yZen3JbqyMbXz5-_2Jh0Zw.jpeg

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

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

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

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

The Tools

Documentation, Data and SOP Truths

1. Long Form — DropBox Paper

https://www.dropbox.com/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

https://airtable.com/

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

https://airtable.news/how-to-build-a-ux-research-system-that-runs-on-autopilot-1a9ff3f4c244

3. Wiki/ SOPs — Notion

https://www.notion.so/

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

http://segment.com/

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

https://segment.com/academy/intro/how-to-create-a-tracking-plan/

Product

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

http://productboard.com/

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:

https://docs.google.com/spreadsheets/d/1UphPOcVki8vGqpQJDpNDpTyD1_AofVVQo_qezgYxumQ/edit?usp=sharing

6. User Feedback and Feature Requests — Canny

https://canny.io/

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.

Product Design

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

https://www.sketchapp.com/

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

http://sketchrunner.com/

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

https://github.com/rodi01/RenameIt

Essential for maintaining naming consistency.

Craft

https://www.invisionapp.com/craft

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

https://ivomynttinen.com/blog/designing-data-with-sketch

More here:

30 Free Sketch Plugins
https://www.invisionapp.com/blog/free-sketch-plugins/

9. Design Communication/ Feedback — Invision

https://www.invisionapp.com/

Invision allows you to keep everyone in loop, gather feedback and make your prototypes interactive.

10. Quick and Dirty Image Optimization and Edits — Pixelmator

http://www.pixelmator.com/

11. Design Version Control — Abstract

https://www.abstractapp.com/

12. Motion Prototyping — Framer

https://framer.com/

13. Honorable Motion Mention — Principle

http://principleformac.com/

14. Designer to Developer Handoff — Zeplin

https://zeplin.io/

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

http://slack.com/

Still the best in my opinion. They have so many integrations it makes it a no-brainer.

16. Project Management — Asana

http://asana.com/

They have improved a lot of the years. Collaborating on special projects and milestone initiatives here makes sense.

Behavioral

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

http://mixpanel.com/

18. Behavioral Marketing Automation, Chat and Help Desk — Intercom

http://intercom.com/

Analytics

19. Web, Paid — Google Analytics

https://analytics.google.com/

20. Visual — HotJar

https://www.hotjar.com

21. Real User Feedback/ Research — User Testing

https://www.usertesting.com/

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

https://www.appcues.com/

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

https://prismic.io/

A ready to go CMS for your app.

24. Social — GetStream

https://getstream.io/

Bolt social into your app and go.

25. Blockchain — Chain

https://chain.com/

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

https://plaid.com/

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

https://www.graph.cool/

Cheesy name, but may be useful for quick and dirty validation if you’re on the GraphQL train.

Honorable Mentions

28. Business Intelligence — ChartMogul
https://chartmogul.com/

29. A/B Testing — Optimizely

https://www.optimizely.com/

30. Data Enrichment — ClearBit

https://clearbit.com/

31. Charting/ Dashboards — Chartio

https://chartio.com/

32. Online Bookeeping — Bench

https://bench.co/

33. Incorporation — Stripe Atlas

https://stripe.com/atlas

34. Forms, Surveys and NPS scoring — Typeform

https://www.typeform.com/

35. Design Inspiration — Muzli

https://muz.li/

36. Saas Resources and Education — Saastr

https://www.saastr.com/

37. Testing, Learning and Growth Hacking — Growth Hacker

https://growthhackers.com/solutions/software

38. Bookmarking — Raindrop

https://raindrop.io/app/

39. Real-Time Monitoring — Mention

http://mention.com/

40. Quick and Dirty Landing Page Creation — Webflow

https://webflow.com/

41. Daily Slack Standups — Standuply

https://standuply.com/

Resources

42. Collection of Design Systems
https://github.com/alexpate/awesome-design-systems

43. The Essential Guide to Growing Your Early-Stage SaaS Startup

https://www.hotjar.com/grow-your-saas-startup/

44. SaaS Metrics 2.0 — A Guide to Measuring and Improving what Matters

http://www.forentrepreneurs.com/saas-metrics-2/

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?

Featured articles on Prototypr: