How Adobe XD fits into the product design workflow at our startup

Jesse Korzan

The right tool at the right time?

To get to where our product is at, our team went through hundreds of hours of prototyping. A lot of time doing quick and dirty sketches to rule out options or define problems, a lot more time in HTML getting stuff on-screen to evaluate and iterate solutions. Even more time creating high-fidelity working prototypes to present for feedback from our test clients and users.

As our designs became better defined and critical decisions made, we started doing the last leg of design in React to make it faster to port into the product, as well as make it easier to maintain a consistency. At first, I thought it was some sort of hazing by the team, but I now see I am better for it. The product is stronger, the team better aligned.

Stepping ahead of MVP.

Our team feels good. We’ve gotten to a good place with our MVP but it’s now an awkward spot in our design workflow. We want to move faster, we want to revisit some things and we want to undo some things without burning down the clock (yes… the oasis of good, fast AND cheap).

Smaller UI polish is achieved within the product itself, but bigger issues with the design require deeper thinking. Quick sketches are always OK, but at higher-fidelity we want to remain quick and iterative and that’s not always possible (or pragmatic) to do in React. We could be fleet-footed in stripped down HTML, but we’d compromise the fidelity that stakeholders expect at this stage of the game. And as good as they are individually, multiple iterations in HTML require effort to keep organized and several tools are often leveraged just to express and share a series of interactions (Quicktime .mov’s are common artifacts of these efforts, pasted into Slack for review). We also have different mobile platforms apart from the web application, as well as future phases vs. current state…it’s an awkward place.

Tooling up.

I looked at tooling up with something else. There are a lot of great, feature rich prototyping tools out there. None are for me (remember “good, fast and cheap”). The more complex tools often require learning a syntax and some type of coding structure to demonstrate interactions and flows. I can already do that in HTML, JS, SASS, etc… I don’t need to invest my time there. Other tools simply don’t fit with our current tool set, or aren’t that great for our particular problem.

Adobe XD enter stage left.

It might not be for everyone, or be as good as what’s on the market, but Adobe XD was dropped into my lap as the right tool at the right time. I can use PageLayers to take my product screens into PSD, copy the pieces I want into XD and just start spitting out exactly the level of fidelity I need to work through our current issues. It replaces my need for Quicktime, artboards keep things organized at a macro level and the light functionality is quickly and easily understood. I was able to download and produce workable prototypes for an onboarding issue within 45 minutes without learning anything new, without creating new or proprietary assets and without having my co-workers download an app to see the work.

No drama.

What’s best, it didn’t change my workflow. It’s not as dramatic as switching to Sketch and Pixate, for example, or as heavy for me when the other guys at Klue “made” me learn React (). It compliments what I am already doing and it’s helped breakout of this awkward stage in our design effort.

For me, it’s a good tool that I look forward to seeing progress (grids and rulers, nudge nudge).

On a last note, it’s been interesting to see XD through the lens of MVP as I work through our MVP.

Blog > Klue Life