Designing for Decisions
A new approach to mobile product design with Play.
Whatever you’re designing, designing is deciding.
From the outside, a finished design — whether a book, building, dome or app — can appear as a clockwork tapestry of decisions, each expressing the confidence and taste of its makers. But ask a designer how they make their decisions, and you will get a very different story.
Drop by any design studio and you will find libraries of reference material: color swatches, fabric samples, tacked-up pattern books, and desk drawers packed with type specimens. You will find notebooks of quick sketches, cast-off iterations, and abandoned alternatives.
You’ll find this because making decisions means experimentation: taking a guess, trying it out, and judging the results. Making the right decision is often less about taste, inspiration and confidence, and more about knowing how to try again.
Making a Decision Tool
At Play, this way of thinking about design is fundamental to how — and why — we are making our mobile focused design tool.
We are building a product that not only allows you to communicate design decisions faster and more precisely, but one that can provide an environment in which to arrive at those decisions through experimentation — and play.
In this article, we want to present a few of our solutions — features that we have built to make your mobile design decisions, big and small, both faster and better.
Page Layouts in Play
While no two apps are the same, most apps are not so different.
It is no accident that a shopping cart page tends to look similar across different apps. Where user experience is critical, conventional layouts can benefit from what a user already knows. And by now, users know quite a lot.
When you create a new page in Play, you can start from a blank page and design from scratch or import from Figma — or, you can select from dozens of Page Layouts with pre-baked content. Once selected, the page behaves just as if you had made the page yourself. You are free to edit, add, and delete Elements, or easily create Interactions between pages.
At the early stage of a project, Page Layouts provide a way to explore broad decisions about which kinds of pages your project should include. Later on, when working within a familiar page pattern, Page Layouts allow you to focus your design decisions, reframing the blank-canvas question of “how should this app’s shopping cart look?” to something more specific: “what should be special about this app’s shopping cart?”
Play Library Components
We’ve taken the same approach to Components, too. As you are working on a layout in Play, you always have access to hundreds of Components in the Play Library.
Like Page Layouts, the Play Library provides a set of common UI Components that you can add to your project and treat as your own. The Play Library contains things like buttons, cards and video players, as well as system-level tab bars, headers and controls. Many come pre-baked with states and Interactions, too.
As you develop your project, you can edit the Component’s source (its Main Component) and see your changes apply to every instance or detach the Component to pull out smaller pieces. You can even include Components from the Play Library inside of your own Components.
The Play Library Components are all created with a wireframe look, helping you maintain momentum as you make early-stage decisions about a page — which Components and system-level features it needs and how those parts should be arranged. When it’s time to add visual interest and Interactions, these same Components are a jumping-point for more detailed decisions.
Designing with Tokens
In design, some decisions are local, such as the content of a page’s headline. Other decisions are global, like the size of all headlines. We have looked at every feature with this difference in mind.
Like other design tools — including the original design tool — Play supports a Component model. In this model, you can define a group of Elements as a Component, use instances of the Component throughout a project, and update all of these instances by making changes to the Main Component. In this way, Components strip away the tedious work of making each change individually.
While Components work well for supporting structural changes, certain visual and thematic decisions can only be made once a design is far enough along. Given that a complex design might include dozens or even hundreds of objects, implementing these stylistic decisions can often mean editing each Element and Component separately.
In Play, we have addressed this through a system of tokens we call the Design Foundation. Wherever a property accepts a color, spacing or typography value, you are able to select from among a set of centralized values. As with Components, when you make a change to a token’s value, your change will apply throughout your project.
Play’s Design Foundation system empowers you to make wide-reaching decisions about how your project looks and feels — even adjusting white space across your project from a single slider.
Making it Real
As you are making your design decisions, it is important to get an accurate view of what you are deciding on.
This presents a problem for digital product designers, tasked with designing an interactive product through static images. Though prototyping tools can help simulate more complex parts, such as transitions between pages, animations, or interactions, an accurate judgment often has to wait until the application or feature has actually been developed.
Mobile app designers face even greater challenges with accuracy. A mobile design as seen on a desktop monitor will look different than on an actual mobile device. In addition, many mobile designs incorporate a device’s native features that cannot be simulated by prototyping tools, and instead only experienced on the actual device.
With Play, we have engineered our app around these challenges. Quite literally, in fact, by making the design tool itself into a mobile app.
This platform shift addresses both problems.
First, by moving your design process onto the target device, Play allows you to seamlessly transition from creating your design to experiencing your design as a live prototype. We have developed a powerful Interaction model that allows any Element or Component to trigger dozens of actions, including animations, state changes, and more.
Second, because the prototype view is running in iOS, there is nothing to simulate — your designs are rendered with the same technology as a finished native iOS app, with access to all of the same native features such as maps, Collections, inputs, gestures and more. And because all designs in Play are responsive by default, you are free to experience your work across on multiple device sizes, too.
Whether you are bringing a design experiment to users or just validating your own decisions, Play enables a level of accuracy previously impossible without code — and never as easy.
Making it Together
Design has never been a solitary process. On today’s teams, thanks to distributed work, faster internet and a stubborn pandemic, more and more design decisions are being made together in software.
At Play, we are approaching every decision as an opportunity for collaboration. We will be launching with support for teams, including roles, permissions and guests. And with features like Page Layouts and Play Library Components, we are opening early-stage design to colleagues, clients and developers who might never have used a design tool before.
In the short term, we have made it easy for you to share a link to your Play project. When you send a link to a friend, colleague or client, they can open your project on their device and immediately experience it as a native prototype.
Later this year, we will be releasing support for real-time collaboration, enabling live sessions where you and your fellow designers, friends, colleagues or clients can make changes to the same project at the same time.
Design More in Play
These are just some of the features we’re working on at Play. We hope we have shown how our understanding of the design process — as a decision-making process — is driving our own design and development. We can’t wait to see what you create with Play…slated to launch publicly in 2021!
If you would like to learn more, visit our website or follow us on Twitter.
