There is no dearth of prototyping tools and systems. Tools include everything from a sheet of paper all the way to a 3D printer (and more!). However, what needs to be understood at this stage is that the entrepreneur is here to solve a problem.
Solving the problem requires that the user whose problem is being solved, having to take certain steps. The prototype creation stage is here to help the final user take the steps to solve the problem by seeing how she uses the prototype and to then iterate to achieve the best possible result for the user.
Four key factors play an important role in the prototyping process. These 4 factors are method-agnostic and will have to be factored into the plans and actions of the entrepreneur and his team – no matter what.
- People : Products and services are ultimately going to be used by people – humans. Their psyche and ways of thinking and motivations need to be factored into the prototyping process.
- Objects : Most problems involve humans and objects. Those objects may be stating, moving, interactive or even a part of a larger system. The prototype is in itself an object and comes into contact with other objects – including other prototypes.
- Location : Entrepreneurs solve real world problems. They solve problems that appear in locations and environments. Whether it is a new product or a new service, these manifest in a location.
- Interactions : Problems are discovered during interactions between people, objects and locations. It is therefore important to factor in the form and content of interactions when designing solutions.
Sometimes, the entrepreneur may not be in a position to replicate the exact environment or may not be able to accurately set up interactions owing to constraints. The idea is to make these situations as close to the real world in which this solution will be used, as possible.
This step is a very critical milestone in the product development journey. It is this step that will help create a prototype. It marks the stage where the idea begins to take physical shape.
Why is prototyping so important?
Importance for the product/service utility
Till this stage, the product/service is merely an exercise on paper. It is no doubt, well thought through, but it has not yet come face to face with the reality of what is physically possible. Products and services exist in the real world. Designers and entrepreneurs need to ensure that this is where their products and services work as well. That’s where prototyping comes into the picture.
Importance for users involved (now and in the future)
Another point to be noted is that the ‘people’ involved in this process are still a small group. This group is by now, well acquainted with the product and the problem it is meant to solve. However they aren’t an exhaustive collection of people who will actually use the product/service to solve their problem. The entrepreneur has to cast his net wider. But more often than not, he is faced with a question of how he will explain the whole product/service again and again to people!
Importance for other stakeholders involved
Building out a product and then taking it to market is not only time consuming but also requires an adequate amount of cash and financial resources. That’s where investments and funding come in. Creating a prototype is a great way to explain the product and its features to prospective investors. Creating a prototype is the smart thing to do since not all investors will be technologically savvy enough to understand the nitty gritties of a long and detailed PowerPoint slide show.
Mentors are another key ‘go-to’ resource for most entrepreneurs. Most entrepreneurs go to a special person who they consider their friend, philosopher and guide to bounce ideas. Creating a prototype also allows the mentor and the entrepreneur to discuss concepts and ideas in a more realistic scenario – providing better ideas and better insights.
Importance for the team members themselves
It has been said that a prototype is worth a thousand meetings. Given our experience with helping a multitude of startups achieve their vision and then scale that vision, we believe that this is more than a saying – it is an axiom.
Fixing the problems and ensuring that misunderstandings and disconnects amongst different parts and stakeholders on the team is a key action item that must be sorted prior to full fledged engineering. It is critical to get all stakeholders onto the same page before the engineering teams start working on the product.
It makes sense to get everyone involved in the project onto the same page – this ensures that everyone knows what the end result has to look like and what steps will be followed by everyone
To summarise the importance of prototyping : It is much cheaper to test, evaluate, find and fix problems at the prototype stage through extensive testing with a diverse group of people prior to commencing full fledged engine as compared to ‘going back to the drawing board’ while engineers are deploying code.
Two key methodologies for Prototyping : Wireframing and Click Through Prototyping
At Siam Computing, we use Balsamiq, Invision and Figma to accomplish these tasks. These three tools are the cream of the crop and we believe that to drive true value, it is important to use the right tools and technologies.
WIREFRAMING
Look at wireframing the way an architect would look at building a house. Architects first run floor plans past their client, prior to building cardboard models to show off the finished product.
Architects don’t touch a brick till the plans and processes are ‘set in stone’ (no pun intended). Planning their floor plans and then constantly iterating with the customers until a layout is agreed and signed off upon is the first step to an architectural engagement.
The wireframe is the ‘floor plan’. It helps the designer show the broad dimensions of the house, what room goes where and the overall flow of how the resident would move from one room to another. It is not meant to be detailed. The cladding, tile colors and wallpaper patterns all come later on in the process. Like floor plans, it is also meant to be read and used by several people – electricians, plumbers, carpenters and even government bodies prior to plan sanction. It tells the individuals responsible for the completion of the building project, their place and function in ‘the scheme of things’
A wireframe helps your stakeholders understand the broad ‘lay of the land’. It brings everyone together and explains how their actions fit into the larger plan. These discussions help individual stakeholders prepare themselves for the ‘next steps’. It is not meant to be fancy. Since these plans are shared widely, everyone is on the same page and therein lies a reduction of risk. The wireframe allows the different people in the project – the Project Manager, Designer and Engineer understand what is expected of them.
It shows the broad outlines of the app – it includes placeholders for images, text, buttons and menus. A wireframe is meant to help the Project Manager, Designer and Engineer ‘get on the same page’ when it comes to creating a specific work product.
This is because all three stakeholders who play a major part in the success of an app’s successful creation, testing, deployment and maintenance would have differing goals, approaches and techniques to solve the same problem. Since wireframing is all about laying down the ‘broad brushstrokes’, there are a lot of variables that need to be factored into the ideation stage. Allowing individual stakeholders to create their own versions of the app’s UI and UX would be a recipe for a lot of rework and wastage of time.
Getting these three major stakeholders to come together in a meeting room and around a whiteboard and then iterate on versions will allow everyone to have a shared understanding of the end result that is expected. This allows them to align their actions and plans with a common goal.
Sharing the results of the wireframing exercise at the end of the process is a great practice. These artefacts can then be put up for display in common areas where teams of developers and designers who are working on sub-tasks can also see what is the desired end goal – and then align their actions towards meeting it.
Wireframes are a powerful tool to help focus people’s ideas and attention to a set of clearly defined problem statements and then act like a lightning rod for ideas and feedback. Everything on a wireframe is open for discussion and iteration!
What to keep in mind when wireframing.
We could go on and on…wireframing tends to excite us a great deal! But we also respect your time and attention span! We’d like to share this great set of videos from Balsamiq (our wireframing tool of choice) and Google For Startups (a great channel on YouTube that we’re sure you will appreciate)
So, what are the different ways of creating wireframes? Read on…
Paper and pencil sketches (yes, you heard that right!)
We are all used to using paper and pencil to sketch out complex concepts and ideas. At coffee shops, we think nothing of reaching out for a tissue paper and sketching out our ‘next big idea’ to a friend or family member.
This is, in many ways, a wireframe! It contains the broad strokes of how an application is meant to be created and used in the real world. It may be devoid of the colors, imagery and fonts that are planned on the application, but what it does give the viewer is an idea of how the interactions will unfold as the user navigates through the app.
It defines the screens that she will see, the way those screens will lead to other screens, the menus and sub menus, the overall balance of text to images; and many other pieces of information at a high level.
A wireframe is NOT a pixel perfect rendition of what the final app will look like. It will not contain images, shadow effects and fonts. It is only meant to be a broad level guide on how the app can be used.
Creating a pencil and paper prototype has more advantages than just being easy to work and iterate upon. Here are some more advantages:
- No need to learn ‘coding’ : Paper and pencil prototyping helps the entrepreneur focus on his vision for a better world rather than wondering whether the solutions can be coded effectively or not. Paper and pencil prototyping is a simple way to describe his ideas with the team and seek their feedback. It makes for a wider canvas of possibilities.
- Cost effective : Paper and pencil are freely available and come in all shapes, sizes and colors allowing the entrepreneur to experiment almost endlessly with different UI elements. Prototyping with paper and pencil costs next to nothing – the only cost being the cost of the paper and pencils themselves.
- Can be copy/pasted and mixed/matched with other successful pieces of UI : Paper is a versatile designing tool. We have seen designers and even entrepreneurs who we have worked with, cutting out shapes, buttons and designs that they liked after the wireframing exercise and then using them in other designs and wireframes. We love the fact that this is possible with paper!
Digital Wireframing
Digital wireframing involves the use of tools to create wireframes using digital means like computers, tablets or mobile devices to create, clarify, iterate, refine and communicate their vision and ideas to stakeholders.
The activity of digital wireframing uses the same technique and ground rules as used in the paper and pencil technique. However, it is just as powerful. We prefer software such as Balsamiq to other tools because Balsamiq helps us stay true to the precepts of wireframing – staying low fidelity and focusing on broad strokes.
At this point, we believe it would be apt to advise users of wireframing tools against making the wireframing activity on digital tools an exercise in digital craftsmanship. It is not, and must not be approached as such. We know it is possible to get carried away with all the tools and techniques and their capabilities. That’s why Balsamiq’s ‘sketchy style’ helps our team stay focused on solving the real problems and not be distracted by non-value-adds.
These wireframes are then run past the stakeholders for their discussion and review. Balsamiq makes it easy for us to actually ‘sit in’ with the customer and iterate together with his team on user flow, user experiences and demands. This investment of time and energy is critical to avoid ‘scope creep’ and ‘function creep’.
Once the wireframes are sorted out and signed off on, we begin the next process of Prototyping.
VISUAL PROTOTYPING
We go back to our analogy about architecture here.
Once the architect has completed the floor plan, he then gets a ‘sign off’ from the client and creates a model of how the home will look in a more detailed form. The architect will now create 3d models, walkthroughs and landscaping options for iterations with the client. The client and architect then work on the elevation, look and feel as well as any specific additions to the plan – all within the framework of the previously mentioned floor plan. The architect will add textures, colors and other additions to give the client a ‘better feel’ of the concept.
In our business, we call this phase the ‘Product Prototyping phase’. Once the client signs off on the wireframes, we then work with the UX and UI teams to create a product prototype using images, colors, and other effects such as shadows and button animations to show the client how the wireframe has ‘come to life’.
Iterations in this phase revolves around the brand colors of the client, the flow of screens and the way the colors, text, shadows and lines come together to form a coherent and cogent product that is also pleasing to the eye of the target consumer.
Again, we believe that iterations using all stakeholders will be a critical step here. The final users may want brighter colors and reduced distractions and clutter. Investors may have a stake in the process because of their experience with dealing with many other products that have been developed. Software engineers and app architects may have their own inputs on how/whether a specific set of screens could be developed and/or better means of navigating from one screen to the next.
We use a combination of Invision and Figma to help create digital product prototype experiences for our clients.
Digital wireframing plays an important role in the product development process. It smoothens the transition from ‘rough sketches’ to an actual working model that looks close to the finished app that the user can actually identify with (and investors would line up to fund)
How the process works
Finalising the digital wireframe
This step follows the formal sign off on the pencil and paper wireframes that have been created in our previous step. The digital wireframe needs to be iterated upon and finalized. This is important because the rest of the product development process would take off from this wireframe.
Creating a standardised set of components that will be used repeatedly
During the wireframing processes outlined in the previous steps, it will become clear to the designer that certain parts of the app screens would be used repeatedly. The most commonly used components are the text styles. The next step would be to work on the other components like buttons, inputs, drop downs, navigation bars, cards, labels and footers.
Adding interactivity to the wireframes
This step sees the entire process ‘coming together’. Interactivity is added to the components to show how the different aspects of the product interact with each other towards solving the users needs/problems. We use Figma for this because it allows us to component-ize the entire operation at speed and scale – providing our customers with quick turn around time and realistic ideas of what the end product looks like.
Creating style guides, colour palettes and font combinations
If the wireframes are the skeleton of the product, the style guides, color palettes and font combinations are the flesh and blood of the product. Siam uses a combination of our own extensive UI and design team’s inputs as well as Brand Guidelines provided by the client to create experiences that are consistent with the ‘big picture’ of where the ‘product’ will fit in. We have seen that showing the style guides and other components to the client at the initial stage to get an idea about the way the client would like to see the product. As always, it helps to pause at the end of each step to examine and evaluate the work done so far and take stock of course corrections and what’s going well.
Creating a ‘Mood Board’
Sometimes, showing the client what the design team has in mind may be easily accomplished through a ‘mood board’. The mood board shows the colors, themes and visual cues that have been followed while planning and deploying the product. The mood board can also showcase other websites that can be used for guidance and inspiration from time to time. For example, explaining a sense of ‘contemporary minimalism’ on a website may be difficult to demonstrate to a confused client in terms of just fonts and colors. Using a moodboard for this purpose with the colors, tones, lights and fonts that characterise this ethos in real world situations drive the point home far more effectively. The client is able to recognise and ‘get’ what the designer feels. It’s also very useful for the client to understand mood boards because she can then step in and show the designer what her perceptions of the product are. Again, an iterative approach will help everyone!
Styling the design system
This is the penultimate step of the product design process where the wireframes are completely transformed into a high fidelity prototype. In effect, the product goes from an idea that starts off on a piece of paper to how it will really look in the real world, when users begin to start using the product. It makes sense to show the stakeholder how the inputs have translated into the final product prior to being shipped to the engineering department for coding. As always, this will help everyone as the process advances by avoiding costly rework and ‘feature creep’
Hand-off to the engineering team
The final phase of prototyping is to ensure a proper, seamless and well documented hand over to the people who will build the product – the engineering team. It helps to share the entire process and the thoughts behind the entire product as seen and experienced by the designer during his interactions with the client. A meeting room – again with a whiteboard containing the artefacts of the previous processes would be a great backdrop to a formal handover of the design to the development team. It would be ideal if the client could also attend this meeting to make matters clear from their end as well.
Conclusion
To summarise, we would like to emphasise here that the entire design process is a highly iterative process. It is better to make mistakes and fail right at the beginning. There is no shame in ‘breaking things’ as long as those mistakes help inform the next successful iteration. People, objects, locations and interactions between the different moving parts of the product needs to be studied, evaluated and iterated upon until the client, designers and engineers have a common understanding of the problem, the solution and the actions that will take them to the ‘solved’ state.
In this blog, we have tried our best to convert what is essentially an experiential and visual set of actions into a text based system of communication. We believe that the links we have included to videos, websites and other resources provide you with the information needed to take these ideas and inspirations forward.
Good luck! And see you in our next blog.
This insightful blog post from Siam Computing walks you through the best product development practices. Subscribe to our newsletters and stay updated.
