# Software design and prototyping: why is it important for your project? | C.S.S.

We created a prototype while working on this article about prototypes, so when we proceed to the writing itself we’d have a lot less mistakes. This is the meaning of the whole thing! The design and prototyping stage, that we will talk about further, is a part of Custom Software Solution processes. And to show you what qualitative change prototyping can make to the full-fledged project (and its estimation), we have asked our experts, Business Analyst and Project Manager, to help us with highlights of this stage.

So, what is the deal about prototyping and design in software development? Firstly, let us show you the terms we will be operating in this article:

Now you can proceed further, and finally start learning about how we at MassMedia Group handle the design and prototyping process, and what you can expect from it.

What is a prototype

As we’ve said above, the prototype is a visualization of all functional components of the software. It may not be detailed at all, or, on contrary, detailed so much that later UI | UX design can be simply added to it. Its main goal is to approve all basic elements of the design structure and basic app functionality, so on the development stage, you wouldn't have to waste your time on the approval. The prototype, whatever it is, helps synchronize the end product’s image that both the customer and the developers have.

Usually, any prototype would be built without colors and a special, decorated layout, because they are created for outlining the functionality an app would have, and a position of various software elements. Nonetheless, sometimes the exceptions are made if the customers require so. Hence, it is not an end UI | UX design, and even if you have a colorful interactive prototype the software may still look a little different from it. This is why prototypes are usually created in soft, grey-ish colors; this way it won’t distract the customer from the prototype's main goal. And, as you know, the main goal is to approve functional elements and their layout on the page.

For example, you can take a peek at one of our prototypes.

The prototype is using simple fonts and outlines where and which modules are located, as well as how much space they take on the page.

The creation of a prototype may take from a few hours up to several days depending on what you’re aiming for and how detailed you want your prototype to be.

Why do you need a prototype:

• to understand what functions are necessary to include in a minimum viable product (MVP) or the software's first version;
• to lay out the future functional modules place on the page;
• to assess the application’s usability;
• to visualize an idea; build the first impression of the software product's concept;
• to have an option for making corrections and finalize the concept with minimum expenses;
• to accurately estimate time and financial resources for the project development;
• to understand the perspectives for further software evolution.

There are different types of things people usually call a “prototype”, and which one to use totally depends on your business needs and goals. You can read below about the different prototypes you can choose from according to what is best for your business specifically.

Sketch, mockup, wireframe, prototype: what is the difference?

You can choose different types of what people call a prototype based on how big and/or complex your project is, how much money or time you have, and other capabilities your business has. The main difference lies in what the prototype can do: ones are simply a sketch and others are “live” and functional, meaning you can click on buttons, so you’ll know how software functionality would work in the future.

There are such types of prototypes as:

Sketch - just a picture on paper drawn by hand, which allows you to roughly estimate where which button and module are located. This can also be called rapid prototyping, as it takes only a few minutes to create it.

Why do you need it: sketch-prototype helps to quickly visualize an idea, allowing the designer and the client to align the main goals they have towards the software product.

Wireframe - a layout of how the end-product will look like without the detailed design. This is a static prototype, so it needs a detailed description of the functional elements. That is, our prototype at the beginning of this article can be considered a wireframe.

Why do you need it: it allows to define where and what content will be on the page; to improve and detail the SRS creation.

Mockup - visualization of the future application’s UI design, which includes designing of functional modules, blocks, and buttons. Advanced mockups are interactive, so you can click on buttons and see how they react to users' interactions with them.

Why do you need it: it allows you to think over the visual vector of the project growth; to create a style that will adhere to the development.

Full-fledged prototype - a clickable prototype is only the front-end part of the project. All buttons and functions in this prototype are fully clickable as it has a front-end part of the code written, so it will take more time to create it. However, since it doesn't have the back-end part, you can't perform any actions on it. You will be able to assess exactly how features will work in the finished software, though, and define all the details before you create a full-fledged product.

Why do you need it: it allows you to determine the location of each module on the page and coordinate their functionality; it helps to write SRS better than wireframe.

Each of those prototypes refers to your goals and resource capabilities. For example, a rapid sketch will help you simply check out the primary functionality and interface of your application. An advanced, clickable prototype will allow you to get an approximate view of the end-product and demonstrate it to the investor. This will be especially useful for startups, as you can pause further project development after the prototype is created. This way you can raise enough funding and continue the work later, without spending a huge amount of money on development right from the start.

The Design and Prototyping stage in MassMedia Group

The Design and Prototyping stage is especially important for us as a company that creates most of our projects from scratch. As soon as we meet our new client, the Discovery stage begins. That allows us to gather requirements and outline the first version of a future prototype.

Our experts start working on the product's prototype when the requirements are more or less clear. All the information we collected on the previous stage helps us build a more smooth workflow and quality design and prototyping service.

Our company has a business-oriented approach to software development, so it is important for us to understand our client’s business and its specifics. For this, we analyze the market and competitors, check the materials our customers send us, and based on this we find the optimal solutions for a prototype and software.

In each of our decisions, both our customer’s business and their client’s behavior patterns have a drastic impact. Psychology affects people’s interests and such, so when we know why we implement something, we automatically do it better. This allows you (and your technical partner) to be sure that everything is in its place in your software product. And, who would’ve guessed, that this is the best thing a prototype could help you with?

It allows you to visualize and evaluate each function, hence helps you with the achievement of your bright noble goals.

We also analyze the latest trends and news about usability. Our business analysts do their best to ensure that the prototype we create fully reflects the idea of our client. Thus, thanks to the quality prototype’s approval with the customer, we are able to achieve the main goals of its creation:

identify difficulties and shortcomings in the design before working with the code. This allows our clients to save money because fixing a button or module at the Prototyping stage is much faster and does not need a lot of people to work on it;

make sure that our team and the client understand each other correctly. Communication is especially important in large project development. The prototype allows not only to split a large workflow into several smaller tasks but also to make sure that we understand the client's wishes correctly, and are on the same page.

Briefly about what happens on the Design and Prototyping stage

We start the prototype creation and after this we discuss it with you to form, analyse, and approve the requirements. It is a common task for both business analysts, who help evaluate the real relevance of each detail, and the designer, who is responsible for visualization. A business analyst can arrange the additional research, communicate with the customer, and our experts, to do everything for creating the most quality prototype that reflects on the customer's idea.

After the prototype is created it has to be tested and approved by the customer. It doesn’t matter for us how many changes the client wants to make in the prototype; it can be perfected up until the client is fully satisfied with the result.

And finally, when everything is tested and approved, each module or block in the prototype finds its place in the SRS which is also approved by our QAs, and the client.

What is SRS, you ask? What is WBS, you ask a bit later? All right, all right, we will satisfy your curiosity.

• software requirement specification (SRS) - a detailed description of the software. All functions, systems, components interaction, and other capabilities of the software product are described here;
• work breakdown structure (WBS) - SRS-based branching of the workflow into subtasks. To understand better how the two documents work in combination, imagine this: the SRS has a function and the WBS has everything you need to implement this function;

Based on this you will get an approximate estimate of the work. We create this document for each of our clients, even if there is a possibility that they will need to pause further development at the moment. This is done for you to feel more safe and comfortable; if you feel like the development will be biting more than you can chew at the moment, you have a possibility to come back to it later. When you have presented your prototype to the investors and achieved their support.

By the way, aren't you curious yet what the design has to do with all this? So far we’ve talked only about the prototyping that happens on the Design and Prototyping stage.

You see, the thing is that we don’t develop a UI | UX design on this stage but only create a base for this. Basically, we create a logic the application and its functionality will run on.

Then, roughly speaking, this stage will lay the foundation for the upcoming design development.

Usually, we work on our prototypes in Figma and make them more or less “live” and clickable. So after that, the only thing needed is to create a UI | UX design for an already created “skeleton” of it. But sometimes we work it the other way around, creating only wireframe or mockup that will be a base for the UI | UX design, and allows only to visualize the idea.

But it doesn’t matter how we do it. What matters is that it helps us make a lot fewer mistakes and avoid misunderstandings in the future stages.

Okay, let’s wrap this stage up. Finally, the results!

The Design and Prototyping stage results

So, to sum it up, you’ll have documentation and a prototype, which you can use in the future to get fundings or for whatever else you need. Documentation, as we’ve said above, includes the approximate estimate of the project, detailed SRS and WBS, and an estimation of what the UI | UX design should be.

Alongside, we can guarantee that the prototype we created will be unique and correspond to your ideas, business needs, and goals. The business-oriented approach is what defines the most important benefits of a prototype created in partnership with MassMedia Group:

• a unique prototype tailored to your needs;
• the possibility of further prototype’s development after we have created and approved it with you;
• business analysis of your requirements and market segment, which allows you to make a competitive application after prototyping;
• roadmap of the project and the first milestone, as well as the presentation of the prototype; which will be useful during the product development;
• thorough preparation of documentation and requirements for the finished product design, which takes place at the next stage of work on the software.

Now you know how this great part of work will end. However, what awaits you on your way towards the results is no less intriguing.

The rules for successful prototyping: tips from MassMedia Group’s experts

First: don’t think that prototype is a version of UI | UX design. A prototype may differ from a UI | UX design completely (or not differ at all, if you want a super-extra-detailed prototype), and it’s perfectly fine. It is built for visualization, don’t forget about that. Visualization helps to simplify the perception of a future project, so the design that will come next may have new details and features.

Oksana

“I had a client once, for whom I created a prototype. At the first call, the client said they didn't like the fonts and colors I used. They asked me to make the prototype more vivid and expressive, use interesting fonts and corporate colors because the wireframe I created was gray. It was, in general, as simple as anything can be. I'd like to warn everyone who reads our blog not to make the same mistake. A prototype is a design framework but by no means the design itself. We can make the design as similar to the prototype as possible in the future but it is not a necessity. Your main task is to evaluate how the blocks are located, how future software's page layout looks like. This will be the primary base for the development of a convenient design. So, you don't need to stress, fonts and pictures will change over time, but the functionality must be approved at this stage.” - UI|UX Designer at MassMedia Group

Second important thing is to pay attention to the relevance of blocks and functions. When approving a function, give yourself an exact answer to the question "why?" you need this or that feature in your software. We have an interesting story about this from our business analyst, which tells us how it can negatively affect your project.

Another important tip is to study in detail the prototype, estimates, and documentation. Do it thoughtfully, and be prepared that you will have to make tough decisions on which functions should be implemented in the project at once, and which can wait until the future growth of your business and capital. This is important because it allows you to think exactly what part of the project is the most critical. Look at the prototype with a sharp eye, as it will be the basis for the further workflow of the development team. Anything you approve now will become a part of your software product later. While a technical partner can help you with an in-depth analysis of your market segment and competitors, a key understanding of your business still remains in your hands.

Be prepared to choose the vital things and disregard something less important. Be guided by the triggers and the best solutions; this is the way to a successful technical solution.

In addition, it is also important to look through the SRS you get with the prototype. Don't let any details slip from you because this will set the algorithm for your technical partner's actions. What is written here will be done, and what is not - won't, and a close look at this document will help to avoid unnecessary expenses. If right now you already feel that something shouldn't be included in your product, and something desperately missing, say it. Studying SRS is probably the best way to save money when developing a software product.

Keep in mind that any changes made to the product after the prototype is finished will take more time (and finances).

***

So, this is the prototyping that helps you to better understand the real needs of your business. Thus, you’ll find what you need to attract more clients! Prototype is not only a draft, it is a solution that will help you build an uninterrupted workflow in the future.

But the biggest part of all magic happens next. In the midnight, in the pitch-black room, that lights only with a cold stream of computers’ glow, MassMedia Group’s developers begin to make miracles, drinking the darkest coffee from their darkest cups. They make miracles of the top-notch software creation.

Software that is destined to become a success!