Get Started with Prototyping
After completing this module, you’ll be able to:
- Describe what a prototype is.
- Summarize the benefits of prototyping.
- Describe the different ways to prototype.
- Summarize how Salesforce prototypes.
Ever wondered how a product goes from design to production? Or how researchers conduct studies with participants? Or how designers gather feedback on ideas? Often, there’s a prototype involved.
But What Is a Prototype?
A prototype is a preliminary version of a product or idea that lets project stakeholders test user interfaces. In addition, it can be quickly modified and turned into a final product. In the software world, prototypes can take many forms. They can be:
- Paper prototypes. This can be as simple as a series of throwaway sharpie drawings.
- Online image-based prototypes. This enables designers to show a click-through flow of static images. For example, InVision apps and Marvel.
- Interactive prototypes. Our personal favorite, this is created with code and allows for a high degree of customization and flexibility.
You may be wondering, “Why would I put in the extra effort of creating a prototype?”
While it can seem like an extra hurdle before production, prototypes can help keep your product consistent, efficient, and usable while saving time down the line. Spending extra time early on and using the prototype to gather feedback helps ensure your product remains usable when you add new features or update existing ones.
What Can Happen When You Don’t Prototype
Imagine making a large interaction change without doing any research with users. The designers put in extensive work and the production team continues that work by implementing the change. After the release, your customers come back to you with multiple complaints about the new feature everyone thought was perfect. Now the process has to start over. The designers have to go back to the drawing board, new research studies have to be run (because we learned from our mistakes), and the development team has to redo the work.
That’s a lot of wasted time and effort!
What Can Happen When You Do Prototype
Now imagine we first created a quick prototype detailing the designers’ new feature. The research team showed it to a group of customers who gave us some not-so-great feedback.
This is our chance!
We go back to the designers, iterate on the feature, do more research, and discover that our customers are happy with how the feature works. Sweet! We measured twice, and now the developers only have to cut once and everyone’s happy.
Now that we understand the importance of prototypes, let’s decide which version we’re going to use.
With so many options, it can be daunting trying to figure out when to use a prototype and which version to pursue.
This decision relies mostly on the design itself. Here are some questions to ask yourself when deciding which course to take.
When is your deadline?
Static, image-based prototypes are quick to produce while interactive prototypes typically involve multiple people and can be a lengthier process.
How many features are you testing?
Are you adjusting the phrasing on a button or are you reworking the entire navigation? Interactive prototypes can help with running multiple A/B studies. A/B studies are randomized experiments where two different versions of the same feature are randomly presented to users to see if one version is better than the other. This type of study can be useful for testing features such as button text and colors, or the order of tabs in a tab set.
What kinds of features will be tested?
If it relies heavily on unpredictable user interaction, such as searching or writing feed posts, or focuses on many different features, then an interactive prototype can be beneficial.
How often do these features get reworked?
If these designs are revisited often, it can be helpful to have a lasting prototype that can be updated whenever things change.
How will the prototype be used?
Are you doing some Guerilla testing around the office, where you informally talk to coworkers who volunteer to participate? Or are you scheduling formal video conferences with external customers? Different settings call for different prototypes. For instance, paper prototypes don’t tend to translate well over video chat, but they can be useful for quick Guerilla testing with coworkers. Conversely, online, click-through prototypes usually work much better over video chats, but it can be inconvenient to lug laptops around the office for quicker testing.
Here at Salesforce, we constantly produce prototypes for new explorations and testing features. The typical process goes something like this:
- Determine need. Either through feedback from our customers, or from our internal feedback loops, we determine a need for change to some part of our product.
- Create initial designs. Designers iterate on possible solutions to this need. They create static images with the Lightning Design System using a program such as Sketch. Sometimes designers link these images up into a clickable flow within an online service such as InVision. This is used to to gather immediate feedback on the designs from product managers and other user experience (UX) folk.
- Develop interactive prototype. After initial feedback is given and the need for a more interactive prototype is determined, designers work with UX engineers (UXEs) to create a prototype that can link to real data and can test multiple features at once.
- Test prototype. Designers and UXEs work with researchers to schedule testing sessions where the interactive prototype is presented to customers and employees. Their feedback and reactions to the prototype are collected and processed.
- Assess research results. The findings from the research sessions are shared with the designers, UXEs, other researchers, and product managers who have a stake in the features. Then the decision is made whether to continue to production with the current designs or go back to step 2.
As you can see, prototyping is a collaborative and iterative process that involves multiple teams and skill sets.
Head over to the next unit where we gather these teams and make a plan for our new prototype!