Prototyping is more than making paper airplanes – Part 1
Digital strategy and prototyping go together
Tight budget, tight schedule, little resources in the departments. Nevertheless, the digital strategy says that clients need to have access to their invoices and need to be able to order their products and services online? What to do now?
How to start?
The implementation of a digital strategy is starting. The department, the developers, the designers and the marketing department come together. The goals are set but the project is at an early stage: there is a need to reflect on how the client logs in, when does he sees what and what he can order what. Is it really necessary to integrate a designer and a programmer into the project at this early stage respectively with these little information? It just doesn’t feel right despite the little amount of time, doesn’t it? But your feeling is right. Hasn’t it often occurred that someone was saying just before the release of a new function of your website, “We do not have this information!”
In the case of using mockups, a design study, it would have been clear in a much earlier meeting that something important was missing. Also a prototype would have shown that e.g. the price could not have been calculated at this process stage.
To be aware of all these issues BEFORE starting with programming, avoids laborious and costly adaptations. For this, besides a profound project management, wireframes, mockups and prototyping are necessary tools.
Wireframes or Mockup – What is what?
What is a wireframe? Why do we need mockups and isn’t it rather expensive to build a prototype?
Wireframes
Wireframes are so called Blue Prints of designs – the preliminary step with a lot of placeholders. A picture says a way more than plain text but for the final design it is still too early. That’s why User Experience (UX) Experts are making a wireframe, which is a draft of the future design. This draft can be discussed much easier and if there are any adaptations to do, it’s much cheaper to do. If everybody is confident, there will be the next step.
Mockups
Mockups are similar to a wireframe concerning their characteristics. The difference is obvious when it comes to functionality. A mockup focuses on functionality rather than optics. It is clear from the very beginning on that the design is not a final one. The range of how a mockup can look like goes from drawings (even paper drawings) to a draft with colors, forms, icons and further details. The focus lies on the specific order of steps and on different functionalities (everything a designer needs to program later on).
Wireframes vs. Mockup
A wireframe shows where to find which box with the relevant information or how the design looks like as a whole. In addition, where there will be advertisement or what the differences between the mobile and the desktop versions are.
In contrast to, a mockup shows when the user is able to click on which button, what happens as result of the click and how the display is changing. Normally there will be used a mixture of both methods. A strict separation is not necessary in this case and reduces the workload.
Is it possible to click, then it’s prototyping
If the design draft is clickable and there are changes obvious concerning the design (e.g. the price is being calculated or the shopping basket is filled), then it becomes a prototype. Here the range is possible from a click dummy (focus on the client’s perspective – this will be experienced by the client when he is clicking through the process) to a technical prototype with e.g. where the interface is attached/connected. In many cases these two terms are being mixed up or seen as similar. In the end, these are just names, what is more important is the use: there are more benefits and successful IT projects differentiate themselves from projects where the functionalities have not been discussed in advance or where the design has not been accepted by all stakeholders, and the clients have not accepted the functionalities.
The plan is important, the digital strategy
Prototyping, wireframing and mockups are not only „drawings“, they are rather a plan. A well-experienced Usability engineer uses wireframes and mockups to clarify with the department, the client and technology experts how the process is to be set: What is happening when the client logs in, what products is he able to order, when will the price be calculated and where will the discount be shown. Mockups and wireframes go hand in hand and it depends on the complexity of the process, if a prototype with functions or a click dummy is needed as well.
Even with paper mockups used in user tests, it is possible to try out how the new interface is performing / is being experienced.
In the end the decision depends on the relevance of the project and if there are well-experienced user interface experts around – the main thing is to have a good plan.
What now?
Our user interface experts who are responsible for the project are using appropriate tools to build the bridge between the idea to the final product (with code and graphic design). On the market there are several providers in this fields. At USECON we successfully use these two tools: Balsamiq Mockups and Axure RP. Both tools have their advantages and disadvantages.
In the following blogposts we will talk in more detail about these two tools. If you are too curious to wait, please have a look at our Prototyping training.
For further information, please contact Michael Bechinie.
Please, also read about our UX hardware prototyping project, we build for a client.
Remember, prototyping is much more than making paper airplanes.
A guest article by Birgit Harthum
