As product designers, there’s a need - and now the opportunity – to greatly improve the information we base our design decisions upon.

Today, most of our early design decisions are based upon pretend use of pretend things. It’s only when our ideas meet reality – usually when a product or feature ships – that we truly learn what, if anything, people find valuable about them.

To build our best products we need to be able to build out from the actual value they provide, as early as possible. To date, our design process has been missing a big piece of the puzzle to accomplish this. Understanding actual value requires observing real behavior, which requires that we build design experiments that feel like real things.

Dig in below for some detailed thoughts on how we can do this – today.

Value-Led Design Concepts

I recently gave a presentation at the FRONT Product Design Conference about these ideas as well as current tools that can support them.

Watch, or read, the content of this presentation below for a good overview of these concepts and the supporting tools. Also, below are links to specific resources mentioned in the presentation, and more.

Watch

Read

For this talk I organized my thoughts in article format first. Helpful for clarifying ideas, not necessarily recommended for easily converting into spoken ideas on stage. 

Article of presentation content, with slides in-line.

Supporting Tools

By no means an exhaustive list of resources, below are links to some interesting tools available today that can help us build ‘real things’ quickly and observe the real-world behavior they afford. Think we're missing a great resource that belongs here? Let me know.

Web Components

General Info & Resources

Some Detailed Info

A couple of specific presentations and screencasts for those who would like to learn more about what Web Components can do and how to use them well.

Polymer

Google's Polymer is the current best bet for getting started with, and using Web Components in your projects. Polymer is a Web Component library that includes both a range of high-quality components and tools to make creating Web Components and Web Component projects easier. (Note: between v0.5 and the production-ready v1.0, the code for Polymer made some big changes to improve performance. Take note of this when looking up information, tutorials, and resources for Polymer. Some specific recommendations may no longer be applicable if they refer to early pre-production versions of Polymer.)

Web Component Catalogs

Some Other Interesting Bits

  • A round-up of some interesting applications built with Polymer at the aptly named BuiltWithPolymer.org. A specific interesting example is the full-featured Atavist.com, who recently re-built their public product on top of Web Components, using Polymer.
  • Ele.io – a 'Codepin' of sorts, for Web Components. 

Visual Application Builders

There's no shortage of visual application builders cropping up. Many of these are tightly bound to fixed templates and won’t work well for custom prototyping. However, a number are surprisingly capable. In addition to offering a visual interface, the best among these tools take additional steps to convert development concepts into a mental model that is intuitive to non-developers as well.

I find Bubble.is to be one of the more interesting examples of these tools currently. In addition to being a very capable visual application builder it does a number of other things to further reduce the level abstraction involved in ‘programming’ a working application.

There are other capable visual builders currently available as well (Appery.io is a good example), but many expect one to have developer’s mental model to use them extensively. Others do a great job of presenting back-end functionality (e.g. Stamplay.comTreeline.io), but require you to create your UI (front-end) manually or within another tool.

We're doing another survey of these tools to see what solid options currently exist. Expect updated recommendations here once that’s finished. 

More to Come

Other resources that will be added here shortly are 1) tools to create, or access life-like data in our products, and 2) tools for observing their real-world use – both passively and directly.

Who + Where

I’m Clayton Farr, co-founder of FORM Experience, a digital product design consultancy.

These concerns and ideas are at the front of our minds at FORM. If they interest you as well, definitely get in touch.

Stay In Touch

If you’d like to follow my thoughts on this topic and others, concerning design and trying to be a modern human, follow me on the Twitter.

If you’d like to be notified when additional information or resources are added to this site, just sign-up below. Thanks.