user experience & design

A Beginner’s Guide to Prototyping

February 16th, 2017

Whether you are developing a website or mobile application, one of the most crucial steps before the full development process is prototyping. A prototype is an interactive representation of a website or mobile app, this can be a simple sketch, to a semi-functional application. The main reason people use a prototype is to test it before launching to their target market.

One of the best and most effective ways to get started with any project is building a prototype. A prototype allows the developer to test the client’s abstract idea and turn it into something physical. Additionally, a prototype brings to light any problems and also allows for the discovery of ways to improve upon the app or site to make it that much better.

Things to keep in mind for your prototype

Focus on the core features

The purpose of a prototype is to create a physical likeness to the desired look of the final project, without necessarily all the details. Having an emphasis on the main features and primary objectives of the app or website will give the best general sense of what the end result will look like.

For example, if someone were to make an app like SnapChat, one of the features that would be important to prototype would be the use of the filters, to make sure it can detect a user’s face and react to facial gestures.

Stress the importance of prototyping

There are a variety of different ways that a prototype can be defined. UXPin defines a prototype as being almost anything, from a “series of sketches representing a simple screen to to a pixel-perfect prelaunch interface.”

Deciding on what prototype to create is very much dependent on which stage the particular project is in. For example, early stages may only require those simplistic sketches to uncover problems and improvements. Although as a UX design company moves through the stages, each prototype should increase in complexity to closer resemble the ideal end project.

Regardless, the emphasis on continually improving upon and creating a physical representation should be a emphasis during the design process. Without these prototyping examples, it is difficult to really uncover the issues and areas for improvements for any project.

Design with real content

Since prototyping can go beyond the a wireframe or mockup approach, it is important to portray with real content rather than random text. John Moore Williams goes a step further and argues that the design process should start with content and that design needs to optimize the content. Regardless if this argument is completely accurate, it does show the importance in keeping in mind that content is a critical component to prototyping.

The below images show the vast difference real content can make for the design of a extremely simplistic prototype. Content can include text, visuals, and videos


In order to find the areas of improvement and really flesh out problems, collaboration is key. Obtaining feedback both internally from the team and externally with the clients allows errors to have a greater chance of getting caught.

When the project is near complete is when it should be tested with real users. This will produce the most accurate results, and give real data from real users.

Test early and frequently

In general, testing a prototype is a fairly easy and low cost process. Testing early and often allows the team to catch any mistakes to ensure the next prototypes or stages of development are more improved than the last.

Why you should always build a prototype first

Saves money and time

Prototyping can save money and time by catching usability issues early on. If the project is launched, and your live users are giving you negative feedback on the design, you will have to re-design and re-code. On the other hand, if you test your design prototype prior to development, you can make changes without making changes to the code, resulting in saved time and money.

Makes the development process smoother

The entire process is typically a lot more seamless when the prototype is tested. When a design is tested, it means that less problems will occur in the development phase. The developer has better chance in getting the code perfected by working off of a detailed prototype.

Makes a better final project

A well thought out, researched, and tested project during all stages of development will produce a superior project than the ones not have skipped or put less effort on the importance to those initial steps. As shown in the graph below, as more users tested a prototype, a greater number of usability problems were found. Thus, it is critical to find these problems during the prototyping stage before it is finally launched.


Conclusion: Codal Stresses the Importance of Prototypes

Being a mobile app design company in Chicago, Codal fully understands and stresses the importance of prototyping in the design process. Specifically, Codal incorporates three separate stages of prototyping in our design process.

Those three stages include rapid prototyping in the research stage, low fidelity prototyping in the conceptual design stage and high fidelity prototyping in the detailed designed stage.

Regardless of the scope of the project, one of the most important steps before moving to full development of an application or website is prototyping.

If you are able to prototype while keeping in mind the main features, utilizing real content, collaborating with the team and testing often and early, your project has a higher chance of being successful.

Looking for a UX design agency in Chicago to help prototype and test your idea? Let’s talk!

Jenna Erickson


Jenna is the Marketing Manager at Codal, blogger, and technology + startup enthusiast. With a responsibility of Codal's marketing programs and brand management, she is always strategizing new ways to reach clients through content and inbound marketing tactics. In her free time, Jenna enjoys traveling, cooking and reading.


codal insights

The Slowest Industries to Adopt Advanced Technologies

user experience & design

The Rise of Company Culture