Building a prototype

Learning Path: React Architecture Fundamentals
React Architecture Fundamentals
July 12, 2020
Building RESTful Web Services with DropWizard
July 29, 2020

Website designer Creative planning application developer development draft sketch drawing template layout prototype framework wireframe design studio . User experience concept .

Building a Prototype

What we need first

In the process section we breezed over how to build a prototype in the larger scheme of bringing a product to market. But, building a prototype is such an important task to get the proper product to market, I want to spend a lot more time going through this process here.

And while we design our prototype, let’s do a quick case study of redesigning the keyboard for mobile devices. I personally get so frustrated with the lack of innovations with mobile keyboard applications so let’s see how we can push the envelope a bit on keyboards. 

When you get to the prototype stage you may or may not have an idea of what you’re looking for, but you need to have some ideas of what the feature wil or will not do before you get to a prototype, and this is what our product design people are trying as best as we can to get to before designing our product into a tool such as Adobe XD. 

You need to determine what are the features or list of functions your product will do before you get to the coveted digital or physical prototype. If you don’t have that, just grab a piece of paper and start writing down whatever comes to mind, including drawings.

So let’s take a look at a case study of redesigning the mobile keyboard. Frustrating things about most of the keyboards out there in the market:

  • The autocorrect features often select the wrong word
  • The swiping feature is often wrong in its suggestions
  • M key too close to backspace or return
  • Too many features on a small section

So how do we fix this? Before we do so let’s take a look at different types of prototypes.

Digital or Physical or Service or Workflow

Before we move let’s define a bit more what types of products or innovations you can prototype. A prototype or a new product can be;

  • Digital, therefore a website, software for desktop or mobile
  • Physical, anything we can touch such as the chair you’re sitting on
  • A service, therefore something that is provided to you as a service, a massage, your accounting, etc.
  • A workflow, this one is harder to comprehend but let me explain it through an example that is related to our MG4N project. When you, the entrepreneur, is looking into changing a system or injecting new ideas into a process that is already existing, you’re looking into changing or innovating the workflow or process of something existing. So you’re not necessarily providing a product in the end but implementing an improvement of sorts. Non-profit firms are often playing into this realm. For example if you’re looking into improving how and where plastics are being recycled to reduce plastic pollution worldwide you are innovating the workflow of this particular process. So prototyping this would look more like a flowchart and instituting new ideas along the process.

The paper prototype

When designing new ideas, it’s always important to start with real paper. I say real because the feeling of drawing your ideas down always wins over creating digital frames. You want to jot down your little ideas so it makes sense on paper first. 

For our keyboard prototype and while drawing, I asked the question, what if we don’t use a keyboard to type? What would be the input besides the voice…? Text input needs to be redefined for the next decade if we are to resolve this dependence on the QWERTY keyboard. Although it served its purpose, something else is needed for digital devices.


The above acronym stands for testing, gathering results, re-evaluate and re-design your product prototype again. In other words it’s a series of steps you need to accomplish as many times as it takes to get to a prototype that is ready for development inside your company. And this process is the safest way to test many assumptions without developing a costly final product that may completely fail once it reaches the market. I always say, more time in TRED less time in RED. Red meaning spending cash. Let’s take our keyboard example. 

I prototyped 3 quick ideas for the article using Adobe XD (along with using Sketch and/or Illustrator when need be), if I had this run through a series of tests and then come back I might be somewhere else and then keep pushing to get to the next level. That’s what the TRED  process is, quickly designing a few ideas, testing them, iterate again…so on so forth.


Building a prototype is always a dynamic process and is what really makes it interesting and exciting when you start tackling your own on a specific feature. In conclusion first make sure you jot down your ideas on paper; notes about the features, what it’ll look like, some design ideas and wireframes on paper. Then move on to the digital realm, or physical to put a prototype people can feel and touch and get a better understanding of what this new product or feature will be about. Test it with a real audience built from actual customers and new potential stakeholders so you get a glimpse, are we close or not, completely off target or the clients won’t understand how that works, etc. Then move back into the prototype and iterate the process until you get to something you’d really like and the user group found exciting.

[et_pb_wc_images product=”951″ _builder_version=”4.5.1″ _dynamic_attributes=”link_option_url” _module_preset=”default” link_option_url=”@ET-DC@eyJkeW5hbWljIjp0cnVlLCJjb250ZW50IjoicG9zdF9saW5rX3VybF9wcm9kdWN0Iiwic2V0dGluZ3MiOnsicG9zdF9pZCI6Ijk1MSJ9fQ==@”][/et_pb_wc_images]

Want to create your own startup?

In September, we’ll be releasing a brand new course sold directly on our site for any of you, new startup founders, to provide you with everything you need in one course to set up your own startup. Over the years I’ve tried, tested, failed and succeeded and I will provide you in this course with many of the best techniques to get your business started. A lot of the tools and techniques presented here I still use today within Algofields. And this is not a theoretical high level view course, you will really dig into the nuts and bolts of creating a startup with the perspective of having a product to launch too. 

While the course is still being produced, I’m offering a special pre-order price saving of almost 70% at $99 USD on the full price ($299) before it comes out in September. Take advantage of this special while it lasts!

Manny Henri
Manny Henri
Emmanuel Henri grew up in Chambly, a city in the tail of Quebec (Canada) near Montreal. He’s an established technologist with 25 years of experience in the world of programming and design, and also published 125 courses on several platforms such as Linkedin Learning, Pluralsight and O’reilly. Since his teens, he always had a knack for storytelling, especially monster-driven tales, and has compiled a boatload of Sci-Fi, Fantasy and horror ideas he’s thrilled to put into words. To keep his head sane and healthy, especially after his close call with cancer in 2020 (now in remission), he’s pledged his body to a strict diet and rigorous exercise plan. He’s currently working on his novel "Ashes" and editing “From the mist” and several short-stories, such as “The Agency”.
%d bloggers like this: