Our very first mockup
Entering the RBA (Red Brick Accelerator, a startup accelerator) with just an idea, was probably the best move we could have done. Even most other teams who participated had already an early stage prototype and some real-life customers, we got the needed positive pressure of pushing our project in quite the hasty schedule.
Variance Team Building platform took the leap and none of this would have happened in such a pace, if we had not acted in an impulse. The third session took a turn for our project. Until that, we had validated the problems we thought existed with our end-users (students) and our co-operation on the field.
The session was facilitated by Rasmus Basilier from Startup Journey Accelerator and he introduced us more closely with the concept of paper mockup. Before going there, it is important to understand why prototyping is so important in the first hand?
Well we had ended up in a situation working on the project and talking a lot about it. We both had some kind of a picture in our head what it could be, but other than that we had pretty much just discussed about the problem. So, during the session our first reaction was pretty much “run for our lives”! How can we design anything in such a short time (I recall we had around 30 minutes) when we have nothing, but a problem? We did have the understanding that the whole of Variance will be a digital platform, preferably mobile friendly for easy-use, maverick of time and place.
In short, the papers are each a page of our websites/application/platform and whatever the tester touches, we should have a backup page where the touch connects. A very stone-age version of the digital one to say. Kind a recall of the art of childhood memories where we created mockups of real-world objects with any kind of material such as sand, paper, clay and pretty much anything we could get our hands on. There isn’t much difference between these types of prototypes – they are there to visualize what we think.
So, we started with blank papers and a nervous meltdown. What are we going to write down? We decided, that the both of us use around 15 minutes to design our own perspective on the papers and then see if we have common ideas. Caroliina’s strength seeing the bigger picture and Alina’s seeing the small details inside the big picture, resulted us having very dissimilar ideas. By this, our working time was up, and we started having some doubt if we even are on the same page of what we are working on. Had we only seen the balance our strengths combined created.
What did we learn? We both could be talking about the same problem and idea, but the way we picture it in our heads never really match if we don’t put it in some sort of shape to show one another. We could have kept going on a long time assuming about doing the same thing and still the results would have ended up totally different. Those assumptions can be deadly with time and money vice.
What other perks does prototyping give than giving the working team the same direction? How will it help you create a more human-centered design solution? Before finding these answers, it is important to understand, what a prototype is.
A prototype is a simple experimental model of a proposed solution, used to test or validate ideas, design assumptions and other aspects of its conceptualization quickly and inexpensively. With this method, before putting a huge amount of money to your work, you are able to make the refinements or possible changes in the right direction needed.
Why mockup – paper prototype
Talking about prototype, there are several different ways to build it. The most sophisticated version is a working, digital version, but before jumping there, there are several steps to take first. The first version should be the paper version. Everyone can sketch some ideas on a paper and there are no special tools required, simply a blank paper and a pencil. And that is why it is especially great; it opens up designing to everyone in a team in a very simple, yet concrete way. That helps the team to build the product in a way they all think is the best way to get started and find the core of the product.
Sketching allows designers to quickly explore lots of different design alternatives without investing too much time and energy in each one. It forces designers to concentrate on the essence of a product’s design (what it does), rather than its aesthetics (how it looks). (Babich 2019)
Sketching can be also used in any stage of the design cycle. It can be helpful during development of a digital form and even with the post launch. Basically, because it is the fastest way to communicate new ideas.
So why rapid prototyping? – It is all about validation
Testing is crucial for success, since it is too easy to become blind and fixated on the solution made. It is hard not to be bias towards the ideas created as they are a product of your own mastery. By prototyping and then testing those prototypes on viable future customers, we are able to test the assumptions and biases to uncover the insights about the real user.
In comparison to static specification, a prototype is just so much easier to understand. It is easier to get feedback on design preferences and ensure the path that has been taken. It also allows experimentation with multiple approaches and ideas. It facilitates discussion through visuals engaging the user with the information more easily than text. That made us think, why do we still write our essays in such a way, if pictures can tell easily more?
Anyway, in most cases our first ideas won’t be good enough just because at the early stage of ideation we rarely have a good understanding of the problem we are trying to solve. With rapid prototyping we are able to generate as many different designs as possible instead of focusing only on the first solution.
But before starting to sketch anything, we should have a clear understanding of what pages or layouts we need and why. That’s why during the workshop we felt to lost. We didn’t have a clear idea. Instead of being able to test it with the people around us, we needed to spend the time to clarify it to ourselves.
One thing we also learned, is that it can sometimes be hard to imagine how certain UI elements will look like in the real size. That’s why we should have used a stencil when sketching and brought a lot of spare paper. When you sketch on paper, using a stencil will help you draw elements in the actual size of the device you’re designing it for. This is especially great when you need to understand whether UI elements you’ve just drawn are large enough for interpretation and interaction. A fun fact; nowadays you are able to buy “molds” with the basic figures and icons to prototype them on a paper.
At this point you shouldn’t worry about making your sketch look pretty. When creating sketches, it is easily tempting to spend time making them look beautiful and polished. The focus shouldn’t be on perfecting the sketches, instead focusing on getting the essence of the design right.
Remember to take pictures of the sketches. During the active on rolling phase of sketching, it is far too easy to lose the most important ones in a pile of paper, or even accidentally throw them in the trash. Turning the mockup into digital copy also helps you when going forward with the prototype. And finally, feedback even on the mockup stage is crucial. Sharing the sketches with the team you are working with brings more value and enables bringing up things you haven’t thought at all.
From mockup to a digital version
After the session, we learned about Miro, an online collaborative whiteboard platform. We decided to start using it to understand the thoughts of each other more clearly and analyze our topic more effectively. This turned out to work really well and in no time, we had designed our first mockup digitally!
Using post-it notes, mind maps and different sorts of canvases, we started to have a clear picture in mind, what we wanted and needed to create. Having the mockup done is half the work, what comes next is testing it with users, so the user experience (UX).
Basilier, R. Mockup Testing. Workshop 2.3.2020. Red Brick Accelerator.
Dam, R. 2020. Design Thinking: Get Started with Prototyping. Read 8.5.2020. Interaction Design Foundation. https://www.interaction-design.org/literature/article/design-thinking-get-started-with-prototyping
Babich, N. 2019. What is Rapid Prototyping? Read 8.5.2020. Adobe. https://xd.adobe.com/ideas/process/prototyping/rapid-prototyping-efficient-way-communicate-ideas/