The AndPlus Guide to Rapid Prototyping

When architects, engineers, and product designers want to try out their ideas before building (the house, bridge, machine, car, or appliance), what do they do? They make models, or prototypes.

 

Traditional prototypes are made from cardboard, wood, metal, or clay. More recently, models have been made of electrons: digital representations of the designs that can be tested by simulating loads, wind, earthquakes, and other extreme conditions.

 

The world of software is not unlike these physical artifacts. Before spending time, effort, and money on building a software application, it’s helpful to first build a prototype. 

 

What is a software prototype, and why is it important?

A software prototype is simply a representation of the system’s user interface (UI), without having the deep underlying functionality of the intended product. Rapid prototyping is the process of creating a prototype quickly, often in several weeks, and being able to modify the software in real-time using state-of-the art software tools designed specifically for prototyping (more on that below).

 

But don’t over-emphasize the software’s role in creating an effective prototype. The fact is, successful and effective prototypes are created by highly experienced and talented User Experience (UX) designers. Prototyping software alone doesn’t automatically achieve business objectives or deliver great user experiences any more than a high-tech sports car creates a great race car driver.

 

At one time, these talented UX designers created prototypes with paper, markers, scissors, and tape. Later, when graphic editing and screen capture software became affordable, UI designers could build wireframes or “static images” to represent the UI components.

rapid prototype - camera lens

However, these approaches had limitations that reduced effectiveness in conveying how the software would behave:

  • Building prototypes was time-consuming and tedious.
  • Demonstrating prototypes was cumbersome.
  • Modifying the prototype design during a demonstration was nearly impossible. It might take several days for a designer to revise a design from user feedback and hold another demonstration.

These challenges, along with significant advances in hardware processing and prototyping software, ultimately led to the creation of rapid prototyping software tools.

The Rise of Rapid Prototyping

To overcome the shortcomings of traditional software prototyping methods, a new approach has emerged: rapid prototyping. Broadly speaking, a rapid prototyping system is a software environment in which designers can simulate an application’s user interface. Because the UI is simulated in software, it can be modified “on the fly” during a demonstration, in response to stakeholder feedback.  This is the “rapid” part of rapid prototyping.

 

In this type of prototype, the “wireframes” are dynamic, rather than static. Designers can present and demonstrate an interactive UI with features such as buttons and drop-down lists, allowing users to click (or tap or swipe) and make something happen. 

 

Although there is little (or no) data or logic behind the simulated interface, stakeholders can get a good idea of the various user journeys through the application. It’s a much closer representation of the “real thing” than you can get using traditional methods.

 

 Rapid prototyping has numerous advantages over traditional prototyping approaches:

  • Designers and developers can quickly understand and verify stakeholder input into the UI design. 
  • The rapid nature of rapid prototyping fits neatly with agile software development, where it’s impractical to wait several days to a week to modify a prototype.
  • Most rapid prototyping solutions can provide a surprisingly lifelike presentation with little or no coding or data.
  • Rapid prototyping gets everyone—users, sponsors, designers, developers, and testers—on the same page regarding requirements and expectations. There are no unwelcome surprises at delivery.

That last point bears some emphasis: Too often in software projects, how the developers interpret a given requirement is not at all what the users meant by it. When the users and developers can experience the interpretation visually, before any code is actually written, many of these issues can be avoided.

 

We sat down with our Creative Director to talk about the importance of Rapid Prototyping.

Have a listen!

Rapid Prototyping's Benefits

User interface prototyping can have profound benefits in achieving investor, executive, user, and development team alignment with, and endorsement of, a digital product development project:

 

Product Development

Prototyping goes a long way in developing consensus and aligning vision among development teams and the intended users:

  • Stakeholders and end users can see in advance the line of thought developers and designers are following. They can confirm or revise this thinking before anything is actually built. his helps to expedite development and avoid costly and unnecessary rework.
  • Prototyping helps the development team understand requirements that may have been unclear or incompletely documented.
  • Prototyping can also help all stakeholders understand the limitations of the system, whether those limits are technical (can’t be done in the current technological environment) or financial (can’t be done in the time or budget allocated the project).

 

Funding and Budget

Rapid prototyping also provides a way of gaining support for financial and budgetary perspective:

  • Startups - For start-up businesses seeking investment funds, rapid prototyping provides investors a mockup of the application functionality while illustrating the business value and the user experience. With a clearer understanding of the digital product’s operation and value, investor risk can be mitigated and the shared vision for the project can be created.

    This can have a significant influence on attaining investment endorsement and the release of funds to begin the development process.
  • Growth investments - In a similar fashion, rapid prototyping can go a long way to illustrate the planned expansion of an existing digital product. Using rapid prototyping, organizations can gain support for product expansion by demonstrating functionality that supports/justifies add-on investments.
  • Budget approval – Like the startup or continued investment scenarios above, rapid prototyping is a cost-effective way to gain budgetary approval in well-established organizations.  Prototyping can quickly demonstrate improved user experiences as well as new or enhanced business value that support a business case model which helps in gaining the approval of a corresponding project budget.

Prototyping Tool Requirements

If you search Google (or Bing, or whatever) for “rapid prototyping tools,” you will find the available options cover a broad range of features, capabilities, support, and price points. There are so many options! How do you choose? 

Here are the first things to consider:

  • Ease of use: How easy is it to learn the tool? In particular, can non-developers become proficient in a reasonable time? Unless you have a very small team in which everyone takes on multiple roles, chances are good your developers are not going to be the ones designing the UI. (This is, in fact, the preferred approach.)

    The UI designers are going to be UX specialists, business analysts, graphic designers, tech writers, or other non-developers. For the benefit of these users, the prototyping system should rely more on drag-and-drop functionality and less on code.
  • Flexibility: Is the application you’re building going to be available on multiple platforms, such as Windows, Mac, Android, or iOS? Will it be a pure web app, or a progressive web app?
    If you answered “yes” more than once, then your prototyping tool should be able to simulate the user experience for at least the platforms you expect to support. And if you can easily switch the simulated platform from one to another, rather than having to build a separate prototype for each one, all the better.
  • Quality of simulations: How realistic are the simulations? In most cases they don’t need to be perfect, but during the presentation, you shouldn’t have to frequently say, “Pretend that X happened when you clicked this button.”
  • Collaboration: Does the tool limit you to one user working on a project in isolation, or can multiple stakeholders collaborate in real time (or near-real time)? 
  • Ease of updating a prototype: Is it easy to modify the prototype during a demo? If not, it can’t really call itself a “rapid” prototyping tool.
  • Scalability: Will it grow as your needs grow, your projects become more complex, or your team expands and acquires new skills?
  • Support: What support options are available? Rapid prototyping tools rarely fall into the category of “mission-critical” software, so don’t expect 24/7 phone support, but something more than email-only could be a nice benefit. Again, it depends on your needs.
  • Cost: Free is not necessarily the best option, unless you only need something for one project and don’t mind the system’s limitations. However, you don’t want to overpay either, by buying something that’s much fancier than you need.

 

pair programming at andplus

If you are literally starting from nothing and don’t have a clear idea of what your future needs will be, AndPlus recommends this three-step approach:

  1. Find a free or inexpensive rapid prototyping tool and use it for one or two small projects. Document what you like and don’t like, what features you wish it had, and which features are useless to you.
  2. When you’re ready, “graduate” to something more capable as your skills increase and your needs are better understood.
  3. If you aren’t already a user interface designer, find designers to work with (within your team or your professional community) to critique and optimize your designs.

Prototyping Software Tools

Choosing a tool can seem daunting, but the key is looking at the competitive landscape and making an educated decision. Don't forget, there's lots of free trials out there! Keeping everything in mind, here are some of the most popular rapid prototyping tools on the market:

  • Adobe Experience Design (XD): This enterprise-level offering from Adobe sports a comprehensive suite of drawing, wireframing, and interactivity tools. Prototypes can be generated for all platforms. Graphic designers will like it because it integrates with Adobe Illustrator and Photoshop. Pricing is compelling, ranging from free to a few dollars per month, depending on the licensing and support.
  • Basalmiq: Easy to learn for designers new to rapid prototyping, Basalmiq produces prototypes on the low-fidelity end of the spectrum—they resemble drawings more than actual interfaces—and the interactivity is limited. It’s a great tool for collaborating on initial ideas; think whiteboarding with some interactive features.
  • Figma: Figma is a relatively new entrant in the crowded rapid prototyping field. Its primary strength is its support for collaboration. Stakeholders can design, critique, and update prototypes in real-time, with an easy switch between design and prototype mode. Figma is rapidly gaining adherents in the UI design community.
  • InVision: InVision is among the most popular prototyping tools available, and for good reason: It’s not only a features-rich prototyping tool, but it also includes workflow functionality for organizations that tightly control design, testing, review, and approval of interface features.
    On top of all that, it has a range of affordable price points. It enables users to make changes on the fly during demonstrations. The downside? It supports prototyping only for mobile and web applications.
  • JustInMind: Another offering limited to mobile and web prototypes, JustInMind has powerful cross-platform prototyping capabilities, enabling users to switch among screen sizes and resolutions with ease. Among its many strengths is the availability of a wide range of tutorials, from beginner- to expert-level learning.
  • Origami: This offering from Facebook is limited to mobile app prototyping. It lacks many of the collaboration, review, and commenting tools of its more-capable counterparts. However, it’s easy to learn, it’s free, and it is well-suited for individuals or small teams.

 

While there's no shortage of tools available to assist in the prototyping process, at AndPlus  we also like UXPin, Marvel, Adobe Experience Design (XD) and Axure RP. That said, don't feel reliant upon any single tool and consider the option of using a UX design tool in conjunction with a well-constructed "paper" document (actually PDF) to covey information that the tool may not address.

The Role of Rapid Application Development Platforms

Recent years have seen the emergence of Rapid Application Development (RAD) platforms. These low- or no-code development platforms enable anyone, regardless of coding ability or experience, to design and deploy working software applications. Examples include Microsoft PowerApps, Google App Maker, and Salesforce App Cloud.

 

sketching an application with paper and markersThe advantage of RAD platforms is they enable “citizen developers” to build real, functioning apps, largely by dragging and dropping UI components to the interface and linking each one to a standard function. However, these systems have several disadvantages:

  • RAD platforms can encourage people to bypass traditional quality checks, such as usability testing, QA testing, and security testing. This sometimes results in poorly thought-out, buggy software vulnerable to hackers.
  • Although user interfaces are easy to build with RAD platforms, connecting them to databases and other external resources is often cumbersome. Any functionality outside the set of provided functions requires some degree of coding.

Because of these shortcomings, relying on RAD platforms to build robust enterprise software isn’t the best approach. But the strengths of RAD platforms lend themselves quite well to rapid prototyping:

  • Because the apps produced by RAD platforms are actual, functioning apps with real data and logic behind them, these “prototypes” can be even more realistic than their rapid-prototyping counterparts.
  • For the most part, no developer expertise is needed.
  • End users can design application UIs themselves then turn them over to UX and development resources for refinement.

Therefore, when evaluating rapid prototyping tools, it can be worthwhile to consider various RAD platforms as well.

Rapid Prototyping Best Practices

Many software shops implement a four-step rapid prototyping development process:

  • Brainstorming – Starting from the documented requirements and user stories, a brainstorming session is held to sketch the basic interface design.
  • Prototyping – The sketched-out design is implemented using one of the many rapid prototyping software tools available.
  • Evaluation – The prototype is presented to the stakeholders, who are asked to provide feedback. Simple changes can be made during the evaluation session to clarify the requirements and expectations as well as find the design the users like best.
  • Improvement – If the design is not even close to supporting the users’ requirements, a re-design may be needed. In this case, the prototype is updated and presented again for evaluation.

In this process, the following best practices should be observed:

  • Start with good requirements – The business analyst, product owner, or other resource responsible for gathering and documenting the system requirements should be as thorough and detailed as possible. This reduces ambiguities and guesswork by the developers and designers when drafting the prototype.
  • Don’t spend too much time on any step – The prototype has two main purposes: validate the development team’s thinking with user feedback and provide a guide for developing the actual application. The prototype doesn’t need to be perfect; just good enough to accomplish these goals.
  • Provide just enough data and logic to demonstrate the prototype – Having some data and business logic behind the prototype can make it more realistic, thereby eliciting better feedback. But you don’t need the whole production database. Again, the idea is it’s a simulation for evaluation.
  • Emphasize function over form – The prototype should demonstrate the user journeys through the software and should be evaluated on that basis. If users start nitpicking the color scheme or button size and placement, remind them there will be plenty of time later to make it “pretty.”
  • Make it fun – User involvement in the development project is one of the best ways to realize a successful implementation. Make the prototype evaluation session an event the users and other stakeholders look forward to. (Bringing donuts to the session works well…) You’ll get more engagement and better feedback if the users feel they’re a part of the team and important to the process.

If you’re just starting out with rapid prototyping, it may take a few cycles to become comfortable, as a team, with the process. A “lessons learned” session after each project can refine the process and make it more valuable for all participants.

The Future of Rapid Prototyping

What does the future of rapid prototyping hold?

 

There are currently dozens of options from which to choose, and they won’t all be successful. The next few years should see designers and developers coalescing around a handful of popular titles, with some niche systems holding their own for certain specialized-use cases.

 

Despite the apparent trend toward tools that support only web and mobile apps, the market for more traditional Windows and MacOS applications is still strong. Prototyping tools that support these platforms may have an advantage over those that don’t, especially in full-service software shops.

 

In any case, most of the popular systems will continue to evolve and add features that make them both more powerful and easier to use. Look for more collaboration capabilities, tighter integration with both project management and communication tools (such as Slack, Trello, and Jira) and integrated development environments (such as Microsoft Visual Studio). All these advancements will make the tools more collaborative for more stakeholders and will make rapid prototyping ever more, well…rapid.

 

Even with all these advancements in rapid prototyping tools, there’s a catch: Simply owning a good tool won’t make your team more effective. Teams have to grow accustomed to its strengths and weaknesses then develop strong work practices to take advantage of them. This can take time; months, or even years.

 

For organizations that can’t wait that long, we’re here. AndPlus and full-service development shops like AndPlus, have many years of experience with rapid prototyping tools and we know how to get the most value from them. We also have robust design and development practices to optimize the use of these tools.  

andplus-conference-small

For more information about how AndPlus uses rapid prototyping to create excellent user experiences, contact AndPlus today using the "Get In Touch" form below.

 

 

AndPlus And Launching a Product Fast

At AndPlus, we create digital strategies and products that create or improve experiences, processes, and products. We've always put emphasis on launching these products fast, and iterating them quickly. The MVP method has long been a pillar in the AndPlus' process. 

 

For more than a decade, our teams of builders, innovators, engineers, and designers have delivered digital products that work the boundaries of mobile, web, IoT, firmware, and advanced technologies including data warehousing, machine learning, AI, and big data. That’s why so many companies rely on AndPlus to transform their digital product concept into a reality.

 

Digital transformation often begins with the development of a product specification and the rapid creation of a product prototype. In combination, these initial steps mitigate development risks by aligning business goals, product functionality, and desired user experiences.

Need a quick crash-course in the 'MVP' methodology?

 

A Minimum Viable Product (MVP) has only those features needed to validate its continued development. Its primary goal is to obtain this insight at a lower cost than that needed to develop a product with more features. 

 

Feature Prioritization

Our process begins by identifying the primary goal that will address both our client's business goals and the end user's goals. We select the methods that the MVP will use to accomplish these goals. Our design team then defines the minimum scope of work and use this list of features to map the ideal user journey.

 

Early product prototypes are often developed at this stage in order to illustrate concepts and ensure that business objectives and user experiences are aligned and optimized. 

 

Development

Once the user journey is mapped, the code starts flowing. Early prototypes/wireframes are brought to life by our engineering team. We use an Agile Scrum process that is custom tailored to our industry. And that's the kicker. We don't just utilize this same Agile framework straight from the textbook, we optimize the development process based upon more than a decade of development experience gained from hundreds of digital development projects. 

 

Output

The fun part! Our sprints run in 2-week increments. You get actual working builds of your product every two weeks. These builds are tested, and iterated upon as the project moves forward. We pride ourselves on iterating these builds to perfection by launch day.

 

Our deep expertise and custom Agile development process enable AndPlus to iterate quickly, provide transparency, and deliver on time and on budget — helping our clients get to market faster.

 
Download our 100 Day MVP eBook
 

a pair of glasses on AndPlus MVP eBook

See more resources

andplus custom mobile, web and iot applications

A quick hello

Who is AndPlus

AndPlus is a digital transformation agency that applies technologies to create or improve experiences, processes, and products. For more than a decade, our teams of builders, innovators, engineers, and designers have worked the boundaries of mobile, web, IoT, firmware, and advanced technologies including data warehouse, machine learning, AI, and big data.

Put simply, we’re here to guide and assist your organization in its digital transformation journey by delivering the best strategies, expertise, processes, and technology.

Give us a call and let’s get started.

 

LET'S TALK

Get in touch

LET’S BUILD SOMETHING AWESOME. TOGETHER.