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.
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.
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.
General Info & Resources
- Webcomponents.org is a top-notch resource for getting introduced to the finer details of Web Components. In particular check out their list of Articles and Presentations.
- A nice introduction to working with Web Components via an interactive demo.
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.
- Web Components & The Future of CSS (video) is a very interesting run-down of the possible implications, now that we can encapsulate our presentation and CSS within stand-alone modules.
- A Pragmatic Guide to Web Components (video) makes some great observations and recommendations for how to responsibly use Web Components.
- Real-Time Apps with Polymer and Firebase (video), this dives a bit more into code, but is a great example of building a real-time, multi-user, single page application using Web Components and back-end services – all in about 40 minutes.
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.)
- Polymer Website
- Introduction to Polymer 1.0 (video) - a great overview of Polymer today, from Google I/O 2015.
- Polymer Starter Kits - boilerplate files to jumpstart your Polymer projects, including common layout patterns.
- Polycasts (videos) - helpful video tutorials, from the Polymer team themselves.
- Polymer Visual Designer - this screencast shows an earlier version of Polymer's Designer, which is currently under-going an overhaul to match the new v1.0 codebase. SalesForce has already taken the leap, customizing this tool into a visual editor of their own that allows their customers to build fully functional SalesForce based applications.
- Road to Polymer – conversion tools, notes, links, reports related to migrating from
Polymer 0.5 to 1.0.
- Upgrading from Polymer v0.5 to v1.0 - one man's journey and tale of jumping to the new version of Polymer. Handy for those familiar with the earlier Polymer code patterns.
- Not get enough Slack in your life already? You can join conversation, with others working with Polymer, at polymer.slack.com.
Web Component Catalogs
- Polymer Web Components Catalog
- Web Components for Google Services
- Vaadin.com - Web Components designed for enterprise, also check out their demos.
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.com, Treeline.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.
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.