Will Emergent Design go prime-time someday 🤟💎?

Experimental automation, concept workflows, and state machines in the design space

Tom Parandyk
Jul 6 · 5 min read

Design —refers to product design: interface and user experience design, as well as state design, flow, and architecture choices.

Emergent —means becoming, emerging as part of the process, as opposed to being planned ahead of the implementation.

TLDR: In the Emergent Design workflow, the implementation starts sooner than usual, and it’s entangled with the design. Automation plays an essential role in that process. It speeds up the delivery cycle, delivers higher quality feedback, and new design ideas emerge from the close collaboration between designers, engineers, and product owners. I’m using, testing, building, and trying to make sense out of Emergent Design workflow every day. Follow here for updates.

When design and development happen at the same time, we deliver faster

Above, the typical linear workflow: design first, develop later, then test, re-design, re-factor, re-test vs a new workflow with automation where design, development, testing, and refactoring happen asynchronously and simultaneously.

🙀

What’s automated, you ask?

  • React state management — we’ve created simple rules to introduce a “state-machine-like framework” and enable everyone to build the flows.
  • Interface design — we’ve made a simple abstraction on top of the HTML and CSS, and we’ve automated the render function in React components, to release designers from necessity of coding and prototyping. Prototyping, if it happens, helps only in direct communication or quick visualisation of ideas. Design is not imported and exported, designers can make changes directly to the code repository, but writing code is optional.
  • Deployment — we’ve been using Now very successfully. Highly recommended service!

What we’ve learned so far:

🤢 Not recommended

Workflow with the typical collaboration silos and existing design tools, like inVision, Axure, FramerX, Sketch, AdobeXD, ProtoIO, etc. didn’t work at all. Yes, it’s better than nothing, but not better than apply the design to the working software. The Emergent Design did not occur when using existing tools. Lack of direct contribution to the code base put too much stress on the developers and turned designers into implementation spectators. When we tried pushing to make design happen during development, the process was confusing to everyone involved, and the dev team was locked in the state of continuous refactoring to keep up with changing design requirements.

🤩 Things that worked out nicely

Introduction of automation and Design-To-Code tools put designers and developers in one team. We are beta testing our tools because there is nothing solid on the market yet (as of June 2019), but you should make your own or sign up for our release news. Automation is a must for designers to become part of the development process and for the Emergent Design to come easily.

Working in one code repository makes everyone aligned without additional communication on top of the regular pull request process. The synergy is fantastic when developers push a functional, but not styled view, and pull beautifully designed one. Everyone contributes! Everyone’s proud instantly!

Business team, Product Owners and stakeholders, see the progress immediately and get excited with every new deployment.

When the automation powers the design, we get user feedback sooner

Within a typical hand-off workflow, designers need to wait for the implementation to finish, including countless back and forth in tweaking iterations. For hands-on folks, it sucks big time! We have to sit and wait. And… It takes time to deploy. No one can argue with that!

The sooner we deploy, the sooner we get to test our solution and get unbiased user feedback from the market.

That’s a powerful opportunity to a UX designer like myself. Now, it requires some engagement, that doesn’t come for free, but it puts the power of interface control into my untrained hands and ultimately, benefit the users.

How does it work, you ask? Surprisingly simple.

Our Emergent Design workflow is powered by automation, and it can be broken down into these stages:

  • engineers implement a feature in a functional but rough way
  • rapid deployment allows the team test the experience
  • designers beautify the initial implementation on their own time
  • another deployment wows everyone
  • and the feature is done ready for testing!

Since the deployed app is out there making waves, it easy to gather the most valuable user feedback there is, the real one. No more issues with biased, staged, and inaccurate testing results based on click-throughs and fake prototypes. Things get real, real fast. I love it.

The Emergent Design workflow builds up a sense of ownership in the team

Additionally, the Emergent Design workflow pushes the team to build the apps together. Since the sense of ownership is crucial as part of the healthy software house culture, I say, the change of the process is worth it.

When the development powers the design, new ideas create new opportunities

That’s disputable, you might say. I agree. I’m still not convinced in this secret superpower of the Emergent Design workflow. It feels like a nice add on at best, but we are only running the workflow for a few months, so I’m willing to give it a bit more time.

Up until now, it feels like, we get better results right from the start when the development happens together with the design.

Most recent example:

“Can we show the list of locations on the map as pins?”, I asked my dev team.

“Sure. It should be also possible to put the list together with the map, if we want to?, Jillian responded with a brilliant idea, and I was like, 😶.

“Yes! Let’s do that.”

“And could we put the list on top of the map?”, I’ve added after a second of pondering.

“Should be possible”, she replayed straight away.

So, instead of this (which was my initial idea), tabs navigation:

We’ve end up with this (Jillian’s idea), combination of two views, list is linked with the pins on the map, so selecting an item on the list will select, center the pin, and vice versa:

Truthfully, I should come up with this UX by myself. But I didn’t.

Instead, the design emerged from collaboration.
Thank you Jillian!

The benefit of Emergent Design workflow is in early collaboration between designers and engineers, not hidden in the creativity of the individual.

👆

And that’s my final takeaway, for now.

If you want to try the tools that we are using in our team follow me for updates on our releases.

Views Tools

Find product market fit before you run out of money

Tom Parandyk

Written by

My goal is to simplify software development so that more people who find it hard to break into technology space have a chance for success. #techforall

Views Tools

Find product market fit before you run out of money