Prototyping for success
Original publishing in Smashing Magazine on August 31st 2016
What if I told you that Adobe Experience Design (Adobe XD) was born as a prototype, using pieces of another prototype, and growing as a solution after lots and lots of prototypes? Wait, what?
One thing is very clear for us at Adobe: a prototype is essential to help teams drive innovation.
Hi my name is Demian Borba, and as one of the product managers working on Adobe XD in San Francisco, I’m excited to share with you some examples that demonstrate why and how building prototypes are helping us to build Adobe XD.
Before I tell you about Adobe XD, let’s talk about prototyping in general.
Why do we build prototypes?
As stated in my previous post about Design Thinking:
“A prototype is worth a thousand meetings.” — an IDEO saying.
Prototypes are about communication and hypothesis testing. They give teams a way to experiment something that’s tangible, shortening the psychological distance between the user and the solution.
We build prototypes to learn, solve conflicting ideas, start conversations, and manage the building process. It helps teams to build empathy, to collaborate, to explore options (and barriers) that only become visible when you build something, to test and to be inspired.
There’s research to support the theories that you can “build to think” or “write longhand to remember”, which means that if you use your hands, more neurons are utilized to process the task in your brain, making you “think better” or “remember more.”
The biggest benefit always goes back to risk. The sooner we “fail” and the faster we learn, the greater the chances are for success.
It’s cheaper to fail early in order to validate things that work and things that don’t. That’s why we build prototypes using Adobe XD for every major product feature. We test with prerelease users and key customers very early on and definitely before we get to implementation. And yes, we do “fail” a lot, which is great! It’s great because we learn a ton in the process and minimize the risk of failure in the long run. In the end, we tackle real customer needs, with empathy, in an innovative way.
Can prototyping be fun and engaging?
Absolutely! One of the fun prototyping exercises I use to warm design teams up is called “Dark Horse”. From your Design Thinking brainstorm, pick the craziest idea, the one that’s almost impossible to become a reality; and as a team, build a prototype for it.
Warning: crazy and funny things WILL happen!
You can guarantee oxytocin will be released; team members will bond and connect more.
Building Adobe XD
Almost two years ago, a small group of very talented designers, engineers, and product managers got together, to prototype what a new solution for designers trying to communicate their message could be.
After many different brainstorming sessions, instead of starting from scratch, they used bits of existing prototypes to string together a foundation to explore and experiment with new tools and approaches in a design tool.
That prototype grew and new and amazing tools were created, validated, fine-tuned, and validated again.
And here we are in 2016! With a much larger team that includes designers, engineers, product managers, program managers and interns; and we’re all here focused on solving the UX challenge of today and tomorrow.
As soon as the first prototype was validated, then changed and validated again, we started developing Adobe XD as a native application. First for macOS and later for Windows. Additionally, we're working on a companion app for iOS and Android, for designers to preview their designs in real-time.
Since day one, the one thing we continue to do for major features is use Adobe XD to build and test prototypes before we implement them.
Design with Data Prototype
In October 2015, at Adobe Max, Anirudh Sasikumar, an engineer working on Adobe XD, demoed a prototype where designers could use the tool to feed designs with real data coming from different sources, such as the Finder and Web, for text and imagery. His post covers the features in details.
I spoke with Anirudh recently, asking how he came up with it and how the prototype helped him validate the approach.
According to him, it's very common for developers to bind systems to data. Something that's not true for designers, always needing to use fake data to simulate how the design would behave in the real world.
Anirudh explained the catalyst for designing with real data was the Repeat Grid tool. As soon as we finished building it, it was natural to start thinking about bringing more data in. The design community had already expressed interest in “Designing with data” and numerous workarounds in achieving the same using plugins/extensions.
Thanks to a delay on Caltrain, he started coding the functionality. Thanks Caltrain! Having some of the use cases in mind, implementation was easy. By the end of the trip, he had a working version of it. Not polished, but enough to show promise and to be validated.
The magic of prototyping is, after having it created, being able to see all the possibilities and edge cases around it; how much of a benefit it really is. It's not in your head anymore, it's there, closer to reality. You can see so much more!
You can also see walls, problems that never surface before you actually build it. For instance, connecting with Google Sheets was tricky.
Phase 1 is completed and available for macOS, where designers can drag text files from Finder, to feed a Repeat Grid. The next phase will focus on sample data and bringing content from the Web.
If you want the feature in Adobe XD, feel free to upvote here.
Layers
Let me start with the same question we asked hundreds of designers:
Do you need layers?
Initially, we started with the assumption that people didn't need layers, especially the way layers were presented for so many years in Photoshop or Illustrator. It was a big challenge, because a big number of experienced designers took years to build those mental models.
At Adobe XD, in order to deliver innovation, we challenge existing mental models frequently.
Based on that initial research, Talin Wadsworth, the lead designer for XD, came up with the concept of local layers. To validate the concept, we worked together to set the context and test the prototype with prerelease users and key customers.
After a long research/validation process using a prototype to drive conversations, and after multiple adjustments, we confirmed that our customers need layers for exporting and to organize complex designs.
We have started the work to implement this new mental model.
Soon, designers from all over the world will tell us if we got it right. Fingers crossed!
In Conclusion
A prototype is an extremely powerful tool to help teams “see” more, experience more, “fail” more, learn more and, in the end, pivot faster to where the secret for success is.
A quote from the book Zero to One sums up the benefit of prototyping well:
“It’s like the world is full of secrets for disruptive success, just waiting for someone to find them”.
Who is going to create the next Uber, or the next Facebook, or even the next Pokemon Go app? Building and testing prototypes can help you get there, faster!
As a suggestion, please remember that Adobe XD can support you and your team when building prototypes for websites or mobile applications. Have you tried it? It’s free: http://xd.adobe.com
What are you waiting for? Start building prototypes now!
