Prototyping is dead, long live synchronous development + design

by Isaac Joekong, Apr 16, 2018

Prototyping is dead, long live synchronous development and design.

Hyperbole? Maybe a little. But one thing is clear:

Wireframes, prototypes and mockups suffer from the same fatal flaw: scalability. This issue is so serious even Marcin Treder (UXPin, CEO) says it is the biggest problem in the design industry. Considering UXPin is a company by designers and for designers, we clearly have a problem.

So, what are the roots of this problem and how do we make design scalable?

What is the problem with design in 2018?

The problem with design in 2018 is overuse of wireframes, prototypes and mockups. Used correctly, each of these can help mitigate risk by exposing design flaws and opportunities. However, there's a downside: you are doing more work.

The problem with wireframes, prototypes and mockups is reusability. You are doing work that will probably need to be redone in another format and on another platform. Plus, limitations in later links in the chain can invalidate your designs, sending you back to the drawing board.

Time for an example:
  1. You are hired to design a Uber for caravans
  2. You create your designs using an illustrating tool such as Adobe Photoshop or Sketch
  3. You handover your designs to your developer
  4. Your developer cannot work with your designs and asks you for a redesign
  5. You redesign Uber for caravans
  6. You handover your designs to your developer
  7. Your developer creates Uber for caravans using your new designs as a reference
  8. A front-end developer uses CSS to style Uber for caravans, using your designs (static images) as a reference
  9. There are some minor differences between plan and reality
  10. Later, you are asked to update the design (go to step 2).
No one is a fault in scenarios like the one above, it is hard for specialised designers to be completely aware of the limitations (or potential) of a particular software stack or of their developer's skills with said stack. And even when things run smoothly, a designer will be creating a bunch of ephemera assets. 

So what is the solution? Should designers skip prototyping altogether? No.

Designers need to rethink 'how' they prototype.

Do designers have the right design tools for the job?

Basically, designers are spending massive amounts of time working on collateral that will not, and generally cannot, be used in the final product. Ergo: "scalability is the biggest problem in the design industry".
Code and rule-based layouts take us even further [towards pixel-perfect prototypes], but we are no closer to working implementations of outward value or even close to true representations of reality. - Adam Michela, AirBnB
Long story short, designers can now use powerful design tools to create app-like prototypes of unbelievable fidelity. However, as good as these prototypes are, they are not the final product. And what is more, they do not even represent a stepping stone towards the final product.

You can create an app-like digital experiences on Invision, Adobe XD or UXPin, but that is all that it is, app-like. You cannot export it and give it to your developer. Your developer needs to start app building from scratch.

This is a scalability problem. We are doing the same work again and again.

What can designers do?

UXPin is trying to solve design's scalability problem with UXPin Systems. The problem is, while a design systems platform has serious value, there is still no easy way to go from prototyping to developing. And this is the pain point that hurts scalability in the design industry the most.

Basically, designers think they are doing this...
But are really doing this:
This is the root of the problem.

The solution is to make what designers and developers think they are doing a reality. The solution is enable synchronous development and design.

Codebots enables synchronous development + design

What Codebots does is bring developers and designers to the same platform and enable them to work side-by-side: synchronous development.

We do this by combining a raft of features into a single package. Starting with Management tools where you can plan your software in terms of epics and user stories, testing tools for quality control, and a Dashboard to measure your progress.

But more importantly, Codebots bridges the gap between developers and designers with a two-pronged Diagram Editor: one for UI design and one for creating database schematics.
When the Diagram Editor is set to Interface Designer, a designer can arrange elements using a drag and drop interface. They can also add custom CSS styling to take even more control.
Designers and developers can more easily see each other's pain points. And, because changes in one of these views will automatically carry over to the other view, they can more easily coordinate pivots around these problem areas.

Wireframes, prototypes and mockups

Wireframes, prototypes and mockups suffer from the same fatal flaw: scalability. Codebots enables developers and designers to work simultaneously on the same app development platform. Avoiding the drama with designers creating app-like prototypes of unbelievable fidelity.

So, what happens to Wireframes, prototypes and mockups now? Should designers skip prototyping altogether? No.

Designers need to rethink 'how' they prototype.

Even in a post-Codebots world, all of these assets have a use (even we are believers). What Codebots does is enable designers to pick their battles.

Designing something basic for a proposal in Monday's meeting, create a mockup on Adobe Photoshop or Sketch. However, if you are working with a developer to solve a core business problem, skip pixel perfect app-like prototypes and design as your developer builds. That is our vision for the future. And we are excited to do our part to improve the design process.