Designer+developer workflow: more head-down work

As part of Dan and my designer+developer collaboration series, I recorded another video building upon the work we’ve done so far. If you’re not caught up, feel free to watch the other videos:

• Video 1: Designer+Developer pair session
• Video 2: Head-down work

And here’s the latest installment:

Dan and I haven’t had a chance to schedule another joint session (hopefully we can do one soon!), so this video is just me stubbing out all the pages of the site and wiring up the navigation (using Pattern Lab’s link functionality) to create a functioning HTML prototype.

There are a number of great things about having a clickable prototype this early in the process:

• It helps the working team understand individual component & screen design in the context of the broader experience. For instance, the designer can adjust heading styles through the context of one page and then quickly switch over to see how those changes affected the other pages that share the same heading styles.
• It brings the design to life for clients and stakeholders, allowing everyone to comment on the experience even if it’s in a crude initial state. After all, a UI screen in isolation only tells part of the story; a working prototype helps bring the experience to life so clients and stakeholders can actually get hands on with the product and give early feedback.
• It gives an opportunity to do early user testing. We’ve stubbed out crude flows (login, checkout, etc) way before design was anywhere near being complete in order to get early user feedback. Getting a sanity check from real users this early in the process is incredibly insightful, and is massively influential on all subsequent design & dev decisions.
• You’re prototyping in the final environment rather than in abstractions. Creating a slew of comps, exporting things, and drawing a bunch of hotspots over static images involves a lot of effort, and those abstractions are ultimately discarded. Wiring everything up in the frontend workshop instead saves a whole lot of time. And it’s important to understand that even though it may begin as a crude prototype, as the team iterates over the design & build, the prototype ultimately evolves into the final experience. Yet another win for getting into the real medium early in the process.

Alright, I think about now I’ve taken things as far as I can without input from Dan, so the next thing we have to do is schedule another joint session. Again, the spirit of this head-down work isn’t to make a bunch of decisions in isolation, but to make just enough progress to have more thoughtful conversations with your partner.

Until next time!