Low-Res Prototyping Tools (Idea)

“While a great design might make some users happy, a great functionality will make your business happy.”

  • Björn Schmidtke

The first thing you should start with is getting your functionality down on a piece of paper or powerpoint presentation. Before you even care about how your design looks like, you should get your functionality right. For every product or venture you’re designing, you should be as effective and quick as possible. You will be way quicker if you start to build your functionality out on paper and iterate a couple of times before you worry about a good design. 

Before we jump into low-res prototyping, let us quickly specify the difference between user journeys and paper/powerpoint prototypes. While you do not worry about the explicit didactics and structure of your screens when creating user journeys, you definitely want to consider all of those when building a low-res prototype. The idea is to create a version of your product which allows you to implement a nice design on top of it, which brings it close to a functional prototype. Below are a couple of paper prototypes which, when you compare them with the picture of the user journey in chapter 1, are clearly different in their depth of structure and detail. They are also more organised and designed more beautifully.

Source:https://mir-s3-cdn-cf.behance.net/project_modules/1400/02dfaa43064215.57e20b3f43e2f.jpg
Source:https://i.pinimg.com/originals/ff/34/c3/ff34c3814c84fffc7262071dc3ce3ac4.jpg

A Glimpse Into Information Architecture & UI

Important lessons you should know before reading this course

Every prototype should have a “Research Question”, i.e. what your experiment is about. If you are yet unsure about the philosophy of prototyping, make sure to read into our main challenge on prototyping next. Ask yourself: What is the one key insight I’d like to gain by building a prototype and document your assumptions prior to building it!

Should you build one prototype at a time or many simultaneously?

This depends on the outcome of your ideation and synthesis. Is the user’s journey short? Is it possible to build your prototype with only a few screens? If you can answer both questions with a ‘hell yes’, then you’ve got your answer: Build only one prototype. Is there a long, potentially intricate user journey? Once you’ve broken down your solution to a bare minimum, are there still multiple areas your solution has to tackle simultaneously? If your answer to both of those questions is ‘yes’, your best way to move forward will be to decompose the intricate problem you are solving into a set of sub-problems which can be tested in isolation. For each sub-problem, there will be a set of assumptions that need to be true for your product to work. Test them all by building one prototype for each subset. Moreover, if you have two areas of questions, e.g. one area focussing on early steps in your app such as the signup and one area focusing on later stages such as reporting, there is no need to build a prototype including all the steps in between. Instead, build two separate prototypes.

Before building your prototype or product, there is a secret step which will drastically improve the smoothness of your process. You first want to build the “architecture” of your prototype. In your situation – being an entrepreneur who builds an early-stage product – you won’t need many sophisticated tools. The secret will be to do the one thing that will make sure you will not get stuck: User Journeys! This is the “preparation” step for all following chapters. It’s as crucial as preparing your backpack before heading into the wild. 

Hint: As part of this course, you might want to skip lesson 2 and 3 of this course, but you should never skip the first lesson: You will always need to build some form of information architecture (e.g. a user journey) before building your prototype. Now, when would it make sense to skip chapter 2 and 3? 

Lesson 2 is about testing your idea using paper (‘low-res prototyping’). It is a low-fi form of lesson 3 which is about testing your idea and design using prototyping tools (‘high-res prototyping’). Lesson 4 is about building a no-code version of your app (‘prototyping functional products). The key task when deciding on as to whether you build a low/high res prototype first or whether you start to directly build a no-code product is managing the trade-off between design flexibility and functionality. What a complicated explanation. Let us elaborate further

  1. Mock-Up prototypes (as in lesson 2 and 3) involve tools allowing you to design literally anything. The outcome will be some sort of drawing, powerpoint presentation or sophisticated, clickable product mock-up. However, the outcome will never be truly ‘usable’ by a prospective customer. All these tools help you design a silhouette of your product, but not the real product. For example, you might need a video-call or another complicated functionality. You will always be able to create some sort of paper prototype which resembles the general idea. But you will not always be able to build an actual video call functionality by using a no-code prototyping tool. Lessons 2 and 3 will be useful to you if your main assumptions evolve around the design of your product. You will need maximum flexibility in your design to validate and test those assumptions. This is when you will go with reading those lessons.
  2. No-code product tools, as introduced in lesson 4 of this course, are great for building, guess what, functional prototypes.Take for example an input field. A high res prototyping tool such as Figma cannot create a mockup which allows users to click into an input field such as a search bar, open their keyboard and type something. However, a no-code product tool such as Glide or Bubble allows you to build such functionalities. You may store the answer, create logins, etc. as you please. If your main assumptions evolve around the functionality of your product, you want to jump directly to lesson 4 and build a functional product as your first prototype.

There is no golden rule and the availability of features is constantly evolving in both no-code and prototyping tools. You will have to decide on an individual basis. Furthermore, you should crosscheck the prototype(s) you intend to build with your research question / critical assumptions. Go through the elaborations (1) and (2) above and ask yourself which set of tools you will need to validate your assumptions in the most effective way. 

When Prototyping is Difficult: Beyond this Course

There are cases in which building a prototype that is close to the real product is inherently difficult. Examples usually include:

  • Anything including AI (when the main benefit of your product is based on the performance achieved through AI, but not its core functionality)
  • Rocketships and other flying (or not flying) hardware
  • The Internet of Things (more hardware)
  • Pharma Products, BioTech and DeepTech in general (which require more in-depth, structured research well over the capacity of EWOR).

In these cases, you might be able to create a prototype but you should consult (your) engineers as early as possible to explore what is technically possible and feasible in your current situation.

Application Task #3: Reflection

Use the tools you have learned in course 1 and 2 to reflect on the insights. Share the following key insights in the forum below:

  • Which KPIs have you used?
  • What have you learned from your KPIs?
  • Did you get in contact with a couple of your potential customers and, if so, what further insights did you gain from them?
  • Is there enough evidence that customers want your product? If so, how can you back this claim?

Please reflect here with your peers

[bbp-single-forum id=2764]

[bbp-single-forum id=3700]

Health

Managing your health is crucial to your success. In the last 6 years, I (Daniel) have never been sick. This boosted my productivity and fuelled my ability to deliver consistent results. As inconsistency is one of the biggest stymies to your company’s success, getting this part right is a big deal, even though you won’t find related courses at any university or in any prestigious educational program. You will be exposed to much stress as an entrepreneur and you should have your tactics for dealing with high amounts of stress right before they become necessary.

Primer

“You cannot manage other people, unless you manage yourself first” – Peter Drucker. Imagine a leader who comes late to every meeting, lacks motivation during meetings and calls entirely, and misses entire weeks of work because of their mental health situation. No person follows such a leader for long. Leading by example is crucial. And it requires leaders to manage themselves first before they can manage others. 

This course will be your toolkit for leading yourself through the steps of founding and growing a venture. As a leader, you will have to manage three core concepts before you manage others: your health, your energy and your time. After you have completed this course, you will have understood many philosophical and scientific concepts about these three areas and, more importantly, you will be able to apply them to your everyday life. Mastering those components yourself will also enable you to help your team be more healthy, focussed and effective.

Further literature – Knowing Yourself

All of the below focus more on knowing yourself, your strengths, weaknesses, and values. The following chapters in this course will focus entirely on health, energy, and time.

Javascript

Javascript is not the most crucial element to designing your first website. It will be crucial if you want to become a fully-fledged dynamic website developer, but such ambitions are beyond this course. For web development, you may want to understand the basics of Javascript, which are covered here. However, we encourage you to only watch this course if you want to build a dynamic element on your website which requires Javascript. Initially, you may want to leave this section out and come back once you encounter a specific Javascript related problem.

For now, it is only important that you understand the relation of Javascript to HTML. This video covers this area and explains how you can add javascript to your HTML. If you want to understand why Javascript is so important, this article offers a great summary. Basic use cases of Javascript include:

  • Include mobile device features, such as accessing camera and location data
  • Integrating alerts on your website
  • API integration

After you’ve understood the basics of Javascript, there are certain elements which are especially useful for your website building.

Resources

  • This video explains how to code Doodle Jump with Javascript in only 1.5 hours, if you are interested in developing games.
  • This tutorial explains how code progress bars or other semi-dynamic parts for your website using HTML, CSS and Javascript.
  • This Course is likely the best you’ll find on the web, if you want to go all in and do a complete course on the subject. However, keep in mind that this is not at all necessary for coding your own website. If you want to code platforms or apps, you might want to use tools such as Figma or Bubble, which we’ll cover in other Courses.

Advanced

You can also integrate interactive elements in your website. You do that with some more advanced tags. Here are some elements you might want to integrate into your website:

Bootstrap 4

Bootstrap is a toolkit to build websites. It was the de-facto standard for a while and is still the best way to get a professional looking website online quickly. It was originally created by Twitter and was made open-source. It is freely available here: getbootstrap.com. To learn about bootstrap, you can just read the documentation to get started or watch this free and interactive tutorial at scrimba.

The scrimba tutorial will show you individual parts of bootstrap. But how do you create a fully responsive website with it? Here is a video tutorial, where you create a full website from 0 in 1.5h. Here is a second amazing video that will also build a website with a slightly different style.

Themes In Bootstrap

Bootstrap is great but really has one disadvantage: All websites created with bootstrap look somewhat the same. This is why you will want to use a theme together with bootstrap. There are basic themes that you can get for free and there are premium themes that you will have to pay a few dollars for. 

There are basic themes. They normally change the colors and the font style of the normal bootstrap styles. The most common website to find free themes like this is bootswatch.com. Here is a quick tutorial on how to make use of the theme.

There are premium themes. A huge number of premium themes are available at different marketplaces. Here is one video showing a number of themes. The most important marketplaces are: Themeforest and the official getBootstrap Marketplace.

We recommend that you invest €10-50 for one of these themes and build a website using these tools. By now, you should be able to easily understand and change the HTML and CSS of those templates so that the website does what you want it to do. Things might still appear a bit cryptic initially, but by using developer tools and re-watching some of the videos, you’ll surely get the hang of it very quickly.

Hosting

One question remains: How do you actually get your website online – so that anyone from anywhere can access it via a link? While this used to be very complicated and expensive, now it is very cheap (in most cases even free) and simple. Here is a video showing you the complete process of how to get your website online within 3 minutes using Netlify. Yes, we do recommend you use Netlify. They’re the best currently.