Page tree
Skip to end of metadata
Go to start of metadata

Types

After defining the purpose and setting the attributes of your prototype, you are ready to pick the right prototyping tool! In case of a software prototype, we usually distinguish between user interface (UI) prototypes and functional prototypes. UI prototypes help you to visualize your software, mobile app or website (right from the beginning!). Examples for UI prototypes are:

  • Scribbles
  • Wireframes
  • Mockups
  • Click dummies

Functional prototypes help you to get answers to open questions of the technical feasibility or performance of certain software components. Examples for functional prototypes are:

  • Algorithms
  • Software interfaces (APIs)
  • Data transfers
  • Database performance
  • Software technologies (e.g. image recognition)

Need support?

Markus Sorg

We build prototypes in a couple of hours - even during workshop!
Contact us: support@orangehills.com.


Instructions for Coaches

  1. It's not very likely that UI prototyping will happen during actual workshops at the level of a realization in tools like Sketch or Ionic. We usually use pen & paper in these sessions to create drafts that later can be turned into a more advanced prototype with a higher fidelity using support of a tool. It is not important to push teams to use a tool right from the beginning (other than pen & paper) if they are not already familiar with the usage. To speed up the process, you can ask our prototyping engineers for support.
  2. As with any prototyping, be very clear with the team to identify why they are working on a specific prototype and essentially what they want to achieve with it. Prototyping efforts can easily grow into substantial amounts of time and as this is one of the most important resources in the team the expected value generated by using the prototype needs to be aligned upfront.
  3. Intensively challenge the team on the connected assumptions and hypotheses that the prototype should help to generate knowledge for. Getting closer to the Decide Workshop, teams tend to "brush up" their prototypes to hide a lack of information or unfinished validations behind seemingly ready-made product functions. Be aware that the worst thing a prototype can be used for during a business design sprint is to hide gaps that the team needs to address to get to better, more precise results.
  4. Don't let tool discussions over-rule content discussions. All a team needs to get e.g. the tough UI prototyping decisions done is pen & paper. The tools introduced here will help to make it all more lively and tangible but they will rather enhance the discussions with clients and stakeholder, not make or break them.

Q & A

  • I'm a little overwhelmed about all the possibilities I have. Which tool should I use? Don't focus too much on picking the "right" tool. Pick one you are comfortable with. Our prototyping engineers are familiar with many prototyping tools and the specific nature of Business Design processes. They can help you to build prototypes in a couple of hours - not days!
  • I am not sure, if I should prepare wireframes or mockups. Which one of the two is better? It's not about better or worse. It's about what you want to achieve. What is the purpose of your prototype? Do you want to get a common understanding of the problem? You can get away with scribbles on paper. Do you need to understand how users interact with your application? You will probably need mockups or even a click dummy to simulate your offering(s). 
  • Do I have to build a functional prototype? If your open questions and hypotheses are around the technical feasibility of your software, a functional prototype might be necessary.
  • Can I collect relevant data automatically when I am conducting my experiments with my software prototype? Yes! We highly recommend to do so! You can track relevant data in your software prototype (e.g. click dummy) and make it accessible in your Project Workspace on your dashboard. Our prototyping engineers can help you to setup the linkage between your prototype and your workspace.
  • Now I know how to build a prototype. But why do I need a prototype in the first place? Good question. We discuss it here.


Tools 

We have been using the following tools to design and build software prototypes in Business Design projects:

ToolComment
Pen & paperIn many cases the best tool to get started!  NO CODING
UIStencilsHaptic tools and templates to draw user interfaces for web or mobile applications  NO CODING

Entrepreneur’s
Wireframe Kit

Easy to use PowerPoint / Keynote template to design wireframes and user flows  NO CODING
Keynotopia

UI templates for PowerPoint / Keynote  NO CODING

Axure RPPowerful software for creating interactive wireframes for Mac and PC  NO CODING
Adobe XDSimilar to Axure RP but fully integrated into the Adobe Creative Suite NO CODING
ProtoshareCloud service to create interactive click dummies and wireframes for web pages and mobile applications  NO CODING
BalsamiqSimilar to Protoshare, however, this software generates user interfaces in the scribble look  NO CODING
SketchSoftware for MacOS to build high fidelity prototypes for web and mobile  NO CODING
BootstrapIntuitive front-end framework for web development
Semantic UISimilar to Bootstrap but with more ready-to-use UI elements
gohugo.ioGeneric framework for developing and statically rendering HTML websites
Proto.ioPrototyping software for Android and Apple iOS
Clutch.ioA/B testing software for mobile applications (iOS and Android)
FuseUX tool for App Designer with possibilities for real-time updates. Cool!
Framers.jsSoftware prototyping tool for a variety of devices (mobile or desktop)
Paper.jsSoftware library for vector graphics in the browser
Raphael.jsSimilar to Paper.js
OpenCVGraphics library for different platforms. We love it!
IonicFramework for the development of cross-platform mobile apps with HTML, CSS and JavaScript
LaravelPHP-Framewok to quickly develop web-based server systems
Ruby on RailsRuby-Framewok to quickly develop web-based server systems
Node.jsEvent-driven I/O server to quickly develop sophisticated server systems (JavaScript)
and much moreThis list is far from complete and is just a short summary with a focus on UI prototypes and mobile / web applications. Make up your own mind and use a tool which fits your need. 


Examples

Pen & paper 

Especially for UI prototypes, pen & paper is in many cases the best tool to get started. Pads with a device frame help you to consider space constraints. Due to its low fidelity, pen & paper prototypes are a great way to force your team and stakeholders to focus on core elements rather than on choosing the right color or design elements. And the best part: You can easily change and adapt them - even during discussions.

UI Sketching

Sketch 

If you need high fidelity prototypes, e.g. mockups, Sketch is a great tool to work on more detailed UI concepts. Downloadable UI-Kits can help you to start right away with designing your web applications and mobile apps. High fidelity prototypes are best suited for detailed discussions and feedback about user experience and look & feel. However, if you are looking for more interactive UI prototypes, Sketch is not the right tool for you!

Sketch UI Prototype

Ionic 

With Ionic you are able to build interactive high fidelity prototypes of mobile apps. Ionic ships with a lot of UI components and even with an online drag-&-drop tool to build UIs without programming a single line of code. If you need more advanced  interactive components (click dummies), you should be familiar with web technologies (HTML, CSS and JavaScript). However, you don't need to learn native platform languages like Swift (iOS) or Java (Android).

Ionic Clickdummy

  • No labels