Lights, Camera, a̶c̶t̶i̶o̶n Prototype!
A look into Above’s video prototyping process.
Video is a great medium to explore user experiences and to future cast concepts. However, we often see video prototypes confused with concept videos or promotional videos. A video prototype, if used the right way, allows you to understand and anticipate the gaps and flaws in a concept and helps communicate the story externally. It is one of the most effective ways for testing an idea where each iteration gradually develops the concept further and evolves the overall experience from when you started. This article gives an overview of how we prototype experiences through video. We will also share with you an open UI kit that can be used to easily create minimal screen-based interfaces for videos: the chalk UI.
Depending on which part of the design process you are in; closer to brainstorming, mid concept review, or even at the final evaluation phase, video prototypes prove valuable because of their ability to become a super-catalyst for communication and collaborative exploration. The tools that have been used for showcasing the concepts in a video prototype also depend on this phase, ranging from high fidelity prototypes, as you saw in the earlier video, all the way to paper prototypes.
Video prototypes vs concept videos
One thing we have noticed is how polished visionary videos are often confused with video prototypes, two completely different products. Future concept videos are designed to impress and inspire. They prioritize creating a narrative of a future and gloss over the details of how products and services actually work. However, visionary videos cannot be used for prototyping or testing with people because of the concrete experiences that they display. These videos are created by investing a lot of time in building beautiful and complete visuals. On the contrary, video prototypes try to help people envision how an experience plays out. Distilled experiences are shown and provide users with opportunities for filling in the gaps themselves through rough prototypes and unpolished illustrations. A successful video prototype allows the viewers to co-create along with the team and explore collaboratively. Video prototypes should allow you to imagine what it would be like to use a certain product, not just live in a specific future. They are more focussed and with the aim to test experiences by better understanding the product and its gaps.
Why video prototypes?
These are some of the reasons why we feel that video prototypes are a powerful way to explore and communicate a concept:
1. Need for speed
Prototyping through video is the quickest way to test a concept. Create a short storyboard, gather some props, and shoot a rough video with your phone. The first video prototype is basically like filming a bodystorming session with your team. You will be surprised how fast you can learn about the gaps in the UX flow while shooting the story. In a couple of hours, the concept starts evolving and becomes more polished from when you started. Share the video at the end of the day with your team and gather feedback.
2. Nailing the right fidelity
Fidelity apart from being closely linked to speed is also vital when it comes to communicating the concept externally. It is easy to get distracted by focussing on flashy animations or beautiful visual effects. But at the core, the focus of a video prototype should be on fleshing out the interactions and developing the concept. Using minimal UI interfaces like our chalk UI kit and simple props, it lets you steer the attention of the group towards the concept itself and not on the finer details of its visuals. This lets you clearly communicate the user journey and the underlying value without any distractions.
3. Cocreate with your viewers
If the concept is strong and capable of communicating the underlying value, then even with gaps in the interface, it lets people imagine the complete experience while allowing them to fill in the gaps themselves. Thus, reducing the barrier to co-creating with the team. Compared to a polished high fidelity production video that tries to convey a ready-to-go concept, video prototypes that exist in the form of these low fidelity experiences provide opportunities for people to share their take on the story and how it can be improved.
4. Focus on what matters
The format for a video prototype allows you to focus the attention of the viewers on specific moments in the concept. So instead of demonstrating every part of a product, specific features and contexts of said product are concentrated on. This allows you to receive focussed feedback from the viewers without being distracted with comments on irrelevant details like the colour of an element which is usually associated with physical prototypes.
5. Communicating with zero noise
Being able to translate the concept from the mind to a form that can be communicated, without losing any of the finer details associated with it, is what matters; and whether it is a video, a picture or a gif is totally up to the context of the story you want to tell. From practice, video has been found to be the champion in terms of communicating and sharing an idea to a large number of people. Its viral ability to traverse within an organisation or externally is nothing new. At the end of the day, it’s all about communication.
How to prototype through video?
The process we follow for video prototyping usually involves at least 2–3 rounds of iterations. We start by shooting the storyboard through a phone camera with minimal equipment. After doing this for one or two rounds, we get a better understanding of the gaps in the existing flow that allows us to modify the concept to address them. Through these rounds, it is not the video itself that is being adjusted but the concept and the interactions involved, which gradually evolve and become stronger. The final video is then made at a higher fidelity in terms of both the micro-interactions as well as video quality. These are the sequence of steps in our process:
1. Bodystorming
After selecting the concept that needs to be prototyped through video, bodystorming is one of the best ways to start creating a narrative and a holistic experience. Use placeholder objects as props and act out a context with the team in which the concept can be explored. After a few rounds, this session can be easily translated into a storyboard.
2. Prepare the storyboard
This is the most important step in the overall process. The storyboard is a living document that evolves with the concept. Each storyboard should only focus on one concept, which is shown through a moment or a series of related moments; mixing multiple concepts in a video will confuse the viewers. A good rule of thumb is to aim for a video that is at the most a minute long or a series of vignettes that could be around 30–40 seconds long. Short videos, as opposed to longer ones, help viewers capture the magic moments and the interactions better in their mind without overwhelming them.
Next, we create a storyboard set in the context and environment of the concept that captures the magic moments and interactions. The story should clearly address the problem and then the solution for it through the concept. We generally tend to follow the story arc principle.
3. Prepare the props
Depending on the concept you are exploring, may it be around personal computing devices, home appliances, etc., create lightweight props that have the basic affordances for the products you are exploring. Laser-cut acrylics, simple 3d printed shapes, or existing indescriptive products have been some of the things that we have used in the past for this purpose. Giving all the props the same coat of paint, something very subtle like grey is also a cheat code to helping viewers expect and look out for them in the video. If needed, buttons and controls can be laser etched onto the props; router cut vinyl stickers or rub-ons can also be used to visualise buttons or elements.
4. Shooting
Based on the storyboard that you have prepared, the story is then recorded on video using basic equipment. Phone and a tripod will do for the first one or two rounds. Video prototypes unlike concept videos don’t or should not have an expectation set around it for high production quality. However, after exploring the UX and interactions, if the story were to be circulated to a larger audience, it could be shot using equipment like a DSLR/cinema camera, lapel mics, studio lights, director’s monitor, etc.
5. Preparing the interfaces
Depending on the concept, if it has screen-based interfaces in the video, prepare them. We usually hand draw these interfaces and scan them into illustrator for fine-tuning. We prefer sketching interfaces instead of creating them in illustrator or Figma mainly because of two reasons:
- Sketching is way faster. You can sketch a rough interface very quickly and scan it into illustrator much faster than creating each element in software. We have tried doing both and always prefer sketching.
- The look and feel of the hand-drawn interface make it clear to the viewers that the shown interface is just a rough placeholder UI for the concept. It makes the viewers detached from the visual details of the elements such as its colour or position but helps them to focus on the actual experience that it enables.
The chalk UI kit puts together some of these interfaces that we have used in the past for devices like phones, tablets or laptops. You can use it for putting together some basic screens without having to start from scratch.
Download it here: chalk UI for video prototyping. If you would like to add to this kit and make your own hand-drawn elements, these are a few tips that would be helpful to keep in mind while sketching out the interfaces:
- The visual appeal and fidelity of the sketches are not as important as the final experience it is in.
- Use a grid lined sketchbook, and a pen, compass, ruler if you want it to be a little more polished.
- Think about the reusability of the assets you are sketching. What can be reused in a different scene? The key is to bring consistency among the sketches of the UI elements that would be pulled into different screens.
- Think about animation or micro-interactions. What needs to be animated in the interface?
- Try to write in uppercase; lowercase makes the text less legible.
- Pay attention to the language, spelling and grammar. It can’t be fixed easily after it is scanned.
- If something is not critical for describing the experience, just delete it.
- Once you get a hang of this process of sketching from start to end, it very quickly becomes a part of your toolkit. (Sketches from the chalkboard UI)
6. Post-production
For post-production, we recommend using Adobe’s creative suite products namely: Premiere Pro, After Effects, Illustrator, and Audition. The nice thing about these tools is that they are able to link the footage together through the dynamic link feature, which means that if you modify a screen element in After Effects, it automatically updates the footage in Premiere with the new screen as well.
Start by creating a rough cut in Premiere with the footage that you captured. This becomes the base from which you can branch out to software like After Effects, Illustrator and Audition. Once that is done, start by picking a sequence that needs compositing with the screen interface and pull that into After Effects. Import the interfaces from Illustrator into After Effects and fine-tune the micro-interactions. Do this for all the sequences that need compositing.
Once a rough cut of the composited video is ready, we sometimes put in visual call outs for each part of the concept. We usually do this for the final video after a few rounds of iterations. This makes it easy for the viewers to understand what is happening and also registers the moments better in their minds.
Video prototyping is a tool that we use a lot at Above with our clients to help explore future concepts and experiences. As a tool, it has been in the designer’s toolkit for a long time and, at its core, has remained unchanged. But with tools like the chalk UI kit, we can try to reduce the barrier to entry for prototyping experiences even further and make the process much faster. At the end of the day its always about crafting meaningful stories for the future.
Credits:
The work shown above have been contributed through various projects by Felix Heibeck, Arvind Sanjeev, Jin Jae Lee, David Kwon, Simon Fedriksson, Trieuvy Luu and Louis Billotte. The Chalk UI kit was prepared by Jin Jae Lee and props by Victor Johansson.
