Read on Twitter
Since I don& #39;t work on tools anymore, I& #39;d like to share thoughts about the design workflow today, what I& #39;ve learned making tools, and what could be on the horizon in the next few years.
This is a long thread so grab a
https://abs.twimg.com/emoji/v2/... draggable="false" alt="☕️" title="Hot beverage" aria-label="Emoji: Hot beverage">/https://abs.twimg.com/emoji/v2/... draggable="false" alt="🍵" title="Teacup without handle" aria-label="Emoji: Teacup without handle">+https://abs.twimg.com/emoji/v2/... draggable="false" alt="🍪" title="Cookie" aria-label="Emoji: Cookie"> and settle in.
––
Ok, let& #39;s start with workflow:
This is a long thread so grab a
––
Ok, let& #39;s start with workflow:
Digital product design at a company is like cooking in a professional kitchen. *Everything* you do affects the rhythm and timing of the other chefs in the kitchen. The goal is to satisfy the customer with the ingredients that you have on hand so that they will want to come back.
There are 4 parts to the design workflow: Drafting, Prototyping, User Testing, and Handoff. Each of them start at specific times in the workflow but eventually, the design workflow will constantly flow back and forth between all four.
There are tons of tools that fit in each category but the great ones really shine at solving their specific problems. You probably only use 1 tool or you probably have a whole suite that you use in your 800 person company. Those tools fall into these categories.
A great Drafting tool is about synthesizing ideas on the canvas the fastest. Exporting, reusability, and anything high fidelity fall away here to the only thing that truly matters––speed. Cutting the time from idea to canvas is crucial for adoption.
A great Prototyping tool allows you to build upon the ideas and flesh them out to feel like the final experience. Speed matters here too but so does fidelity. Prototyping only really serves a singular purpose and that is to learn from it by using it.
A great User Testing tool allows you to quickly battle test these refined ideas with a pool of potential customers. It could be your friends or it could be testing sessions in your target markets. Here we learn valuable insights about your potential solutions.
Making tools: Layout and Flow.
Going back to cooking, the ideal work station should have everything you need within your eye line and within 1 step away because the focus should be on the *food*. I& #39;m guilty of this as a designer. I tuck away clear ideas behind icons and drawers.
Going back to cooking, the ideal work station should have everything you need within your eye line and within 1 step away because the focus should be on the *food*. I& #39;m guilty of this as a designer. I tuck away clear ideas behind icons and drawers.
So, run a user test on Monday and just watch your users eye and mouse movements. You don& #39;t want them to constantly dart around your tool because that& #39;s tiring. Minimize their movements and keep them in flow as much as possible. Let them focus on the *food* and not on their knife.
Transitions and animations.
These have costs. Exclude these and the tool feels fast but it spatially won& #39;t flow well and you can kick someone out of flow. Too many and the app feels slow and you can also kick someone out of flow. It should feel like dealing poker cards. Simple.
These have costs. Exclude these and the tool feels fast but it spatially won& #39;t flow well and you can kick someone out of flow. Too many and the app feels slow and you can also kick someone out of flow. It should feel like dealing poker cards. Simple.
The time it takes to understand the value.
A pan is for frying, a pot is for boiling, a knife is for cutting, and a spoon is for scooping. Notice how each of these has a clear shape in your mind. The shape hints at its potential value to your customer.
A pan is for frying, a pot is for boiling, a knife is for cutting, and a spoon is for scooping. Notice how each of these has a clear shape in your mind. The shape hints at its potential value to your customer.
I think half the battle of becoming embedded in a professional workflow is having a user look at the tool and almost instantly being able to understand what it can do. The other half is the output. It should accomplish what it promises and bonus points for over delivering.
Speculative thoughts on the future:
We now have many tools that slot into one of these 4 categories. So a few questions naturally arise as an investor or a tool builder:
https://abs.twimg.com/emoji/v2/... draggable="false" alt="1️⃣" title="Keycap digit one" aria-label="Emoji: Keycap digit one"> Which is the biggest category?
https://abs.twimg.com/emoji/v2/... draggable="false" alt="2️⃣" title="Keycap digit two" aria-label="Emoji: Keycap digit two"> Which is the most lucrative?
https://abs.twimg.com/emoji/v2/... draggable="false" alt="3️⃣" title="Keycap digit three" aria-label="Emoji: Keycap digit three"> Which has hit its local maxima?
We now have many tools that slot into one of these 4 categories. So a few questions naturally arise as an investor or a tool builder:
Today, most designers spend their time in a drafting tool because it& #39;s the fastest way to build ideas but I posit that designers actually spend most of their time doing a form of user testing. Let me explain.
Once an idea is formed and realized, it is used and data can be gathered. Doing this cheaply allows for tighter feedback loops for finding better solutions. There are many levels to user testing but simply showing something to your coworker gives some data––even if its crude.
In fact, nearly everything leads back to user testing. Flashy prototypes mean nothing without seeing real people use them. You can user test with a few images or with real code in production in a test market but it always involves more people than you first realize.
It& #39;s absurd to me that a lot of this data still exists in powerpoint slide decks but not in front of me when I& #39;m working? Let me pull in a button from my design system and see its usage notes! Give me comments and heat maps from testing sessions.
The most lucrative category has the *most* potential paying customers or the *highest* potential paying customers. Which is it? When I think about the area that can have the highest amount of people touching an idea, its user testing. Doesn& #39;t mean they& #39;re all paying seats though.
When I think of the highest value for an organization though, that& #39;s pure collaboration. The tool that allows the flow of data to become ever more efficient to the greater organization is vastly more valuable than its outputs.
The output of Slack is simply just sending notifications to your coworker& #39;s phones and laptops but the flow of information in an organization sharply increases with its adoption. This is why Slack is so valuable.
What about Handoff? We forget that engineering teams at mid-large tech companies are much more massive than their respective product teams. There& #39;s a real big opportunity to monetize engineering seats in design tools.
Maxima and Minima:
Easily creating visual UI on the *desktop* has been mostly figured out so there probably aren& #39;t obvious areas of improvement that can have incredible gains for a while. (I didn& #39;t say that it& #39;s done yet. Btw, why are we so focused on our MacBook Pros anyway?)
Easily creating visual UI on the *desktop* has been mostly figured out so there probably aren& #39;t obvious areas of improvement that can have incredible gains for a while. (I didn& #39;t say that it& #39;s done yet. Btw, why are we so focused on our MacBook Pros anyway?)
Easily creating animations and interactions are currently being figured out by many companies. There& #39;s a lot of gains that can be had here in the next few years that could prove to be just as fast as visually creating UI but with much better benefits. It& #39;s exciting.
User testing doesn& #39;t have an obvious workflow yet. Getting testers is hard. Synthesizing learnings is time consuming. And getting data back into previous components is basically non-existent. Imagine if your components actually had user testing data connected to them.
The accepted wisdom of Handoff is that it& #39;s about designers exporting assets to developers but there& #39;s a meaningful difference from what these groups want.
Designers want to improve the UI in the app so their velocity improves. Engineers want to improve the UI in the source code so their velocity improves. I& #39;d love to see the handoff tool that its purely lives in VS Code without any designer input.
To close here are open questions:
Is there a possibility for a single tool to rule them all? Would that be more effective to get our jobs done?
Would we even want a single company to have that much power over our workflows? How can we combat that?
Design systems are turning out to be less of a product and more of a process. So where, in these categories, does the design system and process truly live?
What about design tokens? Where are the design token open source projects to better our workflow?
Fin.
