Can designing on your phone be better than on your desktop?

What if it were possible to design and build a mobile product all on your phone — and what if it were a better way of working?

Create with Play
Create with Play
10 min readJan 21, 2020

--

Struggling with the status quo

Much has been written about the challenges product design teams face — the issues are manifold. The time it can take to sketch, design, prototype and test ideas. What design tool we should be using this month. The gaps in hand-offs and reference files throughout the working process. The developer hand-off debacle and if designers should learn how to code (or not). Are we creating a website? A native app? A PWA? Flutter, React, Xamarin…? The list goes on.

We aren’t here to wring our hands over the speed bumps we all drive over on a daily basis — they’ve been well documented.

Instead, we’d like to share our vision for what we believe the future of product design can look like — and why the approach we’ve taken to solving some of these challenges is a bit unconventional.

Are we really designing for a mobile-centric world?

Interfaces as we know it — on our phones, in our cars, homes, schools, hospitals, places of work — will grow and evolve. But for the foreseeable future, our mobile devices will continue to play a central role in how we consume content and connect to both the digital and physical world around us.

Yet, we still create mobile products on our desktops using tools rooted in traditional graphic design software that hasn’t evolved significantly in over two decades. Have we made some progress? Absolutely. Do we have a progressive way of working that sits ahead the curve of the products we are capable of creating? We didn’t think so.

We don’t need another tool — we need a new approach.

When it comes to mobile product design, we’ve been using the phone as a validating medium — but shouldn’t it be the source of truth? We’re literally using everything except our phones to create mobile products.

Consider this:

We design on our huge desktop screens inside of a smaller mobile “cut-out” with our drawing tool of choice. We create “prototypes,” checking to see what our designs look like on a phone with a “live preview link,” or through a “mirror app.” Then we test with some users. Want to make changes? Go back to your desktop and start the process over again. Eventually, we’ll work in sprints alongside a dev team, which now needs to write code and start building the actual product.

Because of our broken workflow, teams spend too much time trying to solve process problems instead of product problems.

We need to reimagine our workflow instead of fixing bits and pieces of it. We’ve been building on an unstable foundation for too long — substituting band-aid fixes for real solutions.

We asked ourselves:

Are a keyboard, mouse and desktop the best tools for creating mobile products…or have they become barriers?

And that question started the journey of what came to be Play.

Introducing Play. A new way to design and build mobile products — directly on your mobile device.

Our Mission

Our mission at Play is to create a new paradigm that empowers people to design more thoughtful and impactful digital products. Create better products, in less time, with fewer barriers.

We started to imagine a world without the barriers of today’s traditional workflow.

Creating a direct connection to the medium would enable a more frictionless workflow, empowering you to design and experience your product at the same time.

You would be able to experience your designs, in real time, exactly how users would experience them. You could make changes to your designs and play around with new ideas — experiencing how they would look, feel and function, right in that moment. No simulations or “live previews.”

Create and experience a real product, in your hands, from day one.

This core idea started to unlock other “what if” scenarios:

What if you could collaborate with your team to design, interact with and test dozens of ideas in a matter of hours — without ever breaking flow and leaving a whiteboard session?

What if every discipline — strategy, UX, visual design, copy, engineering — could collaborate as one team within a truly integrated workflow?

What if you could give your dev team an Xcode file instead of static design files? Since you would be creating in the native environment, you’d actually be building a real product as you designed — all without writing a single line of code.

And so our journey began.

How it Started

Play was founded by four partners: Michael Ferdman, Joon Park, Eric Eng and Dan LaCivita, who all come from different backgrounds and disciplines. It was born out of a convergence of experiences we had while building and working at design and technology agency, Firstborn, founded by Michael in 1997.

As a designer and developer, Joon would often code quick prototypes of something he designed to see how it felt.

“I remember one day I was at home checking out designs for a mobile experience on my phone. I would always save the designs so I could view them on my phone to see how they would look and feel in my hands — I think a lot of designers do this. When you are checking designs out on your phone, you may want to tweak the font size, or change the layout a bit. But you need to make a mental note, go to your desktop, make the change, then sync back up with your phone. It’s a whole process, and it completely breaks your flow. I always thought there was something about making changes right in that moment, and seeing how they would look immediately would be amazing — but there was no way to do that. And that’s just with static designs. To create or change a ‘prototype’ from your phone…forget about it!”

For Joon, and many others, experiences like this had become more frequent, begging the question, “Isn’t there a better way?”

Early in our process, Joon created this demo one night to see what using gestures to adjust a simple interface would feel like on the phone.

An early liquid interface demo.

It felt incredibly fluid as we played around with it more. Being able to use gestures to change the orientation of an image, placement of text and overall layout felt new and different. It felt natural — and it was fun.

It was here we realized something else. When we use some of our current tools, they can feel dry — they aren’t that inspiring. Why can’t these tools be as delightful as they are purposeful? We knew that whatever we built needed to be incredibly functional — but we also wanted it to be fun to use. We want people to want to use Play.

The liquid interface demo was cool — but also simple. Could we build an actual product page from our phone?

Adding & Editing Modules

Ultimately, we wanted it to be possible to build anything from scratch, but there was also something powerful about the concept of quickly adding pre-built modules to play around with different page layouts. This idea would later evolve into the Play Library.

We experimented with different ways to easily add modules to a page.

We layered in additional functionality like the ability to quickly change entire layouts and edit properties of the content at the same time.

Imagine being able to experiment with different page layouts in seconds.

These tests were a defining moment for us. We knew the idea of designing on a phone would have its hurdles, and up to this point we were trying to make sure it was at least as good as designing on a desktop using the current, traditional tools.

But there was something about it that felt better. It felt magical.

Experiencing your product, in your hands as you created it, was so different from how we’ve worked up to this point. A connection was lost between the creator and the work when going back to the desktop to design — a connection that was so strong when designing with a phone in our hands. Having that connection encouraged us to play around with our designs and try new things because it was so seamless.

It reminded us of an important facet of the design process — teams need the ability and time to simply play around with their ideas and designs. It is often through this process that we stumble upon new ideas and better ways of doing things.

Creating space for these stumble upon moments is critical for new breakthroughs to surface.

Evolving into Play

We continued to build on our initial ideas while collecting information from dozens of product design teams through interviews and conversations. This helped validate many of our own thoughts and experiences and also shed light on other pain points and areas of opportunity.

The work that continued in the months ahead would evolve into the product that would eventually become Play.

This is one of the last demos that was created where we tested different interface ideas and ways to adjust things on the fly. The slider functionality seen here evolved into a core UI element for the final product.

During this process, we realized that creating in the native environment makes many things possible.

Play users will have the ability to integrate and customize many of the native OS Kits. From ARKit to MapKit, you’ll now be able to build with some of the most powerful mobile features. Incorporating Kits like this along with other commonly used elements (from buttons to image galleries) will be available in the Play Library.

You can design anything from scratch or give your project a jump start using the Play Library. Over 100 customizable components have been created based on common design patterns.

It’s also important to remember you’re building a real product as you design — all without writing any code.

Gestures and interactions are a key aspect of creating a great product — it’s critical to feel how your designs will move and function. Tools that attempt to create prototypes that “feel like the real thing” fall short of giving you the nuanced feedback you need to fine-tune your work.

Instead of trying to get “close to the real thing,” Play gives you the power to design and build a real product, with the flexibility to create and change complex interactions easily.

Easily add transitions with Play’s Presets while still being able to create complex, gesture-based interactions. More advanced users can use Code Mode, where you’ll be able to build any interaction model you can think of.

Ultimately, we believe anything you can think of will be possible to create with Play. As we looked at some of the more complex apps (Google Maps, for example) we asked ourselves, “Will Play be able create something like this?” We believe it can.

Multi-user functionality and contextual chat make collaboration not only easy, but effective.

Collaboration in any workflow is critical, which is why we’re incorporating features like multi-user functionality, shared team libraries and page-level chat.

And while all these features are important, we believe what will make the biggest impact on people using Play is the direct connection you have with your product when you’re creating it and the freedom to experiment with new ideas quickly and easily.

A snapshot of v1.0 of Play

Creating Principles to Guide Us

Once we began building out Play, we established core principles to guide everything we do.

1. Remove barriers. Create a direct connection between the creator and the medium they’re creating for.*

2. Make it fun. Create an environment where people will want to experiment and play around with how their designs can look, feel and function.

3. Unify the workflow. Create ways for the whole team to work collaboratively with no hand-offs, from ideation to shipping the final product.

4. Open-source design. Create a platform for people to share, support and educate one another through the platform.

*This goes beyond the phone. If you’re designing for a Tesla touchscreen, why not design it on a Tesla touchscreen?

When is Play Launching?

We know the idea of creating a product on your phone is ambitious. We don’t think this will be just as good as designing on a desktop — we believe the experience will be better than creating on a desktop. Having the ability to experience your work and see how the final product will look, feel and function, as you create it, is incredibly powerful. We’re excited for more people to try it.

We’re opening up our Private Beta program to more users in February. If you’d like a chance to be part of the program, you can get in touch with us here.

Play will be launching initially on iOS. In our Public Beta later this year you will be able to export to Xcode, where we will support Swift. In future releases, we plan to support other languages like React and Flutter.

Why wouldn’t you design an iPad app on your iPad?

We will follow the iOS launch with rollouts on other Apple platforms like iPadOS, as well as Android and (down the road) a mobile-centric platform for creating Progressive Web Apps.

There will be a browser-based desktop tool where you can manage your teams and projects, create and manage asset repositories and work on tasks less conducive to the phone (like longer form copywriting).

Play’s desktop admin panel handles team & project management and allows you to easily add assets like images, videos, fonts and icons.

If you’ve made it this far, we thank you for reading! We’ll be releasing more articles in the coming weeks that go deeper into the features and functionality of Play.

We hope you’ll continue to follow us on this journey. You can get more info on our website and follow us on Twitter.

We’re really excited about what we’re building — and even more excited to get your feedback as we roll the product out!

Until next time,

— The Play Team

--

--

Create with Play
Create with Play

The first native iOS design tool built for creating mobile products.