Challenging the status-quo of how — and why — product teams create ‘prototypes.’
Does our current process lead to better solutions, or are we just validating our initial designs?
Product teams will typically create prototypes to quickly evaluate and test solutions in an effort to make them better. Few people would disagree with that in theory, but when we think about how we often create prototypes in practice, it begs the question:
Are we creating prototypes to iterate on and improve our solutions, or are we using them to simply validate our initial designs?
We know it’s rarely the first idea we come up with that ends up being the one that ships. It’s through a process of collaboration and iteration where that initial idea becomes a great solution.
At Play, we believe that status-quo workflows can sometimes inadvertently lead us to believe the design we have in our head initially is the best solution. That’s largely due to some of the friction inherent in how we typically collaborate and iterate.
In the current process to create a mobile product, product teams often use a design/prototyping tool (or sometimes two different tools) and then need to download a mirror app—syncing it with the file that’s been created on the desktop in order to view the work on an actual mobile device. When you want to make changes to your product, you need to go back to the design and/or prototyping tool, make those edits…sync again…check your work…and the cycle repeats.
More importantly, we can spend very little time actually holding our phones and interacting with the products we’re creating as part of the design process. We’re only using the phone as a validating medium — not a place to create and iterate.
“I don’t think a prototype should be about designing out every screen and then linking artboards together toward the end of your design process — it should be a part your design process,” says Play Founder Joon Park.
“Because I have a background in design and coding, I start coding really early as an extension of my design process. I like to design out simple UI elements in my design tool (like buttons, sliders, cards) and then go into coding to expand on my design where a lot of things can change while I’m playing with it in code. After I design and code an initial idea I have, I can actually experience how it looks and feels and always find ways to make it better. What we want to do with Play is create a new way for product teams to have that same power, that same experience. To be able to truly iterate and evolve your product in the most direct way possible.”
Play offers a new approach —enabling you to experience your products as you create them.
Whether you’re incorporating interactivity and motion into your designs to create a prototype, testing new product features or creating a new product entirely, we believe a truly iterative approach to both visual and interaction design should be integrated into the overall design process.
In this article, we’re going to focus on Play’s Interactions feature. This update (made available mid-July to our Beta users) provides an intuitive way for teams to incorporate motion and interactivity into their product, test how it feels, make changes and iterate—all in real-time and all directly from their phone.
If you’re new to Play, you can check out our first article or our website for some background on why we started the company.
We followed a few key principles when we were developing Interactions, which we’ll take you through now:
1. Make it simple to make it real.
Prototypes exist in large part because it would take too long and require coding skills to build the real thing. But if building the real thing were simple and fast, wouldn’t it be a no-brainer to go that route? Even when we try to create simple functionality that is very common in products—like making a header go away while scrolling—it can be challenging to achieve the “real thing” by hacking together functionality that “gets us close enough to the real thing.” We have to spend too much time executing tasks that should be simple—taking away time from making the actual product better.
At Play, we believe it’s critical for teams to have the ability to create products that are aligned with the ultimate vision of the experience they want to create. Tools that attempt to create prototypes that “feel like the real thing” can fall short of giving you the nuanced feedback you need to fine-tune your work. Play is different. It gives you the power to design and build in the native environment with the flexibility to create and change complex interactions easily. What you create will feel and function exactly how a real product will behave.
Another benefit of creating interactions that function like a real product is that even though you don’t need to code them, they introduce concepts that allow “non-engineers” to speak a language their developer peers will better understand.
Along with this freedom to bring even more complex interactions to life, comes the ability to conduct user testing in a way that doesn’t force a user down specific paths, which many current tools encourage. With Play, you have the ability to conduct testing with products that look, feel and function like the real thing, and you don’t need to worry about certain flows not working.
Here’s one more benefit of making the real thing: Since you’re creating in the native environment, in future releases of Play, you’ll be able to export to Xcode when working in iOS. (We’ll be launching Android in the future as well). Any work you’ve done will be able to be used in the development phase of your project.
We plan on having three levels of code support so your team can use what is most helpful for your dev environment:
- Foundations: Type, color, spacing, icons, easing, animation speed
- Laying out views by components
- Full Xcode file for the entire project
2. Experience your product as you create it.
“Work and present your designs in context. Instead of presenting a mobile prototype from Keynote or Principle on your laptop, show it in a device similar to the one your audience will use. While designing, make sure to go back and forth between your design tool and the user’s device as much as possible.”
At Play, we agree that a user’s experience of a product in the final medium is paramount. But we often don’t go back and forth between our design tools and the user’s device as early and often as we should. Even when we do, we only have the ability to validate what we’ve already done, not directly manipulate the product from the device itself.
We believe you should be able to experience and iterate on your mobile product from your phone from day one. The cornerstone of what makes Play different is the fact that you have the ability to design, build, collaborate, test and share all on the same medium you are creating for — your phone.
When teams create a prototype by animating static designs we think a critical part of the design process is missing. Teams need the ability to feel their designs in their hands. Interaction design is part of the design process — its not about adding motion to static design. How a product feels and functions can have a big impact on what the design of that product can look like — so being able to experience your product as often as possible as you’re creating it will certainly lead to better work.
Great products come from an iterative process where the visual part of design (how things look) is not separated from the interactive part of design (how things feel). What we’re doing at Play is giving people of any discipline the power to experience their product as they create it — a critical piece that has been missing from our current workflow.
With Play, you have the ability to create real interactions using native gestures and experience them instantly — all from your phone. Want to make changes and iterate on your product? Create multiple variations for a user testing session and make changes on the fly? You can do all of that easily and quickly, without ever breaking flow and needing to go back and forth between different software and mediums.
Many great features we interact with on a daily basis in products we love are born from the product team creating numerous variations and playing around with them until finding what feels best. The element of discovery and trying new, sometimes crazy things, can lead to breakthroughs.
When you’re using Play, you can create a dozen different variations to find the one that feels the best. You can keep iterating, tweaking and discovering. You have the ability and freedom to experiment with different ideas, which leads to better solutions and more breakthrough discoveries.
3. Make it collaborative, shareable and scalable.
Collaboration is key for how teams work together to create products. The way we think about collaboration at Play is not just in the design phase of a project, but the entire product lifecycle.
When teams use Play, everyone can directly contribute to the product, not just create a reference file for the next discipline to pick up on. Not only can visual design be done in the same file as more structural UX work, the team can work in tandem…in real-time. Interactions further augment collaboration in Play. Since anyone can bring a product idea to life using Interactions, users can create numerous variations and then invite team members to experience their product, leave comments or even build on those ideas themselves.
In the early stages of a project, the more the team experiences and iterates on wireframes or designs, the more you’ll find things that can be improved upon. The solution you have in your head may feel very different once you begin to experience it in your hands — so the sooner you can get to that point, the better the product is likely to become.
Most importantly, this collaboration and iteration can start from day one in Play, and every discipline can be part of it. You can quickly and easily wireframe and map out the flow of a product — integrating Interactions and functionality as you go. The entire team can experience the product as it evolves, working on it together in real time. From designers and engineers to product managers and business owners, anyone will have the ability to view, comment and edit, all from their phone.
As team members create Components, those can then be shared across the team and larger organization. What you create becomes a living design system instead of a library of static assets.
Sharing & Scalability
When you share a product you’re working on in Play, your colleagues will be able to experience it in the native environment, all on their phone. Sharing a working product in Play is seamless and enables anyone who has Play to view and experience your work, immediately.
In many of our current tools where we are animating static artboards, you need to create different versions for every phone screen size. In Play, you can create your product once and not have to worry about how it looks and feels across other screen sizes.
You can also log in on any supported iPhone and have full access to all your files. Everything is stored in the cloud; there is no syncing to deal with, and everything is real-time.
4. Unlock the power of the native framework.
Play was deliberately built on a native framework to easily give you access to the power of iOS (and, down the road, Android). When we considered the fact that other tools are either a macOS application or web-based, we realized there was a big opportunity for teams to leverage the powerful features of iOS. From UIKit to MapKit and ARKit, you’ll now be able to access native features and have full control over how you integrate them into your product.
You’ll also be able to combine some of Play’s other advanced features to create some pretty awesome stuff. For example, you’ll be able to combine the power of live maps with Collections and link external data from a JSON file to create powerful product features in just minutes.
In our next update for Interactions, we will be incorporating variables and conditions, giving users even more power to create more complex and sophisticated products.
Rethink the way you work. Reimagine the products you can create.
No one knows exactly what the future of product design will look like. For the foreseeable future, it’s likely our mobile devices will continue to be the primary interface through which we interact with the world around us. The problem is that our tools and workflows for mobile design have largely relegated the phone to a validating medium.
At Play, we believe that giving you and your team the power to experience and iterate on your ideas, in real-time, on the medium you’re designing for, is the future of product design.
We know our approach is different—changing the way we’ve done things is never easy. Not too long ago, many people thought it was a crazy idea to put a design tool in the browser…look where we are today.
If we don’t push the limits of what we think is possible, we will be stuck with the status quo and small, incremental improvements. At some point, incremental innovation simply reaches its limit.
This is the beginning of our journey and we’re just getting started. We welcome you to join us in what we believe will be the future of how teams collaborate and create incredible products together.
We’re currently accepting team sign-ups for our Private Beta. If you are on a team and would like to be invited to the program, please send us your information here.
Thank you for the continued support and following us on this journey!
— The Play Team
