How to introduce prototyping to your product design team
When designing static mockups it’s not certain that people you work with will see the same things as you do. Design is experienced not only visually but also emotionally and most importantly, over time. In this sense prototypes help us to experience what our users will experience, interfaces that evolve and change rather than static screens.
Having to think of how our designs animate and transition into each other also helps us to think more holistically about our digital products. Prototypes convey a richer experience and makes it easier to show our designs and communicate with stakeholders, developers and other designers. Using prototypes for user testing also shortens the feedback loop and enables us to produce better solutions and deliver a better product.
We recently introduced new prototyping tools at foodora, and we can already see how they changed our thinking to be more conscious about the entire experience, from UX flows to animations. If you or your team have decided that you want to introduce prototyping to your workflow, here’s a walk through of the process we used at foodora.
Decide what software is right for your team
There are many different options out there for prototyping, so eventually you need to settle for which tools you will be using. Here are some things to have in mind when choosing what software to use:
What will you use it for?
Prototyping, right? Well, it’s not that easy. Different tools have different strengths and weaknesses, which is why we at foodora use multiple prototyping tools. Understanding what you want to be able to achieve with prototyping is important if you want to pick the right tool.
Are you looking for something quick and dirty to show flows, or do you want to spend a lot of time fine tuning animations? Doing research and figuring out what your needs are and what alternatives are suitable is the first step in the process. There are also some other things you need to consider such as budget, how easy it is to share prototypes and how well the app integrates to your current toolbox. I won’t cover all the options in this article, there are already very good resources online (such as this one).
How good is your team at prototyping?
Prototyping requires a bit more technical knowledge compared to creating static mockups. If people on your team has experience with development/animation or have done prototyping before, adopting prototyping into your workflow will be a lot easier. If no one on your team has any previous experience it’s not an issue (new software always takes time to learn anyway), you just have to acknowledge that it will take longer time to incorporate prototyping.
Prototyping is worth the effort, if you don’t spend too much time building the prototype itself.
To be able to integrate prototyping in your everyday workflow, you have to be comfortable and fast enough to produce something that you can use. Basically, if your team does not have any experience with prototyping tools it’s better to start off with something a bit more basic.
What we use
At foodora we use three prototyping apps: Invision, Principle and Origami. We use Invision for showing flows and figuring out edge cases with our PMs. Invision is good for this because it’s very easy to share prototypes via the browser and you can create flows very fast.
Principle is useful for receiving stakeholder feedback and doing user testing because building prototypes takes reasonably little time and they can be run on devices. (A very good resource for Principle is this site: http://principletemplates.com/)
When we really want to focus on one specific feature, we use Origami because it allows for advanced animations and even some logic. The disadvantage to Origami is that it has a steep learning curve. Creating simpler flows is a bit too complicated and takes too long time compared to Invision and Principle, but for more advanced prototyping it’s great.
Introduce the software
Ok, so now you decided what prototyping app(s) to use, how do you introduce it to your team? Being the one responsible for introducing Origami here at foodora, here are some of my insights to what you need to do as the “Introducer” at your company:
Learn the software
You have to get comfortable with the software so that you can easily use it. By comfortable, I don’t mean that you need to know the software inside out, but you need to understand how it works and how to solve common issues. This knowledge will later form the foundation for teaching others how prototyping works. Watching video tutorials and reading through documentation are good things to do to get acquainted with the prototyping tool of your choice (I always have multiple tabs open with documentation/tutorials/forums for reference).
An often overlooked aspect of prototyping is how to integrate prototyping apps with the design software you’re already using. It’s important to consider what devices will use to preview your prototypes, how you will transfer the prototypes to the device, how you will export designs from the design software you’re using. For example, if you want to use Principle, layer naming is very important and if you’re thinking about Origami, you shouldn’t use symbols and overrides in Sketch. Some more advice on overall workflow for prototyping that I found useful can be found here.
If you are the one introducing software to a team, you have to be prepared that your colleagues won’t understand how it works or how it can fit into their everyday work. At foodora, I held prototyping workshops every Tuesday for a number of weeks where Product Designers gathered together for a more or less chaotic hour of exploring Origami. These workshops have been really valuable in spreading knowledge about the software, not only about specific techniques but also about what’s possible from a conceptual point of view. Doing these sessions as a group also helped raise the collective knowledge and made everyone more comfortable with prototyping.
Reach the Eureka moment
In the beginning, people will struggle with prototyping in general, but this skepticism will go away as they improve.
Initially it’s not about using software perfectly, it’s about creating something that’s usable.
Doing things the most ineffective way is completely fine, because once your colleagues preview their button animation on a device they will start to get excited and want to prototype more.
For teaching Origami, I wanted to start off easy and gradually increase the complexity of what I was teaching the rest of my team, because I knew that people would lose interest if the sessions were too complicated to begin with. I also knew where I wanted to end up (being able to create transitions between screens and use basic logic), so I started out with my end goal in mind and worked my way backward from there, figuring out what I needed to teach and developed a curriculum. Teaching people the basics of prototyping while still trying to make it relevant for them is the hardest thing early on (in this phase, getting your colleagues excited about what they’re doing is very important). Once your team members understand basic concepts of prototyping and how to create usable prototypes, they will do more prototyping and become more proficient with the software.
Be willing to help
It can sometimes take a little while before your team adopts new software, and the initial attempts to introduce prototyping tools can be met with hesitation and even hostility. Most designers think that adding another tool will be inconvenient and increase their workload. So if you know more than your colleagues do, help them!
If you can teach your colleagues how to think prototyping, improve their workflow and how they can integrate it into their daily design work, you as a team will grow and produce better designs. This of course requires patience from your side and a willingness to take time out of your day to help your colleagues, but in the end it’s worth it! If your schedule doesn’t allow you to teach your colleagues yourself, sharing resources for learning can also be very valuable.
Prototyping will be something that will help you and your team to design better products. It will require some work, especially if you have to introduce the software, but if you have workshops and get your team excited about the new possibilities prototyping gives them, you can open up new avenues for discussing and exploring design solutions and as a result, your team will produce better designs.
Resources:
Invision
Principle
Origami
Principle templates
Framer & Sketch: An Intentional Workflow by Charlie Deets
Comparison of different prototyping tools by uxtools.co
